BootStrap 圖片樣式、輔助類樣式和CSS組件的實例詳解
首先把模板代碼上上來:
<!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支持響應式布局的 --> <!--[if lt IE 9]> <script src="js/html5shiv.min.js"></script> <script src="js/respond.min.js"></script> <![endif]--> <title>BootStrap基礎入門</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：直接為圖片添加該樣式，可以實現(xiàn)響應式圖片。
.center-block：圖片居中樣式，而不能使用text-center樣式。
圖片形狀樣式：.img-rounded(圓角圖片)、.img-circle(圓形圖片)、.img-thumbnail(邊框圓角)
<h2 class="page-header">圖片樣式應用</h2>
<div>
<img class="img-responsive img-thumbnail center-block" src="img/011.jpg" />
<p>文字文字文字文字文字文字文字文字文字文字文字文字</p>
</div>
輔助類樣式
文本顏色類：.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)頁居中：
<h2 class="page-header">清除浮動的應用</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：向上彈出的下拉菜單(下拉菜單父元素)。
下拉菜單對齊方式：.dropdown-menu-left和.dropdown-menu-right
.divider：為下拉菜單添加分隔線，用于將多個鏈接分組。
.disabled：禁用的菜單項。
<h2 class="page-header">下拉菜單的應用</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：按鈕組(可以實現(xiàn)將一組按鈕放在同一行)。
.btn-toolbar：按鈕組工具欄(將多個按鈕組放在其中)。
按鈕組的尺寸：.btn-group-lg、.btn-group-sm、.btn-group-xs
.btn-group-vertical：垂直排列的按鈕組。
<h2 class="page-header">按鈕組的應用</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">按鈕式下拉菜單的應用</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>
在這里呢，如果我們下拉菜單很多，就可以用滾動條來解決！
用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可以作為額外元素的按鈕，應該是作為<button>的父元素。
<h2 class="page-header">輸入框組的應用</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>
標簽頁(選項卡)
.nav是標簽頁的基類
.nav-tabs是標簽頁類樣式
.active是標簽頁的狀態(tài)類(當前樣式)
.nav-pills膠囊式標簽頁
.nav-stacked膠囊式標簽頁堆放排列(垂直排列)
<h2 class="page-header">選項卡效果</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>
路徑導航
.breadcrumb：賦給
可以實現(xiàn)面包屑效果。
.active賦給當前欄目，當前欄目不加鏈接。
<h2 class="page-header">路徑導航效果</h2>
<ol class="breadcrumb">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Library</a>
</li>
<li class="active">Data</li>
</ol>
分頁
.pagination賦給
元素可以實現(xiàn)分頁效果
« 上一頁
» 下一頁
.disabled禁用狀態(tài)
.active激活狀態(tài)
.pagination-lg分頁大尺寸
.pagination-sm分頁小尺寸
.pager可以實現(xiàn)翻頁效果。上一頁、下一頁效果。
<div class="text-center" style="border: 1px solid red;">
<ul class="pagination pagination-lg pager">
<li class="previous">
<a href="#">← 上一頁</a>
</li>
<li class="disabled">
<a href="">«</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="">»</a>
</li>
<li class="next">
<a href="#">下一頁 →</a>
</li>
</ul>
</div>
<div class="text-center" style="border: 1px solid red;">
<ul class="pagination pagination-lg">
<li>
<a href="">«</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="">»</a>
</li>
</ul>
</div>
縮略圖
.thumbnail賦給<a>元素，可以實現(xiàn)縮略圖樣式。
.caption 可以實現(xiàn)縮略圖標題及描述
<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>
導航欄
導航欄有一個不同，他不是寫在Container包含層里面了，而是那個div的上面！
.navbar：導航欄的基類，用于<nav>元素。
.navbar-default：導航欄默認樣式，用于<nav>元素。
.container是<nav>的子元素。導航欄內(nèi)容都放入其中。
.navbar-header：導航欄頭部樣式。
.navbar-brand：設置品牌圖標樣式
.collapse是折疊導航欄的樣式的基類。
.navbar-collapse是折疊導航欄樣式。
.nav是導航欄的鏈接基類。
.navbar-nav是導航欄的鏈接樣式。
.navbar-from：導航欄表單，可以使表單元素排在同一行。
.navbar-left 或 .navbar-right ：組件排列。導航鏈接、表單、按鈕或文本對齊。
.navbar-btn：對于不在<form>中的<button>元素，實現(xiàn)垂直對齊。
.navbar-text：對于導航欄的普通文本有了行距和顏色，通常用于<p>元素。
.navbar-fixed-top：導航欄固定在頂部，用于<nav>元素。需要為<body>設置padding-top:70px
.navbar-fixed-bottom：導航欄固定在底部，用于<nav>元素。需要為<body>設置padding-bottom:70px;
.navbar-static-top：導航欄靜止在頂部，用于<nav>元素。會隨著滾動條移動而消失。
.navbar-inverse：可以實現(xiàn)反色導航欄，用于<nav>元素。
<nav class="navbar navbar-default navbar-static-top">
<!--導航欄頭部信息-->
<div class="container">
<!--品牌信息-->
<div class="navbar-header">
<a class="navbar-brand" href="">Brand</a>
<p class="navbar-text">歡迎光臨</p>
</div>
<!--導航欄主鏈接-->
<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>
好了，然后直接上完整的源碼:
完整的源碼鏈接:
https://github.com/chenhaoxiang/BootStrap/tree/master/day3
像學后臺的，把這個BootStrap學到這里，然后能靈活應用基本就差不多啦~~~如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
解決JS請求路徑控制臺報錯?Failed?to?launch'xxx'?because?t
這篇文章主要介紹了JS請求路徑控制臺報錯?Failed?to?launch?‘xxx‘?because?the?scheme?does?not?have?a?registered?handler的問題,本文給大家分享最新完美解決方法，需要的朋友可以參考下2023-03-03
JS中利用FileReader實現(xiàn)上傳圖片前本地預覽功能
FileReader 對象允許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容,使用 File 或 Blob 對象指定要讀取的文件或數(shù)據(jù)。下面通過本文給大家介紹JS中利用FileReader實現(xiàn)上傳圖片前本地預覽功能，需要的朋友參考下2018-03-03
js時間日期和毫秒的相互轉(zhuǎn)換，需要的朋友可以參考一下2013-02-02
變量作用域是每門編程語言都會涉及的話題，也是作為一名程序員必需掌握的知識點，能深入掌握變量作用域更有助于你編寫穩(wěn)定的程序。2009-10-10
Wordpress ThickBox 添加“查看原圖”效果代碼
上一次修改了點擊圖片動作 ， 這次添加一個“查看原圖”的鏈接，點擊后將在一個新瀏覽器窗口(或Tab)打開該圖片的原始鏈接地址。2010-12-12
JavaScript實現(xiàn)郵箱地址自動匹配功能代碼
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)E-mail郵箱地址自動匹配功能代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了js讀取并解析JSON類型數(shù)據(jù)的方法,具體分析了json格式的功能、用途與JS解析技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了JavaScript新增樣式規(guī)則(推薦)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
中秋博餅習俗源于福建廈門，盛行于漳州的龍海、泉州的安海和金門縣等地。博餅的游戲規(guī)則簡單公平，既充滿競爭懸念，又富于生活情趣，本文將用JavaScript實現(xiàn)這一經(jīng)典游戲，感興趣的可以了解一下2022-09-09
這篇文章主要介紹了DWR3 訪問WEB元素的兩種方法實例詳解的相關(guān)資料,需要的朋友可以參考下2017-01-01