線上書籍

Home

網頁設計與雲端應用

無數可複用的組件，包括

一、Glyphicons 字體圖標

  1. 不要和其他組件混合使用
    圖標類不能和其它組件直接聯合使用。它們不能在同一個元素上與其他類共同存在。應該創建一個嵌套的<span>標籤，並將圖標類應用到這個<span>標籤上。
  2. 只對內容為空的元素起作用
    圖標類只能應用在不包含任何文本內容或子元素的元素上。
  3. 實例 <button type="button" class="btn btn-default" aria-label="Left Align"> <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> </button> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star </button>
  4. alert組件中所包含的圖標是用來表示這是一條錯誤消息的，通過添加額外的 .sr-only 文本就可以讓輔助設備知道這條提示所要表達的意思了。 <div class="alert alert-danger" role="alert"> <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> <span class="sr-only">Error:</span> Enter a valid email address </div>

二、下拉菜單

  1. 將下拉菜單觸發器和下拉菜單都包裹在.dropdown裡，或者另一個聲明了position: relative;的元素。然後加入組成菜單的HTML代碼。
  2. 實例 <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>
  3. 向上：通過為下拉菜單的父元素設置.dropup類，可以讓菜單向上彈出（默認是向下彈出的）。 <div class="container" style="margin-top:400px;"> <div class="dropup"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropup <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu2"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div>

     

三、導航

  1. 標籤頁 <ul class="nav nav-tabs">   <li role="presentation" class="active"><a href="#">Home</a></li>   <li role="presentation"><a href="#">Profile</a></li>   <li role="presentation"><a href="#">Messages</a></li> </ul>
  2. 膠囊式標籤頁：nav-pills <ul class="nav nav-pills"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul>

    膠囊是標籤頁也是可以垂直方向堆疊排列的。只需添加.nav-stacked類。
     

    <ul class="nav nav-pills nav-stacked"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul>

     

四、導航條

  1. 實例：http://site.ugm.twgg.org/web/11-1.html <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>

     

五、縮略圖

  1. 實例：http://tncomu10601.ugm.com.tw/web/11-5.html 
    假圖：https://fakeimg.pl/ <div class="bs-example" data-example-id="thumbnails-with-custom-content"> <div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="http://fakeimg.pl/800x600/"> <div class="caption"> <h3>Thumbnail label</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p> <a href="#" class="btn btn-primary" role="button">Button </a> <a href="#" class="btn btn-default" role="button">Button</a> </p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="http://fakeimg.pl/800x600/"> <div class="caption"> <h3>Thumbnail label</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p> <a href="#" class="btn btn-primary" role="button">Button </a> <a href="#" class="btn btn-default" role="button">Button</a> </p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="http://fakeimg.pl/800x600/"> <div class="caption"> <h3>Thumbnail label</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p> <a href="#" class="btn btn-primary" role="button">Button </a> <a href="#" class="btn btn-default" role="button">Button</a> </p> </div> </div> </div> </div> </div>

     

六、警告框

  1. 實例 <div class="alert alert-success" role="alert">...</div> <div class="alert alert-info" role="alert">...</div> <div class="alert alert-warning" role="alert">...</div> <div class="alert alert-danger" role="alert">...</div>
  2. 可關閉的警告框
    為警告框添加一個可選的.alert-dismissible類和一個關閉按鈕。 <div class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button> <strong>Warning!</strong> Better check yourself, you're not looking too good. </div>

七、面板

  1. 基本實例
    默認的 .panel 組件所做的只是設置基本的邊框（border）和內補（padding）來包含內容。 <div class="panel panel-default"> <div class="panel-body"> 基本實例 </div> </div>
  2. 帶標題的面板

    通過 .panel-heading 可以很簡單地為面板加入一個標題容器。你也可以通過添加設置了 .panel-title 類的 <h1> -  <h6> 標籤，添加一個預定義樣式的標題。不過， <h1> -  <h6> 標籤的字體大小將被 .panel-heading 的樣式所覆蓋。

    為了給鏈接設置合適的顏色，務必將鏈接放到帶有 .panel-title 類的標題標籤內。

    <div class="panel panel-default"> <div class="panel-heading">Panel heading without title</div> <div class="panel-body"> 面板內容 </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">面板標題</h3> </div> <div class="panel-body"> 面板內容 </div> </div>