首先，bs中包含一個響應式的、移動設備優先的、不固定的網格系統，數量為12列或24列

1、版心（container）

2、媒體查詢類

? （1）、row 代表行?

? （2）、col-xs (超小屏即移動端)? <768px

? （3）、col-sm(小屏)? ? ? ? ? ? ? ? ? ? ≥768px

? （4）、col-md（中屏）? ? ? ? ? ? ? ?≥992px

? （5）、col-lg （大屏）????????????????≥1200px

? （6）、col-(xs\sm\md\lg)-offset-偏移的數量? （向右偏移的數量）??

3、表格類

? （1）、table

? （2）、table-striped? （給表格內添加斑馬紋樣式）

? （3）、table-bordered? （給表格添加邊框）

? （4）、table-hover? （給表格添加移入的效果）

4、默認顏色類

? （1）、success （ 成功信息 綠色）

? （2）、info（ 變化信息? 藍色）

? （3）、warning（警告信息? 黃色）

? （4）、danger （危險類操作提示? 紅色）

5、表單類

? （1）、role='form’? (默認類型或垂直類表單)

? （2）、form-inline? （行內類型表單）

? （3）、form-horizontal? （水平類型的表單）

6、按鈕類

? （1）、btn-default? （默認/標準按鈕）

? （2）、btn-link? （讓按鈕看起來像個鏈接）

? （3）、btn-block? （拉伸至父元素100%的寬度）

? （4）、disabled? （禁用按鈕）

? （5）、active? （按鈕被點擊）

7、圖片類

? （1）、img-rounded? （為圖片添加圓角）

? （2）、img-responsive? （響應式的圖片）

8、字體圖標類

? （1）、信件圖標? （glyphicon glyphicon-envelope）

? （2）、搜索圖標? （glyphicon glyphicon-search）

? （3）、人物頭像? （glyphicon glyphicon-user）

? （4）、關閉? （glyphicon glyphicon-remove）

????????。。。更多的可以在菜鳥教程中查找 或者阿里的圖片庫中下載等

9、下拉菜單類?

? （1）、標準下拉菜單（dropdown）

? （2）、下拉菜單中的標題? （dropdown-header）

9、按鈕下拉菜單? (btn-group)

10、響應式導航欄? ?(是多個類名組合)

<nav class="navbar navbar-default" role="navigation"><div class="container-fluid"><div class="navbar-header"><a class="navbar-brand" href="#">菜鳥教程</a></div><div><form class="navbar-form navbar-left" role="search"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">提交按鈕</button></form><button type="button" class="btn btn-default navbar-btn">導航欄按鈕</button></div></div> </nav>

11、模態框??

<h2>創建模態框（Modal）</h2> <!-- 按鈕觸發模態框 --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">開始演示模態框</button> <!-- 模態框（Modal） --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h4 class="modal-title" id="myModalLabel">模態框（Modal）標題</h4></div><div class="modal-body">在這里添加一些文本</div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">關閉</button><button type="button" class="btn btn-primary">提交更改</button></div></div><!-- /.modal-content --></div><!-- /.modal --> </div>

12、分頁

<ul class="pagination"><li><a href="#">&laquo;</a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">&raquo;</a></li> </ul>

13、徽章

<div class="container"><h2>徽章</h2><p>.badge 類指定未讀消息的數量:</p><p><a href="#">收件箱 <span class="badge">21</span></a></p> </div>

14、分割按鈕下拉菜單

<div class="btn-group"><button type="button" class="btn btn-default">默認</button><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span><span class="sr-only">切換下拉菜單</span></button><ul class="dropdown-menu" role="menu"><li><a href="#">功能</a></li><li><a href="#">另一個功能</a></li><li><a href="#">其他</a></li><li class="divider"></li><li><a href="#">分離的鏈接</a></li></ul> </div> <div class="btn-group"><button type="button" class="btn btn-primary">原始</button><button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span><span class="sr-only">切換下拉菜單</span></button><ul class="dropdown-menu" role="menu"><li><a href="#">功能</a></li><li><a href="#">另一個功能</a></li><li><a href="#">其他</a></li><li class="divider"></li><li><a href="#">分離的鏈接</a></li></ul> </div>

15、進度條（顯示內容）

<div class="progress"><div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"aria-valuemin="0" aria-valuemax="100" style="width:40%">40% Complete (success)</div> </div><div class="progress"><div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"aria-valuemin="0" aria-valuemax="100" style="width:50%">50% Complete (info)</div> </div><div class="progress"><div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"aria-valuemin="0" aria-valuemax="100" style="width:60%">60% Complete (warning)</div> </div><div class="progress"><div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"aria-valuemin="0" aria-valuemax="100" style="width:70%">70% Complete (danger)</div> </div>

16、多媒體對象

<!-- 左對齊 --> <div class="media"><div class="media-left"><img src="img_avatar1.png" class="media-object" style="width:60px"></div><div class="media-body"><h4 class="media-heading">左對齊</h4><p>這是一些示例文本...</p></div> </div><!-- 右對齊 --> <div class="media"><div class="media-body"><h4 class="media-heading">左對齊</h4><p>這是一些示例文本...</p></div><div class="media-right"><img src="img_avatar1.png" class="media-object" style="width:60px"></div> </div>

17、吸頂效果

data-spy="affix" data-offset-top="高度"

18、折疊面板（手風琴）

<div class="panel-group" id="accordion"><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">點擊我進行展開，再次點擊我進行折疊。第 1 部分</a></h4></div><div id="collapseOne" class="panel-collapse collapse in"><div class="panel-body">Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">點擊我進行展開，再次點擊我進行折疊。第 2 部分</a></h4></div><div id="collapseTwo" class="panel-collapse collapse"><div class="panel-body">Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">點擊我進行展開，再次點擊我進行折疊。第 3 部分</a></h4></div><div id="collapseThree" class="panel-collapse collapse"><div class="panel-body">Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.</div></div></div> </div>

19、輪播

<div id="myCarousel" class="carousel slide"><!-- 輪播（Carousel）指標 --><ol class="carousel-indicators"><li data-target="#myCarousel" data-slide-to="0" class="active"></li><li data-target="#myCarousel" data-slide-to="1"></li><li data-target="#myCarousel" data-slide-to="2"></li></ol> <!-- 輪播（Carousel）項目 --><div class="carousel-inner"><div class="item active"><img src="https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500" alt="First slide"><div class="carousel-caption">標題 1</div></div><div class="item"><img src="https://img1.baidu.com/it/u=1223669517,3326619488&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=866" alt="Second slide"><div class="carousel-caption">標題 2</div></div><div class="item"><img src="https://img0.baidu.com/it/u=324201646,1175190975&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="Third slide"><div class="carousel-caption">標題 3</div></div></div><!-- 輪播（Carousel）導航 --><a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a> </div>

20、滾動監聽

<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation"><div class="container-fluid"> <div class="navbar-header"><button class="navbar-toggle" type="button" data-toggle="collapse"data-target=".bs-js-navbar-scrollspy"><span class="sr-only">切換導航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">教程名稱</a></div><div class="collapse navbar-collapse bs-js-navbar-scrollspy"><ul class="nav navbar-nav"><li><a href="#ios">iOS</a></li><li><a href="#svn">SVN</a></li><li class="dropdown"><a href="#" id="navbarDrop1" class="dropdown-toggle"data-toggle="dropdown">Java<b class="caret"></b></a><ul class="dropdown-menu" role="menu"aria-labelledby="navbarDrop1"><li><a href="#jmeter" tabindex="-1">jmeter</a></li><li><a href="#ejb" tabindex="-1">ejb</a></li><li class="divider"></li><li><a href="#spring" tabindex="-1">spring</a></li></ul></li></ul></div></div> </nav> <div data-spy="scroll" data-target="#navbar-example" data-offset="0"style="height:200px;overflow:auto; position: relative;"><h4 id="ios">iOS</h4><p>iOS 是一個由蘋果公司開發和發布的手機操作系統。最初是于 2007 年首次發布 iPhone、iPod Touch 和 AppleTV。iOS 派生自 OS X，它們共享 Darwin 基礎。OS X 操作系統是用在蘋果電腦上，iOS 是蘋果的移動版本。</p><h4 id="svn">SVN</h4><p>Apache Subversion，通常縮寫為 SVN，是一款開源的版本控制系統軟件。Subversion 由 CollabNet 公司在 2000 年創建。但是現在它已經發展為 Apache Software Foundation 的一個項目，因此擁有豐富的開發人員和用戶社區。</p><h4 id="jmeter">jMeter</h4><p>jMeter 是一款開源的測試軟件。它是 100% 純 Java 應用程序，用于負載和性能測試。</p><h4 id="ejb">EJB</h4><p>Enterprise Java Beans（EJB）是一個創建高度可擴展性和強大企業級應用程序的開發架構，部署在兼容應用程序服務器（比如 JBOSS、Web Logic 等）的 J2EE 上。</p><h4 id="spring">Spring</h4><p>Spring 框架是一個開源的 Java 平臺，為快速開發功能強大的 Java 應用程序提供了完備的基礎設施支持。</p><p>Spring 框架最初是由 Rod Johnson 編寫的，在 2003 年 6 月首次發布于 Apache 2.0 許可證下。</p> </div>

總結

以上是生活随笔為你收集整理的Bootstrap中一些常用的类名的全部內容，希望文章能夠幫你解決所遇到的問題。

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