文檔內容參考地址：http://v3.bootcss.com/components/

一、圖標

　　如下例，Star文本前有一個空格：

<button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star </button>

二、下拉菜單

　　將下拉菜單觸發器和下拉菜單都包裹在?.dropdown?里，或者另一個聲明了?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 class="disabled"><a href="#">Action</a></li> //禁用項：為下拉菜單中的 <li> 元素添加 .disabled 類，從而禁用相應的菜單項。<li><a href="#">Another action</a></li><li class="dropdown-header">Dropdown header</li> //標題：在任何下拉菜單中均可通過添加標題來標明一組動作。<li><a href="#">Something else here</a></li><li role="separator" class="divider"></li> //分割線：為下拉菜單添加一條分割線，用于將多個鏈接分組。<li><a href="#">Separated link</a></li></ul> </div>

三、按鈕組

1、基本應用

2、按鈕工具欄

　　把一組?<div class="btn-group">?組合進一個?<div class="btn-toolbar">?中就可以做成更復雜的組件。

3、按鈕與下拉菜單嵌套

　　想要把下拉菜單混合到一系列按鈕中，只須把?.btn-group?放入另一個?.btn-group?中。

四、導航

?

轉載于:https://www.cnblogs.com/seven-007/p/7879944.html

總結

以上是生活随笔為你收集整理的python之路_前端基础之Bootstrap 组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。