全面解析Bootstrap布局組件應(yīng)用
更新時(shí)間：2016年02月22日 14:59:50 投稿：lijiao
這篇文章主要為大家全面解析Bootstrap布局組件應(yīng)用，幾乎對(duì)所有Bootstrap布局組件示例進(jìn)行了解析，感興趣的小伙伴們可以參考一下
本文示例介紹了Bootstrap布局組件應(yīng)用，分享給大家供大家參考，具體內(nèi)容如下
字體圖標(biāo)的應(yīng)用示例
<button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-sort-by-attributes"></span> </button>
下拉菜單示例
<div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"> 主題 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="dropdown-header">下拉菜單標(biāo)題</li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">選項(xiàng)1</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">選項(xiàng)2</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">選項(xiàng)3</a> </li> <li role="presentation" class="divider"></li><!--分割線(xiàn)--> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">分離的鏈接</a> </li> </ul> </div>
按鈕工具欄與按鈕組
<div class="btn-toolbar" role="toolbar"><!--用來(lái)嵌套btn-group--> <div class="btn-group btn-group-lg"> <!--btn-group-lg用來(lái)控制按鈕組的大小,bt-group-vertical是垂直的按鈕組,bt-group也可以嵌套bt-group--> <button type="button" class="btn btn-default">Button 1</button> <button type="button" class="btn btn-default">Button 2</button> <button type="button" class="btn btn-default">Button 3</button> </div> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-default">Button 4</button> <button type="button" class="btn btn-default">Button 5</button> <button type="button" class="btn btn-default">Button 6</button> </div> <div class="btn-group btn-group-xs"> <button type="button" class="btn btn-default">Button 7</button> <button type="button" class="btn btn-default">Button 8</button> <button type="button" class="btn btn-default">Button 9</button> </div> </div>
按鈕下拉菜單
<div class="btn-group"><!--加類(lèi).dropup可以變成按鈕上拉菜單--> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <!-- 加類(lèi).btn-xs之類(lèi)的東西改變按鈕大小--> 默認(rèn) <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">功能</a></li> <li><a href="#">另一個(gè)功能</a></li> <li><a href="#">其他</a></li> <li class="divider"></li><!--分割線(xiàn)--> <li><a href="#">分離的鏈接</a></li> </ul> </div>
表單中的輸入框組
<form class="bs-example bs-example-form" role="form">
<div class="input-group input-group-lg"><!--input-group-lg調(diào)整輸入框組大小-->
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
<br>
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox"><!--復(fù)選框和單選框都能應(yīng)用于輸入框組-->
</span>
<input type="text" class="form-control">
</div>
<br>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn"><!--按鈕也能應(yīng)用于輸入框組請(qǐng)注意這里的類(lèi)變?yōu)榱薸nput-group-btn，甚至可以加上前面的按鈕下拉菜單-->
<button class="btn btn-default" type="button">
Go!
</button>
</span>
</div>
</form>
導(dǎo)航（tab標(biāo)簽頁(yè)）
<p>標(biāo)簽式的導(dǎo)航菜單</p> <ul class="nav nav-tabs"><!--加上類(lèi)nav-justified可以讓導(dǎo)航兩端對(duì)齊--> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li> </ul> <p>基本的膠囊式導(dǎo)航菜單</p> <ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> </ul> <p>垂直的膠囊式導(dǎo)航菜單</p> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> </ul>
導(dǎo)航欄
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">W3Cschool</a>
</div>
<div>
<ul class="nav navbar-nav"><!--.navbar-fixed-top和.navbar-fixed-bottom可以使導(dǎo)航欄固定在頂部和底部， .navbar-static-top會(huì)使導(dǎo)航欄隨頁(yè)面滾動(dòng)嗎， .navbar-inverse實(shí)現(xiàn)背景顏色和文字顏色互換-->
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分離的鏈接</a></li>
</ul>
</li>
</ul>
<!--導(dǎo)航欄中的表單-->
<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>
<!--導(dǎo)航欄按鈕-->
<button type="button" class="btn btn-default navbar-btn">
導(dǎo)航欄按鈕
</button>
<!--導(dǎo)航欄文本-->
<div class="navbar-text navbar-right">
<p >導(dǎo)航欄文本 <a href="#" class="navbar-link">我是鏈接</a></p>
</div>
<!--navbar-left和navbar-right可以實(shí)現(xiàn)向左和向右對(duì)齊-->
</div>
</nav>
響應(yīng)式的導(dǎo)航欄
以下金黃色部分為對(duì)一般的導(dǎo)航欄的區(qū)別
<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span><!--下面有幾個(gè)選項(xiàng)這里就有幾個(gè)iconbar--> </button> <a class="navbar-brand" href="#">W3Cschool</a> </div> <div class="collapse navbar-collapse" id="example-navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li><a href="#">Troy</a></li> </ul> </div> </nav>
面包屑導(dǎo)航
<ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">2013</a></li> <li class="active">十一月</li> </ol>
分頁(yè)和翻頁(yè)
<!--以下所有示例都可以用disabled和active類(lèi)來(lái)控制激活和禁用--> <!--分頁(yè)--> <ul class="pagination"><!--pagination-sm和pagination-lg來(lái)控制分頁(yè)的大小--> <li><a href="#">«</a></li> <li class="active"><a href="#">1</a></li> <li class="disabled"><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="#">»</a></li> </ul> <!--翻頁(yè)--> <ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> <!--翻頁(yè)--> <ul class="pager"> <li class="previous"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul>
標(biāo)簽
<span class="label label-default">默認(rèn)標(biāo)簽</span> <span class="label label-primary">主要標(biāo)簽</span> <span class="label label-success">成功標(biāo)簽</span> <span class="label label-info">信息標(biāo)簽</span> <span class="label label-warning">警告標(biāo)簽</span> <span class="label label-danger">危險(xiǎn)標(biāo)簽</span>
徽章
徽章比標(biāo)簽更圓滑，主要用于突出顯示新的或未讀的項(xiàng)
<ul class="nav nav-pills nav-stacked" style="max-width: 260px;"> <li class="active"> <a href="#"> <span class="badge pull-right">42</span> 首頁(yè) </a> </li> <li><a href="#">簡(jiǎn)介</a></li> <li> <a href="#"> <span class="badge pull-right">3</span> 消息 </a> </li> </ul>
超大屏幕
<div class="jumbotron"> <div class="jumbotron"> <h1>歡迎登陸頁(yè)面！</h1> <p>這是一個(gè)超大屏幕（Jumbotron）的實(shí)例。</p> <p><a class="btn btn-primary btn-lg" role="button"> 學(xué)習(xí)更多</a> </p> </div> </div> <!--翻過(guò)來(lái)jumbotron包著jumbotron就會(huì)得到一個(gè)不帶圓角且占更多寬度的超大屏幕-->
頁(yè)面標(biāo)題示例
<div class="page-header"> <h1>頁(yè)面標(biāo)題實(shí)例 <small>子標(biāo)題</small> </h1> </div>
縮略圖
<div href="#" class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="通用的占位符縮略圖">
</div>
<div class="caption">
<h3>縮略圖標(biāo)簽</h3>
<p>一些示例文本。一些示例文本。</p>
<p>
<a href="#" class="btn btn-primary" role="button">
按鈕
</a>
<a href="#" class="btn btn-default" role="button">
按鈕
</a>
</p>
</div>
警告
<div class="alert alert-success alert-dismissable"><!--alert-dismissable為可刪除警告--> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> × </button> 成功！很好地完成了提交。 </div> <div class="alert alert-info alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> × </button> <a href="#" class="alert-link">成功！很好地完成了提交。</a><!--警告中的標(biāo)簽--> </div> <div class="alert alert-warning alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> × </button> 警告！請(qǐng)不要提交。 </div> <div class="alert alert-danger alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> × </button> 錯(cuò)誤！請(qǐng)進(jìn)行一些更改。 </div>
進(jìn)度條
<!--一般進(jìn)度條--> <div class="progress progress-striped active"><!--progress-striped為加條紋,加active條紋會(huì)產(chǎn)生動(dòng)畫(huà)效果--> <!--progress-bar-info progress-bar-warning progress-bar-danger progress-bar-success 會(huì)給進(jìn)度條不同顏色，不加就是最基本的--> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"> <span class="sr-only">90% 完成（成功）</span> </div> </div> <!---堆疊的進(jìn)度條--> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"> <span class="sr-only">40% 完成</span> </div> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"> <span class="sr-only">30% 完成（信息）</span> </div> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"> <span class="sr-only">20% 完成（警告）</span> </div> </div>
媒體標(biāo)簽
.media：該 class 允許將媒體對(duì)象里的多媒體（圖像、視頻、音頻）浮動(dòng)到內(nèi)容區(qū)塊的左邊或者右邊。
.media-list：如果你需要一個(gè)列表，各項(xiàng)內(nèi)容是無(wú)序列表的一部分，可以使用該 class?？捎糜谠u(píng)論列表與文章列表。
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
alt="通用的占位符圖像">
</a>
<div class="media-body">
<h4 class="media-heading">媒體標(biāo)題</h4>
<p>這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。</p>
<!-- 嵌套的媒體對(duì)象 -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
alt="通用的占位符圖像">
</a>
<div class="media-body">
<h4 class="media-heading">嵌套的媒體標(biāo)題</h4>
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
<!-- 嵌套的媒體對(duì)象 -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
alt="通用的占位符圖像">
</a>
<div class="media-body">
<h4 class="media-heading">嵌套的媒體標(biāo)題</h4>
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
</div>
</div>
</div>
</div>
<!-- 嵌套的媒體對(duì)象 -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
alt="通用的占位符圖像">
</a>
<div class="media-body">
<h4 class="media-heading">嵌套的媒體標(biāo)題</h4>
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
</div>
</div>
</div>
</li>
<li class="media">
<a class="pull-right" href="#">
<img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
alt="通用的占位符圖像">
</a>
<div class="media-body">
<h4 class="media-heading">媒體標(biāo)題</h4>
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
這是一些示例文本。這是一些示例文本。
</div>
</li>
</ul>
列表組
<!--一般列表組--> <ul class="list-group"> <li class="list-group-item">免費(fèi)域名注冊(cè)</li> <li class="list-group-item"> <span class="badge">新</span> 24*7 支持 </li> <li class="list-group-item">每年更新成本</li> <li class="list-group-item"> <span class="badge">新</span> 折扣優(yōu)惠 </li> </ul> <!--自定義列表組--> <div class="list-group"> <a href="#" class="list-group-item active"> <h4 class="list-group-item-heading"> 入門(mén)網(wǎng)站包 </h4> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading"> 免費(fèi)域名注冊(cè) </h4> <p class="list-group-item-text"> 您將通過(guò)網(wǎng)頁(yè)進(jìn)行免費(fèi)域名注冊(cè)。 </p> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading"> 24*7 支持 </h4> <p class="list-group-item-text"> 我們提供 24*7 支持。 </p> </a> </div>
面板
<div class="panel panel-default"><!--可替代panel-default的類(lèi)：panel-primary，panel-success，panel-info，panel-warning，panel-danger--> <div class="panel-heading"> <h3 class="panel-title"> 帶有 title 的面板標(biāo)題 </h3> </div> <div class="panel-body"> 面板內(nèi)容 </div> <!---帶表格--> <table class="table"> <th>產(chǎn)品</th><th>價(jià)格 </th> <tr><td>產(chǎn)品 A</td><td>200</td></tr> <tr><td>產(chǎn)品 B</td><td>400</td></tr> </table> <!---帶列表組--> <ul class="list-group"> <li class="list-group-item">免費(fèi)域名注冊(cè)</li> <li class="list-group-item">免費(fèi) Window 空間托管</li> <li class="list-group-item">圖像的數(shù)量</li> <li class="list-group-item">24*7 支持</li> <li class="list-group-item">每年更新成本</li> </ul> <div class="panel-footer">面板腳注</div> </div>
well效果
Well 是一種會(huì)引起內(nèi)容凹陷顯示或插圖效果的容器 <div>
<div class="well well-lg">您好，我在大的 Well 中！</div> <div class="well well-sm">您好，我在小的 Well 中！</div>
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專(zhuān)題：Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
您可能感興趣的文章:
- BootStrap框架個(gè)人總結(jié)(bootstrap框架、導(dǎo)航條、下拉菜單、輪播廣告carousel、柵格系統(tǒng)布局、標(biāo)簽頁(yè)tabs、模態(tài)框、菜單定位)
- bootstrap學(xué)習(xí)使用（導(dǎo)航條、下拉菜單、輪播、柵格布局等）
- 精彩的Bootstrap案例分享 重點(diǎn)在注釋!(選項(xiàng)卡、柵格布局)
- Bootstrap布局之柵格系統(tǒng)詳解
- Bootstrap每天必學(xué)之柵格系統(tǒng)（布局）
- 談一談bootstrap響應(yīng)式布局
- Bootstrap布局方式詳解
- JS組件Bootstrap Table布局詳解
- Bootstrap三種表單布局的使用方法
- Bootstrap 布局組件（全）
- 全面解析bootstrap格子布局
- 詳解BootStrap中Affix控件的使用及保持布局的美觀的方法
- Bootstrap實(shí)現(xiàn)的經(jīng)典柵格布局效果實(shí)例【附demo源碼】
相關(guān)文章
微信小程序?qū)崿F(xiàn)紅包功能（后端PHP實(shí)現(xiàn)邏輯）
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)紅包功能，以及后端PHP實(shí)現(xiàn)邏輯，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
在javascript中，數(shù)組對(duì)象有一個(gè)有趣的方法sort，它接收一個(gè)類(lèi)型為函數(shù)的參數(shù)作為排序的依據(jù)。這意味著開(kāi)發(fā)者只需要關(guān)注如何比較兩個(gè)值的大小，而不用管排序這件事內(nèi)部是如何實(shí)現(xiàn)的2018-06-06
我寫(xiě)JavaScript代碼已經(jīng)很久了，都記不起是什么年代開(kāi)始的了。本文給大家分享javascript七大技巧(二)，對(duì)javascript技巧相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12
JavaScript?中的類(lèi)（Class）是一種新的語(yǔ)言特性，它讓我們可以使用面向?qū)ο缶幊痰乃枷雭?lái)更加方便地組織和管理代碼。在本文中，我們將詳細(xì)介紹?JavaScript?中的類(lèi)特性，感興趣的同學(xué)可以借鑒閱讀2023-05-05
這篇文章主要介紹了JavaScript如何獲取某年某月的最后一天，需要的朋友可以參考下2014-06-06
下面小編就為大家?guī)?lái)一篇js獲取瀏覽器高度 窗口高度 元素尺寸 偏移屬性的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
JavaScript基礎(chǔ)知識(shí)及常用方法總結(jié)
JAVASCRIPT是AJAX技術(shù)中不可或缺的一部分，所以想學(xué)好AJAX以及現(xiàn)在流行的AJAX框架，學(xué)好JAVASCRIPT是最重要的，通過(guò)本篇文章給大家介紹javascript基礎(chǔ)知識(shí)及常用方法總結(jié)，對(duì)js基礎(chǔ)知識(shí)及常用方法相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01
layer 刷新某個(gè)頁(yè)面的實(shí)現(xiàn)方法
今天小編就為大家分享一篇layer 刷新某個(gè)頁(yè)面的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
這篇文章主要介紹了兩種方法在前端實(shí)現(xiàn)本地表格導(dǎo)出功能,分別是插件方式和本地直接導(dǎo)出,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
Javascript獲取數(shù)組中的最大值和最小值的方法匯總
比較數(shù)組中數(shù)值的大小是比較常見(jiàn)的操作，下面同本文給大家分享四種放哪廣發(fā)獲取數(shù)組中最大值和最小值，對(duì)此感興趣的朋友一起學(xué)習(xí)吧2016-01-01