全面解析Bootstrap布局組件應(yīng)用

更新時間：2016年02月22日 14:59:50 投稿：lijiao

這篇文章主要為大家全面解析Bootstrap布局組件應(yīng)用，幾乎對所有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="#">選項1</a>
  </li>
  <li role="presentation">
   <a role="menuitem" tabindex="-1" href="#">選項2</a>
  </li>
  <li role="presentation"> 
   <a role="menuitem" tabindex="-1" href="#">選項3</a>
  </li>
  <li role="presentation" class="divider"></li><!--分割線-->
  <li role="presentation">
   <a role="menuitem" tabindex="-1" href="#">分離的鏈接</a>
  </li>
 </ul>
</div>

按鈕工具欄與按鈕組

<div class="btn-toolbar" role="toolbar"><!--用來嵌套btn-group-->
 <div class="btn-group btn-group-lg">
 <!--btn-group-lg用來控制按鈕組的大小,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"><!--加類.dropup可以變成按鈕上拉菜單-->
  <button type="button" class="btn btn-default dropdown-toggle" 
   data-toggle="dropdown"> <!-- 加類.btn-xs之類的東西改變按鈕大小-->
   默認(rèn) <span class="caret"></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>

表單中的輸入框組

<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)用于輸入框組請注意這里的類變?yōu)榱薸nput-group-btn，甚至可以加上前面的按鈕下拉菜單-->
    <button class="btn btn-default" type="button">
     Go!
    </button>
   </span>
  </div>
 </form>

導(dǎo)航（tab標(biāo)簽頁）

<p>標(biāo)簽式的導(dǎo)航菜單</p>
<ul class="nav nav-tabs"><!--加上類nav-justified可以讓導(dǎo)航兩端對齊-->
 <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會使導(dǎo)航欄隨頁面滾動嗎， .navbar-inverse實現(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可以實現(xiàn)向左和向右對齊-->
 </div>
</nav>

響應(yīng)式的導(dǎo)航欄

以下金黃色部分為對一般的導(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><!--下面有幾個選項這里就有幾個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>

分頁和翻頁

<!--以下所有示例都可以用disabled和active類來控制激活和禁用-->
<!--分頁-->
<ul class="pagination"><!--pagination-sm和pagination-lg來控制分頁的大小-->
 <li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>
<!--翻頁-->
<ul class="pager">
 <li><a href="#">Previous</a></li>
 <li><a href="#">Next</a></li>
</ul>
<!--翻頁-->
<ul class="pager">
 <li class="previous"><a href="#">&larr; Older</a></li>
 <li class="next"><a href="#">Newer &rarr;</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">危險標(biāo)簽</span>

徽章

徽章比標(biāo)簽更圓滑，主要用于突出顯示新的或未讀的項

<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
 <li class="active">
  <a href="#">
   <span class="badge pull-right">42</span>
   首頁
  </a>
 </li>
 <li><a href="#">簡介</a></li>
 <li>
  <a href="#">
   <span class="badge pull-right">3</span>
   消息
  </a>
 </li>
</ul>

超大屏幕

<div class="jumbotron">
 <div class="jumbotron">
  <h1>歡迎登陸頁面！</h1>
  <p>這是一個超大屏幕（Jumbotron）的實例。</p>
  <p><a class="btn btn-primary btn-lg" role="button">
   學(xué)習(xí)更多</a>
  </p>
 </div>
</div>
<!--翻過來jumbotron包著jumbotron就會得到一個不帶圓角且占更多寬度的超大屏幕-->

頁面標(biāo)題示例

<div class="page-header">
 <h1>頁面標(biāo)題實例
  <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">
  &times;
 </button>
 成功！很好地完成了提交。
</div>
<div class="alert alert-info alert-dismissable">
 <button type="button" class="close" data-dismiss="alert" 
  aria-hidden="true">
  &times;
 </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">
  &times;
 </button>
 警告！請不要提交。
</div>
<div class="alert alert-danger alert-dismissable">
 <button type="button" class="close" data-dismiss="alert" 
  aria-hidden="true">
  &times;
 </button>
 錯誤！請進(jìn)行一些更改。
</div>

進(jìn)度條

<!--一般進(jìn)度條-->
<div class="progress progress-striped active"><!--progress-striped為加條紋,加active條紋會產(chǎn)生動畫效果-->
 <!--progress-bar-info progress-bar-warning progress-bar-danger progress-bar-success 會給進(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 允許將媒體對象里的多媒體（圖像、視頻、音頻）浮動到內(nèi)容區(qū)塊的左邊或者右邊。
.media-list：如果你需要一個列表，各項內(nèi)容是無序列表的一部分，可以使用該 class?？捎糜谠u論列表與文章列表。

<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>
   <!-- 嵌套的媒體對象 -->
   <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 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>
   <!-- 嵌套的媒體對象 -->
   <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)域名注冊</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">
   入門網(wǎng)站包
  </h4>
 </a>
 <a href="#" class="list-group-item">
  <h4 class="list-group-item-heading">
   免費(fèi)域名注冊
  </h4>
  <p class="list-group-item-text">
   您將通過網(wǎng)頁進(jìn)行免費(fèi)域名注冊。
  </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的類：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>價格 </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)域名注冊</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 是一種會引起內(nèi)容凹陷顯示或插圖效果的容器 <div>

<div class="well well-lg">您好，我在大的 Well 中！</div>
<div class="well well-sm">您好，我在小的 Well 中！</div>

如果大家還想深入學(xué)習(xí)，可以點擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實戰(zhàn)教程

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

全面解析Bootstrap布局組件應(yīng)用

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具