BootStrap 圖片樣式、輔助類(lèi)樣式和CSS組件的實(shí)例詳解

更新時(shí)間：2017年01月20日 10:19:23 作者：諳憶

這篇文章主要介紹了BootStrap 圖片樣式、輔助類(lèi)樣式和CSS組件的實(shí)現(xiàn)代碼，圖文并茂介紹的非常詳細(xì)，需要的朋友參考下吧

首先把模板代碼上上來(lái):

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
  <!--判斷IE9 用來(lái)支持HTML5 
  html5shiv.min.js-沒(méi)有那個(gè)元素，就創(chuàng)建那個(gè)元素
  respond.min.js支持響應(yīng)式布局的
  -->
  <!--[if lt IE 9]> 
  <script src="js/html5shiv.min.js"></script>
  <script src="js/respond.min.js"></script>
  <![endif]-->
  <title>BootStrap基礎(chǔ)入門(mén)</title>
 </head>
 <body style="background-color: #CCCCCC;">
  <div class="container" style="background-color: #FFFFFF;">
  </div>
  <script type="text/javascript" src="js/jquery.slim.min.js"></script>
  <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
 </body>
</html>

圖片樣式

.img-responsive：直接為圖片添加該樣式，可以實(shí)現(xiàn)響應(yīng)式圖片。

.center-block：圖片居中樣式，而不能使用text-center樣式。

圖片形狀樣式：.img-rounded(圓角圖片)、.img-circle(圓形圖片)、.img-thumbnail(邊框圓角)

<h2 class="page-header">圖片樣式應(yīng)用</h2>
   <div>
    <img class="img-responsive img-thumbnail center-block" src="img/011.jpg" />
    <p>文字文字文字文字文字文字文字文字文字文字文字文字</p>
   </div>

輔助類(lèi)樣式

文本顏色類(lèi)：.text-muted(柔和的)、.text-primary、.text-success、.text-info、.text-warning、.text-danger

背景顏色類(lèi)：.bg-primary、.bg-success、.bg-info、.bg-warning、.bg-danger

三角符號(hào)：

快速浮動(dòng)類(lèi)：.pull-left(左浮動(dòng))、.pull-right(右浮動(dòng))

清除浮動(dòng)：為父元素添加 .clearfix 可以清除浮動(dòng)。

讓內(nèi)容塊網(wǎng)頁(yè)居中：

 <h2 class="page-header">清除浮動(dòng)的應(yīng)用</h2>
   <div class="clearfix" style="border: 1px solid red;width: 340px;">
    <ul class="list-unstyled">
     <li class="pull-left" style="padding: 10px;">
      <div class="text-center">
       <a href=""><img src="img/001.png" /></a><br />
       <a href="">文字1</a>
       <span class="caret"></span>
      </div>
     </li>
     <li class="pull-left" style="padding: 10px;">
      <div class="text-center">
       <a href=""><img src="img/002.png" /></a><br />
       <a href="">文字2</a>
      </div>
     </li>
     <li class="pull-left" style="padding: 10px;">
      <div class="text-center">
       <a href=""><img src="img/003.png" /></a><br />
       <a href="">文字3</a>
      </div>
     </li>
     <li class="pull-left" style="padding: 10px;">
      <div class="text-center">
       <a href=""><img src="img/004.png" /></a><br />
       <a href="">文字4</a>
      </div>
     </li>
    </ul>
   </div>

CSS組件

下拉菜單

.dropdown將下拉菜單觸發(fā)器和下拉菜單包含在其中(下拉菜單父元素)。

data-toggle屬性：下拉菜單觸發(fā)器。取值為“dropdown”。

.dropdown-menu：給<ul>指定下拉菜單的樣式。

.dropup：向上彈出的下拉菜單(下拉菜單父元素)。

下拉菜單對(duì)齊方式：.dropdown-menu-left和.dropdown-menu-right

.divider：為下拉菜單添加分隔線(xiàn)，用于將多個(gè)鏈接分組。

.disabled：禁用的菜單項(xiàng)。

 <h2 class="page-header">下拉菜單的應(yīng)用</h2>
   <div class="dropdown">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
     Java課 
     <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
     <li>
      <a href="">HTML</a>
     </li>
     <li>
      <a href="">CSS</a>
     </li>
     <li>
      <a href="">Java</a>
     </li>
     <li class="divider"></li>
     <li>
      <a href="">Maven</a>
     </li>
     <li>
      <a href="">MySQL</a>
     </li>
     <li>
      <a href="">Spring</a>
     </li>
    </ul>
   </div>

按鈕組

.btn-group：按鈕組(可以實(shí)現(xiàn)將一組按鈕放在同一行)。

.btn-toolbar：按鈕組工具欄(將多個(gè)按鈕組放在其中)。

按鈕組的尺寸：.btn-group-lg、.btn-group-sm、.btn-group-xs

.btn-group-vertical：垂直排列的按鈕組。

<h2 class="page-header">按鈕組的應(yīng)用</h2>
   <div class="btn-toolbar">
    <div class="btn-group btn-group-lg ">
     <button type="button" class="btn btn-default">按鈕一</button>
     <button type="button" class="btn btn-default">按鈕二</button>
     <button type="button" class="btn btn-default">按鈕三</button>
     <button type="button" class="btn btn-default">按鈕四</button>
     <button type="button" class="btn btn-default">按鈕五</button>
    </div>
    <div class="btn-group">
     <button type="button" class="btn btn-danger">按鈕一</button>
     <button type="button" class="btn btn-danger">按鈕二</button>
    </div>
    <div class="btn-group btn-group-sm">
     <button type="button" class="btn btn-primary">按鈕一</button>
     <button type="button" class="btn btn-primary">按鈕二</button>
    </div>
    <div class="btn-group btn-group-xs btn-group-vertical">
     <button type="button" class="btn btn-success">按鈕一</button>
     <button type="button" class="btn btn-success">按鈕二</button>
     <button type="button" class="btn btn-success">按鈕三</button>
    </div>
   </div>

按鈕式下拉菜單

<h2 class="page-header">按鈕式下拉菜單的應(yīng)用</h2>
   <div class="btn-group dropup">
    <button type="button" class="btn btn-danger" data-toggle="dropdown">
     按鈕 
     <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" style="overflow: auto;height: 100px;">
     <li>
      <a href="">按鈕</a>
     </li>
     <li>
      <a href="">按鈕</a>
     </li>
     <li>
      <a href="">按鈕</a>
     </li>
     <li class="divider"></li>
     <li>
      <a href="">按鈕</a>
     </li>
     <li>
      <a href="">按鈕</a>
     </li>
     <li>
      <a href="">按鈕</a>
     </li>
     <li>
      <a href="">按鈕1</a>
     </li>
     <li>
      <a href="">按鈕1</a>
     </li>
     <li>
      <a href="">按鈕3</a>
     </li>
     <li>
      <a href="">按鈕2</a>
     </li>
    </ul>
    <button type="button" class="btn btn-danger">
     按鈕 
    </button>
   </div>
   <div class="btn-group dropup">
    <button type="button" class="btn btn-default">
     按鈕 
    </button>
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
     <span class="caret"></span>
    </button>
    <ul class="dropdown-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>

在這里呢，如果我們下拉菜單很多，就可以用滾動(dòng)條來(lái)解決！

用overflow: auto;，然后定義一個(gè)高度就好。

輸入框組

.input-group：只能用于文本框<input>，不能用于<select>和<textarea>。

.input-group-addon用于在<input>前后添加額外元素，賦給一個(gè)<span>元素即可。

注意：將.input-group-addon和<input>元素包在.input-group之中。

.input-group-lg 和 .input-group-sm 可以改變輸入框組的尺寸。

.input-group-btn可以作為額外元素的按鈕，應(yīng)該是作為<button>的父元素。

<h2 class="page-header">輸入框組的應(yīng)用</h2>
   <div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control" placeholder="username" />
    <span class="input-group-addon">.00</span>
   </div>
   <div class="input-group">
    <span class="input-group-btn">
     <button class="btn btn-default">Go!</button>
    </span>
    <input type="text" class="form-control" placeholder="username" />
   </div>
   <div class="input-group">
    <div class="input-group-btn">
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
     <ul class="dropdown-menu" role="menu">
      <li>
       <a href="#">Action</a>
      </li>
      <li>
       <a href="#">Another action</a>
      </li>
      <li>
       <a href="#">Something else here</a>
      </li>
      <li class="divider"></li>
      <li>
       <a href="#">Separated link</a>
      </li>
     </ul>
    </div>
    <!-- /btn-group -->
    <input type="text" class="form-control">
   </div>
   <!-- /input-group -->
   <div class="input-group">
    <div class="input-group-btn">
     <button type="button" class="btn btn-default">
     按鈕 
    </button>
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
     <span class="caret"></span>
    </button>
     <ul class="dropdown-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>
    <input type="text" class="form-control">
   </div>

標(biāo)簽頁(yè)(選項(xiàng)卡)

.nav是標(biāo)簽頁(yè)的基類(lèi)

.nav-tabs是標(biāo)簽頁(yè)類(lèi)樣式

.active是標(biāo)簽頁(yè)的狀態(tài)類(lèi)(當(dāng)前樣式)

.nav-pills膠囊式標(biāo)簽頁(yè)

.nav-stacked膠囊式標(biāo)簽頁(yè)堆放排列(垂直排列)

 <h2 class="page-header">選項(xiàng)卡效果</h2>
   <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
     <a href="#">Home</a>
    </li>
    <li role="presentation">
     <a href="#">Profile</a>
    </li>
    <li role="presentation">
     <a href="#">Messages</a>
    </li>
   </ul>
   <ul class="nav nav-pills" role="tablist">
    <li role="presentation" class="active">
     <a href="#">Home</a>
    </li>
    <li role="presentation">
     <a href="#">Profile</a>
    </li>
    <li role="presentation">
     <a href="#">Messages</a>
    </li>
   </ul>

路徑導(dǎo)航

.breadcrumb：賦給

可以實(shí)現(xiàn)面包屑效果。

.active賦給當(dāng)前欄目，當(dāng)前欄目不加鏈接。

 <h2 class="page-header">路徑導(dǎo)航效果</h2>
   <ol class="breadcrumb">
    <li>
     <a href="#">Home</a>
    </li>
    <li>
     <a href="#">Library</a>
    </li>
    <li class="active">Data</li>
   </ol>

分頁(yè)

.pagination賦給

元素可以實(shí)現(xiàn)分頁(yè)效果

« 上一頁(yè)

» 下一頁(yè)

.disabled禁用狀態(tài)

.active激活狀態(tài)

.pagination-lg分頁(yè)大尺寸

.pagination-sm分頁(yè)小尺寸

.pager可以實(shí)現(xiàn)翻頁(yè)效果。上一頁(yè)、下一頁(yè)效果。

 <div class="text-center" style="border: 1px solid red;">
    <ul class="pagination pagination-lg pager">
     <li class="previous">
      <a href="#">&larr; 上一頁(yè)</a>
     </li>
     <li class="disabled">
      <a href="">&laquo;</a>
     </li>
     <li class="active">
      <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="">6</a>
     </li>
     <li>
      <a href="">7</a>
     </li>
     <li>
      <a href="">8</a>
     </li>
     <li>
      <a href="">9</a>
     </li>
     <li>
      <a href="">10</a>
     </li>
     <li>
      <a href="">&raquo;</a>
     </li>
     <li class="next">
      <a href="#">下一頁(yè) &rarr;</a>
     </li>
    </ul>
   </div>
   <div class="text-center" style="border: 1px solid red;">
    <ul class="pagination pagination-lg">
     <li>
      <a href="">&laquo;</a>
     </li>
     <li class="active">
      <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="">6</a>
     </li>
     <li>
      <a href="">7</a>
     </li>
     <li>
      <a href="">8</a>
     </li>
     <li>
      <a href="">9</a>
     </li>
     <li>
      <a href="">10</a>
     </li>
     <li>
      <a href="">&raquo;</a>
     </li>
    </ul>
   </div>

縮略圖

.thumbnail賦給<a>元素，可以實(shí)現(xiàn)縮略圖樣式。

.caption 可以實(shí)現(xiàn)縮略圖標(biāo)題及描述

 <h2 class="page-header">縮略圖效果</h2>
   <div class="row">
    <div class="col-md-2">
     <a href="" class="thumbnail"><img src="img/001.png" /></a>
     <div class="caption">
      <h4>圖片一</h4>
     </div>
    </div>
    <div class="col-md-4">
     <a href="" class="thumbnail"><img src="img/001.png" /></a>
     <div class="caption">
      <h4>圖片一</h4>
     </div>
    </div>
    <div class="col-md-6">
     <a href="" class="thumbnail"><img src="img/001.png" /></a>
     <div class="caption">
      <h4>圖片一</h4>
     </div>
    </div>
   </div>

導(dǎo)航欄

導(dǎo)航欄有一個(gè)不同，他不是寫(xiě)在Container包含層里面了，而是那個(gè)div的上面！

.navbar：導(dǎo)航欄的基類(lèi)，用于<nav>元素。
.navbar-default：導(dǎo)航欄默認(rèn)樣式，用于<nav>元素。
.container是<nav>的子元素。導(dǎo)航欄內(nèi)容都放入其中。
.navbar-header：導(dǎo)航欄頭部樣式。
.navbar-brand：設(shè)置品牌圖標(biāo)樣式
.collapse是折疊導(dǎo)航欄的樣式的基類(lèi)。
.navbar-collapse是折疊導(dǎo)航欄樣式。
.nav是導(dǎo)航欄的鏈接基類(lèi)。
.navbar-nav是導(dǎo)航欄的鏈接樣式。
.navbar-from：導(dǎo)航欄表單，可以使表單元素排在同一行。
.navbar-left 或 .navbar-right ：組件排列。導(dǎo)航鏈接、表單、按鈕或文本對(duì)齊。
.navbar-btn：對(duì)于不在<form>中的<button>元素，實(shí)現(xiàn)垂直對(duì)齊。
.navbar-text：對(duì)于導(dǎo)航欄的普通文本有了行距和顏色，通常用于<p>元素。
.navbar-fixed-top：導(dǎo)航欄固定在頂部，用于<nav>元素。需要為<body>設(shè)置padding-top:70px
.navbar-fixed-bottom：導(dǎo)航欄固定在底部，用于<nav>元素。需要為<body>設(shè)置padding-bottom:70px;
.navbar-static-top：導(dǎo)航欄靜止在頂部，用于<nav>元素。會(huì)隨著滾動(dòng)條移動(dòng)而消失。
.navbar-inverse：可以實(shí)現(xiàn)反色導(dǎo)航欄，用于<nav>元素。

<nav class="navbar navbar-default navbar-static-top">
   <!--導(dǎo)航欄頭部信息-->
   <div class="container">
    <!--品牌信息-->
    <div class="navbar-header">
     <a class="navbar-brand" href="">Brand</a>
     <p class="navbar-text">歡迎光臨</p>
    </div>
    <!--導(dǎo)航欄主鏈接-->
    <div class="collapse navbar-collapse">
     <ul class="nav navbar-nav navbar-left">
      <li class="active">
       <a href="">起步</a>
      </li>
      <li>
       <a href="">CSS全局樣式</a>
      </li>
      <li>
       <a href="">組件</a>
      </li>
      <li>
       <a href="">插件</a>
      </li>
      <li>
       <a href="">網(wǎng)站案例</a>
      </li>
     </ul>
     <!--表單 搜索框-->
     <form class="navbar-form navbar-left">
      <div class="form-group">
       <input type="text" class="form-control" placeholder="搜索">
      </div>
      <button type="submit" class="btn btn-default">搜索</button>
     </form>
     <ul class="nav navbar-nav navbar-right">
      <li>
       <a href="">Link</a>
      </li>
      <li class="dropdown">
       <a href="" class="dropdown-toggle" data-toggle="dropdown">
        Dropdown 
        <span class="caret"></span>
       </a>
       <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 class="divider"></li>
        <li>
         <a href="#">Separated link</a>
        </li>
       </ul>
      </li>
     </ul>
    </div>
   </div>
  </nav>
  <div class="container" style="background-color: #FFFFFF;">
  ...
  </div>