溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2020-09-26 09:43:46 來源：腳本之家 閱讀：175 作者：諳憶 欄目：web開發(fā)

首先把模板代碼上上來:

<!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 用來支持HTML5 
  html5shiv.min.js-沒有那個元素，就創(chuàng)建那個元素
  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ǔ)入門</title>
 </head>
 <body >
  <div class="container" >
  </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(邊框圓角) 

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

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

輔助類樣式

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

背景顏色類：.bg-primary、.bg-success、.bg-info、.bg-warning、.bg-danger

三角符號：

快速浮動類：.pull-left(左浮動)、.pull-right(右浮動)

清除浮動：為父元素添加 .clearfix 可以清除浮動。

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

 <h3 class="page-header">清除浮動的應(yīng)用</h3>
   <div class="clearfix" >
    <ul class="list-unstyled">
     <li class="pull-left" >
      <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" >
      <div class="text-center">
       <a href=""><img src="img/002.png" /></a><br />
       <a href="">文字2</a>
      </div>
     </li>
     <li class="pull-left" >
      <div class="text-center">
       <a href=""><img src="img/003.png" /></a><br />
       <a href="">文字3</a>
      </div>
     </li>
     <li class="pull-left" >
      <div class="text-center">
       <a href=""><img src="img/004.png" /></a><br />
       <a href="">文字4</a>
      </div>
     </li>
    </ul>
   </div>

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

CSS組件

下拉菜單

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

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

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

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

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

.divider：為下拉菜單添加分隔線，用于將多個鏈接分組。

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

 <h3 class="page-header">下拉菜單的應(yīng)用</h3>
   <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>

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

按鈕組

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

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

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

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

<h3 class="page-header">按鈕組的應(yīng)用</h3>
   <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>

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

按鈕式下拉菜單         

<h3 class="page-header">按鈕式下拉菜單的應(yīng)用</h3>
   <div class="btn-group dropup">
    <button type="button" class="btn btn-danger" 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>
     <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>

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

在這里呢，如果我們下拉菜單很多，就可以用滾動條來解決！

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

輸入框組

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

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

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

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

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

<h3 class="page-header">輸入框組的應(yīng)用</h3>
   <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>

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

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

.nav是標(biāo)簽頁的基類

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

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

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

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

 <h3 class="page-header">選項(xiàng)卡效果</h3>
   <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>

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

路徑導(dǎo)航

.breadcrumb：賦給

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

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

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

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

分頁

.pagination賦給

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

&laquo; 上一頁

&raquo; 下一頁

.disabled禁用狀態(tài)

.active激活狀態(tài)

.pagination-lg分頁大尺寸

.pagination-sm分頁小尺寸

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

 <div class="text-center" >
    <ul class="pagination pagination-lg pager">
     <li class="previous">
      <a href="#">&larr; 上一頁</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="#">下一頁 &rarr;</a>
     </li>
    </ul>
   </div>
   <div class="text-center" >
    <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>

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

縮略圖

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

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

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

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

導(dǎo)航欄

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

.navbar：導(dǎo)航欄的基類，用于<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)航欄的樣式的基類。
.navbar-collapse是折疊導(dǎo)航欄樣式。
.nav是導(dǎo)航欄的鏈接基類。
.navbar-nav是導(dǎo)航欄的鏈接樣式。
.navbar-from：導(dǎo)航欄表單，可以使表單元素排在同一行。
.navbar-left 或 .navbar-right ：組件排列。導(dǎo)航鏈接、表單、按鈕或文本對齊。
.navbar-btn：對于不在<form>中的<button>元素，實(shí)現(xiàn)垂直對齊。
.navbar-text：對于導(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>元素。會隨著滾動條移動而消失。
.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" >
  ...
  </div>

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

好了，然后直接上完整的源碼:

完整的源碼鏈接:

https://github.com/chenhaoxiang/BootStrap/tree/master/day3

像學(xué)后臺的，把這個BootStrap學(xué)到這里，然后能靈活應(yīng)用基本就差不多啦~~~如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手