版權(quán)說(shuō)明:本文檔由用戶(hù)提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
Bootstrap學(xué)習(xí)筆記Bootstrap使用的某些HTML元素和CSS屬性需要文檔類(lèi)型為HTML5的文件類(lèi)型。因此這一文檔類(lèi)型必須出現(xiàn)在項(xiàng)目的每個(gè)頁(yè)面的開(kāi)始部分<!DOCTYPEhtml><htmllang="en">...</html>HTML中定義的所有標(biāo)題標(biāo)簽,從<h1>到<h6>都是可用的。Bootstrap定義的全局font-size是14px,line-height是20px。這些樣式應(yīng)用到了<body>和所有的段落上。另外,對(duì)<p>(段落)還定義了1/2行高(默認(rèn)為10px)的底部外邊距(margin)屬性。在使用Bootstrap之前必須要將bootstrap.css或者bootstrap.min.css(壓縮版)引入到頁(yè)面中,它定義了Bootstrap的基本樣式。如果需要使用Bootstrap提供的組件,要將bootstrap.js或者bootstrap.min.js(壓縮版)引入到頁(yè)面中。因?yàn)閎ootstrap的JS插件需要Jquery的支持,所有在引入bootstrap.js之前必須將Jquery.js也引入到頁(yè)面上。另外如果你希望你的頁(yè)面支持響應(yīng)式布局,必須引入bootstrap-responsive.css或者bootstrap-responsive.min.css(壓縮版),它主要提供頁(yè)面在移動(dòng)設(shè)備上的顯示樣式支持,需要注意的是bootstrap-responsive.css必須放置在bootstrap.css之后,否則便不具有響應(yīng)式布局功能。當(dāng)然在Bootstrap3的版本中,bootstrap.css和bootstrap-responsive.css已經(jīng)合并了。代碼樣式Bootstrap提供了代碼樣式,用于在頁(yè)面上展示代碼,以此來(lái)區(qū)分于正文的區(qū)別,如果是行內(nèi)嵌套代碼,可以用<code>標(biāo)簽,但是對(duì)于代碼中的符號(hào)要進(jìn)行轉(zhuǎn)換(<是<、>是>)例如:<!--正文中內(nèi)嵌代碼塊--><p>Forexample,<code><section></code>shouldbewrappedasinline.</p>如果是代碼塊可以用<pre>標(biāo)簽,同樣的,代碼中的要將代碼中的尖括號(hào)做轉(zhuǎn)換。例如:<!--.pre-scrollable,其作用是設(shè)置max-height為350px,并在垂直方向展示滾動(dòng)條--><preclass="pre-scrollable"><p>Sampletexthere...</p><pclass="text-muted">...</p><pclass="text-primary">...</p><pclass="text-success">...</p><pclass="text-info">...</p><pclass="text-warning">...</p><pclass="text-danger">...</p></pre>表格基本的表格樣式可以用<table>標(biāo)簽。例如:<h4>正常表格</h4><!--利用.table-bordered為表格和其中的每個(gè)單元格增加邊框 利用.table-striped可以給<tbody>之內(nèi)的每一樣增加斑馬條紋樣式 利用.table-hover可以讓<tbody>中的每一行響應(yīng)鼠標(biāo)懸停狀態(tài)--><tableclass="tabletable-stripedtable-borderedtable-hover"><tr><th>FirstName</th><th>LastName</th> <th>Username</th></tr><tr><td>Mark</td><td>Otto</td> <td>@mdo</td></tr><tr><td>Jacob</td><td>Thornton</td> <td>@fat</td></tr></table>如果想讓表格的內(nèi)容更緊湊一點(diǎn)可以為表格添加.table-condensed類(lèi),如果想為表格添加顏色可以選擇情景類(lèi),情景類(lèi)有:.success表示成功或積極的行為。.error表示一個(gè)危險(xiǎn)或存有潛在危險(xiǎn)的行為。.warning表示警告,可能需要注意。.info作為一個(gè)默認(rèn)樣式的一個(gè)替代樣式。<divclass="controls"><labelclass="checkbox"><inputtype="checkbox">Rememberme</label><buttontype="submit"class="btn">Signin</button></div></div></form>按鈕任何賦予.btn類(lèi)的頁(yè)面元素都會(huì)顯示按鈕樣式。不過(guò),通常是用于更好的表現(xiàn)<a>和<button>頁(yè)面元素。按鈕class=""描述默認(rèn)btn帶漸變的標(biāo)準(zhǔn)灰色按鈕主要btnbtn-primary提供額外的視覺(jué)感,可在一系列的按鈕中指出主要操作信息btnbtn-info默認(rèn)樣式的替代樣式成功btnbtn-success表示成功或積極的動(dòng)作警告btnbtn-warning提醒應(yīng)該謹(jǐn)慎采取這個(gè)動(dòng)作危險(xiǎn)btnbtn-danger表示這個(gè)動(dòng)作危險(xiǎn)或存在危險(xiǎn)反向btnbtn-inverse備用的暗灰色按鈕,不依賴(lài)于語(yǔ)義和用途鏈接btnbtn-link簡(jiǎn)化一個(gè)按鈕,使它看起來(lái)像一個(gè)鏈接,同時(shí)保持按鈕的行為如果想更改按鈕的大小,可以在class類(lèi)中添加.btn-large、.btn-small或.btn-mini即可改變按鈕大小,通過(guò)由Glyphicons提供圖片,可以給每個(gè)按鈕設(shè)置一個(gè)小圖標(biāo),使用時(shí),每個(gè)圖標(biāo)都需要依附于一個(gè)<i>標(biāo)簽,并且賦予一個(gè)唯一的類(lèi)(class),默認(rèn)是深灰色,也可以使用反色(白色)樣式的圖標(biāo),只需增加一個(gè)額外的類(lèi).icon-white。例如:<!--.btn-primary可以將按鈕的顏色變藍(lán),.btn-large可以設(shè)置按鈕的大小,對(duì)應(yīng)的還有.btn-small.btn-mini要想給按鈕加上小圖標(biāo)可以使用<i>標(biāo)簽--><divstyle="margin-bottom:15px"><aclass="btnbtn-primarybtn-large"href=""><iclass="icon-commenticon-white"></i>查看評(píng)論</a></div><divstyle="margin-bottom:15px"><buttonclass="btn"type="submit"><iclass="icon-shopping-cart"></i>結(jié)賬</a></div><divstyle="margin-bottom:15px"><inputclass="btn"type="button"value="設(shè)置"></div><!--通過(guò)給按鈕添加.btn-block可以使其充滿(mǎn)父節(jié)點(diǎn)100%的寬度,而且按鈕也變?yōu)榱藟K級(jí)(block)元素--><buttontype="button"class="btnbtn-primarybtn-lgbtn-block"disabled="disabled">Blocklevelbutton</button><buttontype="button"class="btnbtn-defaultbtn-lgbtn-block">Blocklevelbutton</button>下拉菜單按鈕下拉菜單的觸發(fā)器和整個(gè)下拉菜單都需要包裹在.dropdown中,或者聲明為position:relative;的其它頁(yè)面元素中。向.dropdown-menu添加.pull-right即可右對(duì)齊下拉菜單。向<li>添加.disabled即可禁用菜單中的某個(gè)鏈接,在現(xiàn)有的下拉菜單中,給任意的li添加.dropdown-submenu即可自動(dòng)賦予一個(gè)二級(jí)菜單,這個(gè)二級(jí)菜單會(huì)在鼠標(biāo)懸停時(shí)自動(dòng)展現(xiàn)。例如:<divclass="dropdown"><!--data-toggle="dropdown"表示觸發(fā)下拉事件--><buttonclass="btndropdown-toggle"data-toggle="dropdown">Dropdown<spanclass="caret"></span></button><!--添加下拉列表--><ulclass="dropdown-menu"role="menu"aria-labelledby="dropdownMenu"><li><atabindex="-1"href="#">Action</a></li><li><atabindex="-1"href="#">Anotheraction</a></li><li><atabindex="-1"href="#">Somethingelsehere</a></li><liclass="divider"></li><li><atabindex="-1"href="#">Separatedlink</a></li> <!--添加二級(jí)子菜單--> <liclass="dropdown-submenu"><atabindex="-1"href="#">Moreoptions</a><ulclass="dropdown-menu"><li><atabindex="-1"href="#">Anotheraction</a></li><li><atabindex="-1"href="#">Somethingelsehere</a></li></ul></li></ul></div>按鈕組將帶有.btn類(lèi)的一系列按鈕包裹在.btn-group中,即可創(chuàng)建一個(gè)按鈕組。例如:<divclass="btn-group"><buttonclass="btn">Left</button><buttonclass="btn">Middle</button><buttonclass="btn">Right</button></div>如果想創(chuàng)建一個(gè)將多個(gè)多維按鈕組只要將<divclass="btn-group">放入<divclass="btn-toolbar">中即可獲得更多復(fù)雜的組件,如果想讓一組按鈕呈現(xiàn)出垂直方向堆疊的樣式,只需要在.btn-group的后面添加.btn-group-vertical類(lèi)即可。分裂式按鈕下拉菜單在按鈕組的基礎(chǔ)上,我們可以很容易的創(chuàng)建分裂式按鈕。分裂式按鈕左側(cè)是一個(gè)標(biāo)準(zhǔn)形式的按鈕,右側(cè)是一個(gè)可觸發(fā)下拉菜單的鏈接。例如:<divclass="btn-group"><!--為了保證URL符合規(guī)范,請(qǐng)使用data-target屬性來(lái)代替href="#"。--><aclass="btndropdown-toggle"data-toggle="dropdown"data-target="#"href="/page.html">動(dòng)作 <!--在按鈕的后面創(chuàng)建一個(gè)箭頭--><spanclass="caret"></span></a><ulclass="dropdown-menu"><li><atabindex="-1"href="#">Action</a></li><li><atabindex="-1"href="#">Anotheraction</a></li></ul></div><!--dropup表示創(chuàng)建一個(gè)向上彈出的菜單樣式--><divclass="btn-groupdropup"><buttonclass="btn">動(dòng)作</button><!--data-toggle="dropdown"主要是給按鈕綁定下拉菜單的點(diǎn)擊彈出事件--><buttonclass="btndropdown-toggle"data-toggle="dropdown"><!--在按鈕的后面創(chuàng)建一個(gè)箭頭--><spanclass="caret"></span></button><!--創(chuàng)建下拉子菜單用.dropdown-menu定義--><ulclass="dropdown-menu"><li><atabindex="-1"href="#">Action</a></li><li><atabindex="-1"href="#">Anotheraction</a></li></ul></div>鏈接或按鈕上的data-toggle="dropdown"即表示激活下拉菜單,當(dāng)然你也可以通過(guò)JS的方式來(lái)觸發(fā)下拉事件,例如:<script>//對(duì)所有的class="dropdown-toggle"按鈕或是鏈接定義下拉事件$('.dropdown-toggle').dropdown()//對(duì)ID=Mybtn的按鈕或是鏈接定義下拉事件$('#Mybtn').dropdown()</script>注:如果dropdown()帶上參數(shù)名為toggle的參數(shù)(dropdown('toggle')),即表示根據(jù)當(dāng)前下拉菜單的狀態(tài)來(lái)響應(yīng)事件,如果下拉菜單是隱藏的即顯示出來(lái),如果是顯示的即隱藏起來(lái)。選項(xiàng)卡基于<ul>并添加.nav-tabs或者是.nav-pills類(lèi)即可創(chuàng)建一個(gè)選項(xiàng)卡,為任一導(dǎo)航組件(標(biāo)簽頁(yè)、pills或列表)添加.disabled類(lèi),均可讓鏈接變灰并失去鼠標(biāo)懸停效果。但是鏈接仍然是可以點(diǎn)擊的,除非你將鏈接的href屬性去除,你還可以寫(xiě)JavaScript代碼阻止用戶(hù)點(diǎn)擊鏈接。例如:<!--設(shè)置選項(xiàng)卡的展示樣式:.nav-tabs.nav-pills如果想創(chuàng)建堆疊式的排列,可以在nav-tabs(nav-pills)的后面添加nav-stacked--><ulclass="navnav-tabs"><!--class="active"表示默認(rèn)激活第一個(gè)選項(xiàng)卡--><liclass="active"><ahref="#tab1"data-toggle="tab">選項(xiàng)一</a></li><li><ahref="#tab2"data-toggle="tab">選項(xiàng)二</a></li><li><ahref="#tab3"data-toggle="tab">選項(xiàng)三</a></li></ul><divclass="tab-content"><divclass="tab-paneactive"id="tab1"><p>選項(xiàng)一的內(nèi)容</p></div><divclass="tab-pane"id="tab2"><p>選項(xiàng)二的內(nèi)容</p></div><divclass="tab-pane"id="tab3"><p>選項(xiàng)三的內(nèi)容</p></div></div>導(dǎo)航條在頁(yè)面上添加導(dǎo)航條組件可以用.navbar類(lèi)來(lái)定義,然后用.navbar-inner類(lèi)將導(dǎo)航中的條目裝載在一起,導(dǎo)航條中條目可以是無(wú)序列表,將導(dǎo)航條放入.container中就可以限制其寬度.如果想在導(dǎo)航條目中添加分隔符,只需增加一個(gè)空白的條目并為其設(shè)置一個(gè)類(lèi)即可,如果想要在導(dǎo)航中添加一個(gè)表單,需要包含在.navbar-form類(lèi)中,如果是搜索表單可以定義為.navbar-search。例如:<divclass="navbar"><divclass="navbar-inner"><!--定義導(dǎo)航的Title--><aclass="brand"href="#">Title</a><ulclass="nav"><liclass="active"><ahref="#">首頁(yè)</a></li><li><ahref="#">Link1</a></li><li><ahref="#">Link2</a></li> <li><ahref="#">Link3</a></li> <!--添加分隔符--> <liclass="divider-vertical"></li><li><ahref="#">Link4</a></li> <li><ahref="#">Link5</a></li> <!--在導(dǎo)航中添加一個(gè)普通表單 <formclass="navbar-formpull-right"><inputtype="text"class="span2"><buttontype="submit"class="btn">Submit</button></form> --><!--在導(dǎo)航中添加一個(gè)搜索表單--> <formclass="navbar-searchpull-right"> <!--為輸入框添加.search-query即可獲得一個(gè)搜索表單--><inputtype="text"class="search-query"placeholder="Search"></form></ul></div></div>如果想在導(dǎo)航條目中加入下拉菜單,只需要在導(dǎo)航條目<li>的后面加上:<!--添加一個(gè)下拉菜單--> <ulclass="nav"><liclass="dropdown"><ahref="#"class="dropdown-toggle"data-toggle="dropdown">Account<bclass="caret"></b></a><ulclass="dropdown-menu"><li><atabindex="-1"href="#">Action</a></li><li><atabindex="-1"href="#">Anotheraction</a></li></ul></li></ul>面包屑面包屑組件可以用.breadcrumb類(lèi)來(lái)定義,在頁(yè)面上可以用于位置(路徑)提示。例如:<ulclass="breadcrumb"><li><ahref="#">首頁(yè)</a><spanclass="divider">/</span></li><li><ahref="#">Library</a><spanclass="divider">/</span></li><liclass="active">Data</li></ul>分頁(yè)分頁(yè)用.pagination類(lèi)來(lái)定義,定義如下:<!--.pagination-centered(中間).pagination-rigth(右邊)--><divclass="paginationpagination-centered"> <ul> <li><ahref="#">«</a></li> <li><ahref="#">1</a></li> <liclass="active"><ahref="#">2</a></li> <li><ahref="#">3</a></li> <li><ahref="#">4</a></li> <li><ahref="#">5</a></li> <li><ahref="#">Next</a></li> </ul> </div>可根據(jù)不同情況定制鏈接。用.disabled標(biāo)明鏈接不可點(diǎn)擊,用.active標(biāo)明當(dāng)前頁(yè)。<divclass="pagination"><ul><liclass="disabled"><ahref="#">«</a></li><liclass="active"><ahref="#">1</a></li>...</ul></div>你還可以使用span標(biāo)簽替代a標(biāo)簽,這樣就去除了點(diǎn)擊功能,同時(shí)又能保留需要的樣式。<divclass="pagination"><ul><liclass="disabled"><span>«</span></li><liclass="active"><span>1</span></li>...</ul></div>如果需要更改分頁(yè)器的大小,在class="pagination”里面添加.pagination-large、.pagination-small或.pagination-mini就可以改變分頁(yè)尺寸。如果需要定義“上一頁(yè)”“下一頁(yè)”的翻頁(yè)樣式”可以用.page類(lèi):<ulclass="pager"> <li><ahref="#">前一頁(yè)</a></li> <li><ahref="#">后一頁(yè)</a></li> </ul> <!--將鏈接放頁(yè)面兩側(cè)--> <ulclass="pager"> <liclass="previous"><ahref="#">前一頁(yè)</a></li> <liclass="next"><ahref="#">后一頁(yè)</a></li> </ul>分頁(yè)也可使用.disabled工具類(lèi)讓鏈接處于禁用狀態(tài),添加在<li>的calss屬性里面提示框提示框用.alert定義。例如:<divclass="alertalert-info"id="Myalert"> <!--用<a>標(biāo)簽來(lái)設(shè)置關(guān)閉功能--> <ahref="#"class="close"data-dismiss="alert">X</a><h4>提示</h4>這是一段提示信息。。 </div><!--帶按鈕的的信息提示--> <divclass="alertalert-errorfadein"><buttontype="button"class="close"data-dismiss="alert">×</button><strong>Warning!</strong>Bestcheckyoself,you'renotlookingtoogood. <p><aclass="btnbtn-danger"href="#">接受</a><aclass="btn"href="#">拒絕</a></p></div>彈出對(duì)話(huà)框的樣式有多鐘選擇可以定義為alert-error、lert-success、alert-info。關(guān)閉對(duì)話(huà)框有兩種方式,一種是通過(guò)鏈接的方式(Safari和Opera移動(dòng)版瀏覽器上,當(dāng)使用<a>標(biāo)簽關(guān)閉警告框時(shí),除了添加data-dismiss="alert"屬性外,還需要包含href="#"屬性。)一種是通過(guò)按鈕的方式。按鈕方式如下:<divclass="alertalert-error"><buttontype="button"class="close"data-dismiss="alert">×</button><strong>Warning!</strong>Bestcheckyoself,you'renotlookingtoogood.</div>如果你希望警告框在關(guān)閉時(shí)帶有動(dòng)畫(huà)效果,請(qǐng)確保.fade和.in類(lèi)已經(jīng)應(yīng)用到這些警告框上。除此之外還可以通過(guò)調(diào)用JS的方式來(lái)達(dá)到關(guān)閉的效果,同時(shí)在關(guān)閉提示的時(shí)候還可以綁定事件,例如:<script>//給ID="Myalert"添加關(guān)閉時(shí)的事件綁定$('#Myalert').bind('close',function(){alert('提示信息即將被關(guān)閉');})$('#Myalert').bind('closed',function(){alert('提示信息已經(jīng)被關(guān)閉');})//關(guān)閉提示最好放在一個(gè)方法里面,不然頁(yè)面一啟動(dòng),信息提示就關(guān)閉了$('#Myalert').alert('close');</script>靜態(tài)對(duì)話(huà)框模態(tài)對(duì)話(huà)框是一類(lèi)簡(jiǎn)潔、靈活的的彈框,Bootstrap通過(guò).modal類(lèi)來(lái)定義整個(gè)對(duì)話(huà)框。對(duì)話(huà)框包含三個(gè)部分:標(biāo)題、正文、頁(yè)腳按鈕,這是對(duì)話(huà)框的通用樣式,其分別對(duì)應(yīng)的樣式類(lèi)為:.modal-header、.modal-body、.modal-footer。.modal-header主要用于顯示標(biāo)題,也可以帶有關(guān)閉按鈕。.modal-body是正文部分,具體內(nèi)容可自定義,一般為提示語(yǔ),或是個(gè)表單。.modal-footer主要顯示操作按鈕,如"關(guān)閉"、"保存"等等,實(shí)例如下:<!--觸發(fā)彈出對(duì)話(huà)框--><ahref="#myModal"role="button"class="btn"data-toggle="modal">鏈接觸發(fā)</a><buttontype="button"class="btn"data-toggle="modal"data-target="#myModal">按鈕觸發(fā)</button><!--定義一個(gè).modal的div包圍整個(gè)對(duì)話(huà)框內(nèi)容hide表示隱藏fade是動(dòng)畫(huà)效果data-backdrop="false"表示沒(méi)有背景遮擋,如是true表示顯示黑色的頁(yè)面背景且點(diǎn)擊黑色背景會(huì)隱蔽modaldata-backdrop="static"表示有背景遮擋,并且點(diǎn)擊對(duì)黑色背景區(qū)域,對(duì)話(huà)框不會(huì)消失--><divid="myModal"class="modalhidefade"data-backdrop="static"><!--用.modal-header定義一個(gè)對(duì)話(huà)框的頭--><divclass="modal-header"><!--添加一個(gè)關(guān)閉按鈕--><buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">×</button><h3>對(duì)話(huà)框標(biāo)題</h3></div><!--用.modal-body定義對(duì)話(huà)框的主體內(nèi)容--><divclass="modal-body"><p>Onefinebody…</p></div><!--用.modal-footer定義對(duì)話(huà)框的主體內(nèi)容--><divclass="modal-footer"><ahref="#"class="btn"onclick="hideModal()">關(guān)閉</a><ahref="#"class="btnbtn-primary">Savechanges</a></div></div></div>如上述代碼所示,無(wú)論是觸發(fā)還是關(guān)閉對(duì)話(huà)框都可以通過(guò)設(shè)置data屬性來(lái)進(jìn)行操作,無(wú)需編寫(xiě)JavaScript代碼。在一個(gè)主控元素,例如按鈕,上設(shè)置data-toggle="modal",然后將data-target="#modalID"(按鈕上)或href="#fmodalID"(鏈接上)用以指向某個(gè)將要被啟動(dòng)的對(duì)話(huà)框,這樣點(diǎn)擊觸發(fā)元素就會(huì)彈出對(duì)話(huà)框。關(guān)閉操作也是一樣,在對(duì)話(huà)框內(nèi)的某個(gè)觸發(fā)元素上只需要指定data-dismiss="modal"即可。當(dāng)然你也可以使用JS的方式來(lái)進(jìn)行觸發(fā)或者是關(guān)閉操作。$('#myModal').modal()在觸發(fā)對(duì)話(huà)框時(shí)還可以設(shè)置一些參數(shù):名稱(chēng)類(lèi)型默認(rèn)描述backdrop布爾值true為true時(shí),顯示對(duì)話(huà)框的遮蔽背景,鼠標(biāo)點(diǎn)擊背景即可關(guān)閉對(duì)話(huà)框。
為false時(shí),無(wú)背景。keyboard布爾值true為true時(shí)按下ESC鍵關(guān)閉模態(tài)對(duì)話(huà)框。
為false時(shí)無(wú)效。show布爾值true是否在初始化時(shí)顯示對(duì)話(huà)框。
上面的參數(shù)都可以通過(guò)data屬性或JavaScript代碼傳遞給組件。對(duì)于data屬性,將選項(xiàng)名稱(chēng)附著于data-字符串之后,就像data-backdrop=""一樣。參數(shù)可以加到觸發(fā)元素上,也可加到對(duì)話(huà)框元素上。如果想通過(guò)javascript進(jìn)行設(shè)置,如下:<!--讓你指定的內(nèi)容變成一個(gè)模態(tài)對(duì)話(huà)框-->$('#myModal').modal({keyboard:false})另外還提供了幾個(gè)控制方法,如下$('#myModal').modal('toggle'):手動(dòng)打開(kāi)或隱藏一個(gè)模態(tài)對(duì)話(huà)框。$('#myModal').modal('show'):手動(dòng)打開(kāi)一個(gè)模態(tài)對(duì)話(huà)框。$('#myModal').modal('hide'):手動(dòng)隱藏一個(gè)模態(tài)對(duì)話(huà)框。Bootstrap中的模態(tài)對(duì)話(huà)框?qū)ν獗┞读艘恍┦录试S你監(jiān)聽(tīng)事件描述show當(dāng)show方法被調(diào)用時(shí),此事件將被立即觸發(fā)。shown當(dāng)模態(tài)對(duì)話(huà)框呈現(xiàn)到用戶(hù)面前時(shí)(會(huì)等待過(guò)渡效果執(zhí)行結(jié)束)此事件被觸發(fā)。hide當(dāng)hide方法被調(diào)用時(shí),此事件被立即觸發(fā)。hidden當(dāng)模態(tài)對(duì)話(huà)框被隱藏(而且過(guò)渡效果執(zhí)行完畢)之后,此事件將被觸發(fā)。$('#myModal').on('事件名',function(){//dosomething…})工具提示工具提示有兩種形式,分別是tooltip和popover。實(shí)例如下:<p><atitle="這是一個(gè)提示信息"rel="tooltip"href="#">Tooltip</a></p><p><aclass="btn"title="這是標(biāo)題"data-content="這是提示的主要內(nèi)容"rel="popover"href="#">Popover</a></p>如果想要觸發(fā)提示信息,必須要寫(xiě)JS代碼:<script>$('body').off('.data-api')$("a[rel=tooltip]").tooltip()$("a[rel=popover]").popover()</script>進(jìn)度條進(jìn)度條使用.progress類(lèi)定義,默認(rèn)樣式是帶有垂直漸變的進(jìn)度條。例如:<divclass="progress"><divclass="bar"style="width:60%;"></div></div>如果想使用漸變創(chuàng)建的一個(gè)條紋效果的進(jìn)度條(不支持IE7-8)可以在<divclass="progress">的class屬性里面再加入一個(gè).progress-striped類(lèi),如果為.progress-striped添加.active,即可創(chuàng)建一個(gè)從右向左變化的條紋樣式(IE全系列都不支持此效果)如:<divclass="progressprogress-stripedactive"><divclass="bar"style="width:40%;"></div></div>如果想創(chuàng)建堆疊樣式可將多個(gè)進(jìn)度條放入同一個(gè).progress中即可,如:<divclass="progress"><divclass="barbar-success"style="width:35%;"></div><divclass="barbar-warning"style="width:20%;"></div><divclass="barbar-danger"style="width:10%;"></div></div>備注:進(jìn)度條依賴(lài)于CSS3的漸變、過(guò)度和動(dòng)畫(huà)特性,這些都是不被IE7-9或較老版本的Firefox所支持的。IE10和Opera12之前的版本均不支持動(dòng)畫(huà)特性輪播bootstrap為輪播組件定義了一套輪播的css樣式,其中有三個(gè)最基本的樣式.carousel、.carousel-inner、.item。.carousel是整個(gè)輪播的樣式。.carousel-inner是幻燈片組的樣式,所有的幻燈片都定義在其內(nèi)。.item是每張幻燈片的樣式(其內(nèi)是輪播的元素,比如單張圖片),這三個(gè)樣式定義了整個(gè)輪播組件的架構(gòu)。另外還有倆個(gè).carousel-indicators.carousel-control是可選的,這倆個(gè)是用于控制幻燈片。.carousel-indicators是指示器,控制直接切換到哪張,.carousel-control是控制器,用于切換上一張、下一張。在控制器和指示器中使用data屬性可以很容易的控制輪播的位置。data-slide內(nèi)可以包含prev(切換到上一張)或next(切換到下一張),他們可以改變當(dāng)前幀,一般用作控制器。另外,使用data-slide-to可以傳遞某個(gè)幀的下標(biāo),例如data-slide-to="2",這樣就可以直接跳轉(zhuǎn)到這個(gè)指定的幀(一般用作指示器,下標(biāo)從0開(kāi)始計(jì)算)。例如:<!--slide是設(shè)置輪播的動(dòng)畫(huà)效果(平緩過(guò)渡)默認(rèn)是5秒切換一次--><divid="myCarousel"class="carouselslide"><!--用作指示器--><olclass="carousel-indicators"><lidata-target="#myCarousel"data-slide-to="0"class="active"></li><lidata-target="#myCarousel"data-slide-to="1"></li><lidata-target="#myCarousel"data-slide-to="2"></li></ol><divclass="carousel-inner"><!--每一個(gè)整體都用一個(gè).item定義一下active表示默認(rèn)顯示--><divclass="itemactive"><imgsrc="http://placehold.it/940x36
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 江蘇省南通市如皋一中2025-2026學(xué)年高一(上)期末物理模擬試卷(三)(含答案)
- 廣東省深圳市鹽田區(qū)2025-2026學(xué)年上學(xué)期期末九年級(jí)數(shù)學(xué)試卷(無(wú)答案)
- 廣東省潮州市2025-2026學(xué)年九年級(jí)(上)期末化學(xué)試卷(含答案)
- 2025-2026學(xué)年北師大版九年級(jí)上冊(cè)期末數(shù)學(xué)試卷(考試范圍:九上九下第一、二章)(含答案)
- 五官科考試試題及答案
- 文言文題目及答案初中
- 微機(jī)原理試題及答案
- 初中政治知識(shí)點(diǎn)總結(jié)課件
- 新人教版二年級(jí)語(yǔ)文上冊(cè)期中測(cè)試卷及答案
- 西游記讀后感初一
- 2026中國(guó)煙草總公司鄭州煙草研究院高校畢業(yè)生招聘19人備考題庫(kù)(河南)及1套完整答案詳解
- 2026年甘肅省蘭州市皋蘭縣蘭泉污水處理有限責(zé)任公司招聘筆試參考題庫(kù)及答案解析
- 陶瓷工藝品彩繪師崗前工作標(biāo)準(zhǔn)化考核試卷含答案
- 2025年全國(guó)高壓電工操作證理論考試題庫(kù)(含答案)
- 居間合同2026年工作協(xié)議
- 2025-2026學(xué)年(通*用版)高二上學(xué)期期末測(cè)試【英語(yǔ)】試卷(含聽(tīng)力音頻、答案)
- 翻車(chē)機(jī)工操作技能水平考核試卷含答案
- 醫(yī)療機(jī)構(gòu)信息安全建設(shè)與風(fēng)險(xiǎn)評(píng)估方案
- 員工宿舍安全培訓(xùn)資料課件
- 化工設(shè)備培訓(xùn)課件教學(xué)
- 舞臺(tái)燈光音響控制系統(tǒng)及視頻顯示系統(tǒng)安裝施工方案
評(píng)論
0/150
提交評(píng)論