首先把模板代碼上上來(lái):
創(chuàng)新互聯(lián)2013年開(kāi)創(chuàng)至今,是專(zhuān)業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站網(wǎng)站策劃,項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命,1280元?jiǎng)偛熳鼍W(wǎng)站,已為上家服務(wù),為剛察各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220
<!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 > <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>
輔助類(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è)居中:
<h3 class="page-header">清除浮動(dòng)的應(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>
CSS組件
下拉菜單
.dropdown將下拉菜單觸發(fā)器和下拉菜單包含在其中(下拉菜單父元素)。
data-toggle屬性:下拉菜單觸發(fā)器。取值為“dropdown”。
.dropdown-menu:給<ul>指定下拉菜單的樣式。
.dropup:向上彈出的下拉菜單(下拉菜單父元素)。
下拉菜單對(duì)齊方式:.dropdown-menu-left和.dropdown-menu-right
.divider:為下拉菜單添加分隔線,用于將多個(gè)鏈接分組。
.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>
按鈕組
.btn-group:按鈕組(可以實(shí)現(xiàn)將一組按鈕放在同一行)。
.btn-toolbar:按鈕組工具欄(將多個(gè)按鈕組放在其中)。
按鈕組的尺寸:.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>
按鈕式下拉菜單
<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>
在這里呢,如果我們下拉菜單很多,就可以用滾動(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>的父元素。
<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>
標(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è)堆放排列(垂直排列)
<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>
路徑導(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>
分頁(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" > <ul class="pagination pagination-lg pager"> <li class="previous"> <a href="#">← 上一頁(yè)</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="#">下一頁(yè) →</a> </li> </ul> </div> <div class="text-center" > <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>元素,可以實(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>
導(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" > ... </div>
好了,然后直接上完整的源碼:
完整的源碼鏈接:
https://github.com/chenhaoxiang/BootStrap/tree/master/day3
像學(xué)后臺(tái)的,把這個(gè)BootStrap學(xué)到這里,然后能靈活應(yīng)用基本就差不多啦~~~如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持!
網(wǎng)站標(biāo)題:BootStrap圖片樣式、輔助類(lèi)樣式和CSS組件的實(shí)例詳解
轉(zhuǎn)載來(lái)源:http://muchs.cn/article22/ihsicc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站維護(hù)、自適應(yīng)網(wǎng)站、ChatGPT、動(dòng)態(tài)網(wǎng)站、虛擬主機(jī)、品牌網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容