App下載

Bootstrap組件介紹

猿友 2021-01-22 10:20:13 瀏覽數(shù) (3271)
反饋

一、下拉菜單

用于顯示鏈接列表的可切換、有上下文的菜單。下拉菜單的 JavaScript 插件讓它具有了交互性。

1、實(shí)例

將下拉菜單觸發(fā)器和下拉菜單都包裹在 .dropdown 里,或者另一個(gè)聲明了 position: relative; 的元素。然后加入組成菜單的 HTML 代碼。

<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>

  aria-haspopup :true表示點(diǎn)擊的時(shí)候會(huì)出現(xiàn)菜單或是浮動(dòng)元素; false表示沒(méi)有pop-up效果。

  aria-expanded:表示展開(kāi)狀態(tài)。默認(rèn)為undefined, 表示當(dāng)前展開(kāi)狀態(tài)未知。其它可選值:true表示元素是展開(kāi)的;false表示元素不是展開(kāi)的

  aria-labelledby:當(dāng)想要的標(biāo)簽文本已在其他元素中存在時(shí),可以使用aria-labelledby,并將其值為所有讀取的元素的id。如下:

  當(dāng)ul獲取到焦點(diǎn)時(shí),屏幕閱讀器是會(huì)讀:“選擇您的職位”

  data-toggle: 表示什么事件類(lèi)型發(fā)生

二、按鈕式下拉菜單

  把任意一個(gè)按鈕放入 .btn-group 中,然后加入適當(dāng)?shù)牟藛螛?biāo)簽,就可以讓按鈕作為菜單的觸發(fā)器了。

1、單按鈕下拉菜單

<!-- Single button -->
<div class="btn-group">
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  Action <span class="caret"></span>
 </button>
 <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>
</div>

  1311506-20180620151412372-1683903946鼠標(biāo)指向時(shí),顯示背景顏色。

2、分裂式下拉菜單

只是多一個(gè)分開(kāi)的按鈕。

<!-- Split button -->
<div class="btn-group">
 <button type="button" class="btn btn-danger">Action</button>
 <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   <span class="caret"></span>
   <span class="sr-only">Toggle Dropdown</span>?
 </button>
 <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>
</div>

  1311506-20180620151529047-848509511可以看到分成了左右兩個(gè)按鈕。

三、面板

某些時(shí)候你可能需要將某些 DOM 內(nèi)容放到一個(gè)盒子里。對(duì)于這種情況,可以試試面板組件。

1、基本實(shí)例

默認(rèn)的 .panel 組件所做的只是設(shè)置基本的邊框(border)和內(nèi)補(bǔ)(padding)來(lái)包含內(nèi)容。

<div class="panel panel-default">
 <div class="panel-body">
  Basic panel example
 </div>
</div>

  顯示效果:

  1311506-20180620152012895-1387802416

2、帶標(biāo)題的面板

通過(guò) .panel-heading 可以很簡(jiǎn)單地為面板加入一個(gè)標(biāo)題容器。你也可以通過(guò)添加設(shè)置了 .panel-title 類(lèi)的 <h1>-<h6> 標(biāo)簽,添加一個(gè)預(yù)定義樣式的標(biāo)題。不過(guò),<h1>-<h6> 標(biāo)簽的字體大小將被 .panel-heading 的樣式所覆蓋。

為了給鏈接設(shè)置合適的顏色,務(wù)必將鏈接放到帶有 .panel-title 類(lèi)的標(biāo)題標(biāo)簽內(nèi)。


0 人點(diǎn)贊