版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)
文檔簡介
Bootstrap學習筆記
Bootstrap使用的某些HTML元素和CSS屬性需要文檔類型為IITML5的文獻類型。
因此這一文檔類型必須出現(xiàn)在項目的每個頁面的開始部分
<!DOCTYPEhtm1>
】<htmI1ang="en”〉
4</htm1>
HTML中定義的所有標題標簽，從<hl>到<h6>都是可用的。Bootstrap定義的全局
font-size是14px,line-height是20px。這些樣式應(yīng)用到了<body>和所
有的段落上。此外，對<p>（段落）還定義了1/2行高（默認為10px）的底部外邊距（ma
rgin）屬性。
在使用Bootstrap之前必須要將bootstrap.css或者bootstrap.min.css（壓縮版）引
入到頁面中，它定義了B。otstrap的基本樣式。假如需要使用Bootstrap提供的組
件，要將bootstrap.js或者bootstrap.min.js（壓縮版）引入到頁面中。由于bootstrap的
JS插件需要Jquery的支持，所有在引入bootstrap.js之前必須將Jquery.js也引入
到頁面上。此外假如你希望你的頁面支持響應(yīng)式布局，必須引入bootstrap-responsive.
css或者bootstrap-responsive,min.css（壓縮版），它重要提供頁面在移動設(shè)備上的顯示
樣式支持，需要注意的是bootstrap-responsive.css必須放置在bootstrap.css之后,否則便
不具有響應(yīng)式布局功能。當然在Bootstrap3的版本中，bootstrap.css和bootstrap-
responsive.css已經(jīng)合并了。
一、代碼樣式
Bootstrap提供了代碼樣式，用于在頁面上展示代碼，以此來區(qū)分于正文的區(qū)別,假如是行
內(nèi)嵌套代碼，可以用<code>標簽,但是對于代碼中的符號要進行轉(zhuǎn)換（<是<、>；
是〉）例如：
I<!—正文中內(nèi)嵌代碼塊一>
<p>Forexample,<code>&!t;section></code>shouldbewrappedas
iniine.</p>
假如是代碼塊可以用<Pre>標簽,同樣的，代碼中的要將代碼中的尖括號做轉(zhuǎn)換。例如：
<!—.pre—scrollable,其作用是設(shè)立max-height為350px,并在垂直方向展示滾
動條一》
<preclass="pre-scrollab1e”>
3
<；p>；Sampletexthere...<；/p>；
&1t;pclass="text-muted”>…&1t;/p>
&1t；pclass="text-primary”>…</p>
&It；pclass=，，text-successz/>...&It；/p>
&It;pc1ass="text-info，z>...&1t;/p>；
&1t;pclasstext-warningz/>...<；/p>；
<pclass="text-dangerz/>...&1t;/p>
11
</pre>
二、表格
基本的表格樣式可以用<table>標簽。例如：
＜h4＞正常表格＜/h4〉
<!—
運用.tab1e-bordered為表格和其中的每個單元格增長邊框
運用.tab1e-striped可以給<tbody》之內(nèi)的每同樣增長斑馬條紋樣式
3運用.table-hover可以讓<tbody〉中的每一行響應(yīng)鼠標懸停狀態(tài)
6~>
<tableclass="tabietable-stripedtab1e-borderedtable-
hoverz/>
<tr>
<th>FirstName</th>
<th>LastName</th>
?<th>Username</th>
12</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
?<td>@mdo</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
21<td>@fat</td>
22</tr>
</table>
假如想讓表格的內(nèi)容更緊湊一點可認為表格添加.tabie-condensed類，假如想為表
格添加顏色可以選擇情景類，情景類有:
.success表達成功或積極的行為。
.error表達一個危險或存有潛在危險的行為。
.warning表達警告，也許需要注意。
?info作為一個默認樣式的一個替代樣式。
例如：
<!一運用.table-condensed可以讓表格更加緊湊,單元格中的內(nèi)部(Padding)
均會減半一>
<tablec1ass=z，tabletable-condensed/z>
3<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Username</th>
7</tr>
<trclass=*'warningM>
<td>Mark</td>
<td>0tto</td>
11*<td>@mdo</td>
12〈八r>
<trclass="error”)
<td>Jacob</td>
<td>Thornton</td>
16。<td>@fat</td>
17</tr>
<trclass="info”>
9<td>Larry</td>
<td>theBird</td>
?<td>@twitter</td>
</tr>
</table>
三、表單
基本的表單可以用〈form〉標簽，只要定義了<form>標簽，標簽里面的每個單獨的表單控件
都已經(jīng)被賦予了樣式。默認是堆疊、label左側(cè)對齊并在控件之上。例如：
1<form>
<fieldset>
<legend>普通表單</1egend>
<1abel>Labelname</1abe1>
<inputtype="text"placeho1der="Typesomething…”>
<spanclass="help-block7'>Examp1eblock-leve1helptexther
e.</span>
<1abe1class=*'checkbox”>
<inputtype="checkbox〃>Checkmeout
</1abel>
<buttontype="submit"class："btnz，>Submit</button>
</fieldset>
12</form>
此外，Bootstrap包含3個可選的常用表單布局，分別是搜索表單，行內(nèi)表單，水平表
單，例如：
<1egend>搜索表單</1egend>
<!—為表單增長為orm—search類，并為<input>增長.search—query類，可將輸入
框變成圓角狀
3<formc1ass="form—search”>
<inputtype="text"class="input-mediumsearch-query〃p1
aceholder="Typesomething…”>
<buttontype="submit"class=earch</button>
6</form>
<1egend>行內(nèi)表單</legend>
<!一為表單增長，。皿-壯150類，結(jié)果是一個壓縮型排列的表單，其中l(wèi)abel左
側(cè)對齊、控件為inline-b1ock類型。—>
<formclass="form-in1ine”>
<inputlype="text"class="inpul-small"placeho1der="Email”〉
<inputtype="password“c1ass="input-smal1"placehoIder="Pas
sword”>
<labelclass="checkbox”>
<inputtypc="checkbox”>Rememberme
</label>
<buttontype=*submit"class=z，btnz，>Signin</button>
10</form>
IVlegend>水平表單</legend>
2<!一
為表單添加.form-horizonta1類
將label和控件包裹在.contro1-group中
為1abel添加.control-labe1類
將任何相關(guān)的控件包裹在.c。ntroIs中，以保證最佳的對齊
—>
8<formclass=/，form-horizonta
9<divclass=control-group>
10<1abelclass="control-1abel"for="inputEmail">Emai1</labe1
>
11<divclass="controls”>
12<inputtype="text"id="inputEmail*placeho1der="Email*'>
13</div>
14</div>
15<divc1ass=z，control-group”>
16<labelclass="controlTabel"for="inputPasswordz/>Password</label>
17<divclass=z，controls">
18<inputtype二〃password"id="inputPassword〃placeholder="Pas
sword〃>
19</div>
20</div>
21<divclass="contro1-group”)
<divclass="controls〃>
23<labelc1ass=，zcheckboxz/>
24<inputtype="checkbox">Rememberme
25</1abel>
26<buttontype=//submit,zc1ass=〃btn”>Signin</button>
27</div>
28</div>
29</form>
四、按鈕
任何賦予.btn類的頁面元素都會顯示按鈕樣式.但是，通常是用于更好的表現(xiàn)〈a＞和＜b
utton＞頁面元素。
按鈕class=""描述
默認btn帶漸變的標準灰色按鈕
btnbtn-pr提供額外的視覺感，可在一系列的按鈕中指出重要操作
imary
btnbtn-inf默認樣式的替代樣式
o
btnbtn-表達成功或積極的動作
success
btnbtn-提醒應(yīng)當謹慎采用這個動作
warning
btnbtn-dang表達這個動作危險或存在危險
er
btnbtn-inve備用的暗灰色按鈕,不依賴于語義和用途
rse
鏈接btnbtn-1ink簡化一個按鈕，使它看起來像一個鏈接，同時保持按鈕的
行為
假如想更改按鈕的大小，可以在class類中添加.btn-1arge、.btnsma11
或.btn-mini即可改變按鈕大小,通過由Glyphicons提供圖片，可以給每個按鈕設(shè)立
一個小圖標，使用時，每個圖標都需要依附于一個＜i＞標簽，并且賦予一個唯一的類(cl
ass),默認是深灰色，也可以使用反色(白色)樣式的圖標，只需增長一個額外的類.ic
on-white。例如：
＜!--.btn-primary可以將按鈕的顏色變藍，.btn-1arge可以設(shè)立按鈕的大小,相應(yīng)
的尚有.btn-smal1.btn-mini
要想給按鈕加上小圖標可以使用＜i＞標簽
3—>
<divsty1e=11margin-bottom：15px”>
<aclass="btnbtn-primarybtn—large“href=""><iclass="icon-c
ommenticon-white"></i>查看評論</a>
6</div>
'<divsty1e="margin-bottom：15px”>
<buttonc1ass="btn"type="submit“Xiclass=，zicon-shopping-ca
rt/z></i>結(jié)賬V/a>
1()</div>
11
I?<divstyle=/，margin-bottom:15px*>
13<inputclass="btn"type="button“value="設(shè)立"〉
14</div>
<!--通過給按鈕添加.bin-block可以使其充滿父節(jié)點100%的寬度，并且按鈕也變?yōu)榱?/p>
塊級(block)元素一>
16
<buttontype="button"class=，，btnbtn-primarybtn-lgbtn-block”di
sablcd="disabled”>Blocklevelbutton</button>
<buttontype="button“c1ass="btnbtn-defau1tbtn-lgbtn-b1oc
k”>B1ock1evelbutton</button>
五、下拉菜單按鈕
下拉菜單的觸發(fā)器和整個下拉菜單都需要包裹在.dropdown中，或者聲明為posit
ion:re1ative;的其它頁面元素中。向.dropdown-menu添力口.pul1-right
即可右對齊下拉菜單。向Qi〉添加.disab1ed即可禁用菜單中的某個鏈接，在現(xiàn)有的下
拉菜單中，給任意的1i添加.dropdown-submenu即可自動賦予一個二級菜單，這個二
級菜單會在鼠標懸停時自動展現(xiàn)。例如：
1<divc1ass="dropdown
2<!--data-togg1e="dropdown”表達觸發(fā)下拉事件一>
<buttonc1ass="btndropdown-toggle"data-toggle=z，dropdown
〃)
Dropdown
<spanclass="caret"X/span>
</button>
<!--添加下拉列表一>
<ulc1ass="dropdown-menu“role=nmenaria-labe1ledby="drop
downMenu">
<li><atabindex="T"href="#">Action</a></li>
<li><atabindex=〃-1"href="#">Anotheraction</a></li>
<li><atabindex="-1Hhref="#>Somethinge1sehere</a></
li>
<lic1ass=zzdividerz，X/li>
<1iXatabinclex="T"href="#〃>Separatedlink</a></li>
14K!一添加二級子菜單一》
<1iclass=//dropdown-submenu">
<atabindex="-1〃href="#">Moreoptions</a>
<ulclassedropdown-menu")
<li><atabindex="T"href="#">Anotheraction</a></1i>
<1i><atabindex="z-l'*href="/#，Z>Somethingelsehere</a></
li>
20</ul>
</li>
</ul>
24</div>
六、按鈕組
將帶有?btn類的一系列按鈕包裹在.btn-group中，即可創(chuàng)建一個按鈕組。例」如：
I<divc1ass=Hbtn-groupn>
2<buttonc1ass="btnLeft</button>
3<buttonc1ass="btn”>Midd1e</button>
4<buttonc1ass="btn>Right</button>
5</div>
假如想創(chuàng)建一個將多個多維按鈕組
只要將Vdivclass=/，btn-group"〉放入<divclass="btn-too1bar〃>中即可獲得
更多復(fù)雜的組件，假如想讓一組按鈕呈現(xiàn)出垂直方向堆疊的樣式，只需要在.btn-grou
P的后面添加.btn-group—vertical類即可。
七、分裂式按鈕下拉菜單
在按鈕組的基礎(chǔ)上，我們可以很容易的創(chuàng)建分裂式按鈕。分裂式按鈕左側(cè)是一個標準形式
的按鈕，右側(cè)是一個可觸發(fā)下拉菜單的鏈接。例如：
!<divclass="btn-group">
V!一為了保證URL符合規(guī)范，請使用data-target屬性來代替href二—>
<aclass="btndropdown-togglez/data-toggle=//dropdownz/data-target
二href="/page.html>
4動作
5K!一在按鈕的后面創(chuàng)建一個箭頭一>
6<spancIass="caretH></span>
7</a>
8<uIc1ass="dropdown—menu?/>
9<1i><atabindex="-1"href="#，z>Action</a></li>
10<li><atabindex="T"href="#">Anotheraction</a></li>
11</ul>
12</div>
I<!dropup表達創(chuàng)建一個向上彈出的菜單樣式一>
2<divc1assbtn-groupdropup”>
3<buttonclass="btn”>動作〈/button>
4<!—data—toggle="dropdown”重要是給按鈕綁定下拉菜單的點擊彈出事件>
5<buttonclass=〃btndropdown-toggle"data-togg1e二〃dropdown”>
6V!一在按鈕的后面創(chuàng)建一個箭頭一〉
7<spanclass="caret"></span>
8</button>
9<!一創(chuàng)建下拉子菜單用.dropdown-menu定義—>
10<u1class="dropdown-menu>
II<1i><atabindex=“一1"href="#,,>Action</a></li>
12<1iXatabindex="T"href=//#，/>Anotheraction</a></li>
13</ul>
14</div>
鏈接或按鈕上的dala-toggle二〃dropdown”即表達激活下拉菜單，當然你也可以通過
JS的方式來觸發(fā)下拉事件，例如:
1'<script>
1〃對所有的class=/zdropdown—toggle〃按鈕或是鏈接定義下拉事件
17$('.dropdown-toggle*).dropdown()
〃對ID=Mybtn的按鈕或是鏈接定義下拉事件
$('#Mybtn').dropdown()
</script>
注：假如dropdown()帶上參數(shù)名為toggle的參數(shù)(dropdown。toggle')),即
表達根據(jù)當前下拉菜單的狀態(tài)來響應(yīng)事件，假如下拉菜單是隱藏的即顯示出來，假如是顯示
的即隱臧起來。
八、選項卡
基于Vu1>并添加.nav-tabs或者是.nav-pil1s類即可創(chuàng)建一個選項卡，為任一導
航組件(標簽頁、pi1Is或列表)添加.disab1ed類，均可讓鏈接變灰并失去鼠標懸
停效果。但是鏈接仍然是可以點擊的，除非你將鏈接的href屬性去除，你還可以寫Ja
vaScript代碼阻止用戶點擊鏈接。例如：
1<!一設(shè)立選項卡的展示樣式：.nav-tabs.nav-piIls
假如想創(chuàng)建堆疊式的排列,可以在nav-tabs(nav-pills)的后面添加nav-stacked-
->
3<u1class="navnav-tabsn>
4<!-c1ass=〃active〃表達默認激活第一個選項卡一>
<lic1ass="active"><ahref="#tabl"data-toggle="tab">選項一V/aX/
1i>
<1i><ahref=”#tab2ndata-toggle="tab〃>選項二</a>V/li>
<li><ahref="#tab3"data-togg1e="tab”>選項三</a>V/li>
8</ul>
i11<divclass="tab-content*>
<divclass=，，tab-paneactive，zid="lab1"><p>選項一的內(nèi)容V/pX/div>
<divclass=〃tab—pane"id="tab2"><p>選項二的內(nèi)容</pX/div>
<divclass="tab-pane*id="tab3">Vp>選項三的內(nèi)容</p></div>
i；</div>
九、導航條
在頁面上添加導航條組件可以用.navbar類來定義，然后用.navbar-inner類
將導航中的條目裝載在一起，導航條中條目可以是無序列表，將導航條放入.container
中就可以限制其寬度.假如想在導航條目中添加分隔符，只需增長一個空白的條目并為其設(shè)
立一個類即可，假如想要在導航中添加一個表單，需要包含在.navbar-form類中，
假如是搜索表單可以定義為.navbar-search。例如：
1<divclass="navbarn>
<divclass="navbar-inner〃>
<!-一定義導航的Title—>
<ac1ass=nbrand"href="#">Title</a>
<u1class="nav*>
<1ic1ass=z，active"><ahref="#">首頁</aX/li>
<1i><ahref=/zr>Linkl</a></li>
<1i><ahref=〃#〃>Link2</aX/li>
<li><ahref="#〃>Link3</a></li>
。<!一添加分隔符一>
。<1ic1ass=/zdivider-vertica1n></1i>
<1iXahref="#">Link4</a></1i>
<li><ahref=zz#，z>Link5</aX/li>
<!--在導航中添加一個普通表單
163<formclass=，/navbar-formpull-rightn>
<inputtype="text"class="span2”>
<buttontype="submit“c1ass="btn”>Submit</button>
</form>
。—>
21
<!--在導航中添加一個搜索表單一)
2.。<formclass二〃navbar-searchpu11-right”>
o<!一為輸入框添加.search-query即可獲得一個搜索表單一>
<inputtype='*text"class="search-query"placeho1der="Search
〃)
</form>
</ul>
</div>
29</div>
假如想在導航條目中加入下拉菜單，只需要在導航條目<1i>的后面加上：
I<!一添加一個下拉菜單一>
。<u1class="nav”>
3<1iclass=/，dropdown/z>
<ahref=〃#〃c1ass="dropdown-toggle"data-togg1e="dropdow
n〃>
Account
<bclass="caret/zX/b>
</a>
<ulc1ass="dropdown—menu”>
<li><atabindex="-l"href="#H>Action</a></li>
<1i><atabindex="-1"href=，z#/z>Anotheraction</a></l
i>
</ul>
</li>
</u1>
十、面包屑
面包屑組件可以用.breadcrumb類來定義，在頁面上可以用于位置（途徑）提醒。例
如：
!<u1class=nbreadcrumb^>
<1i><ahre首頁</a><spanclass="dividerzz>/</span></1i>
<1i><ahref=〃#">Library</a><spanclass="divider〃>/V/spa
nX/li>
4<lic1ass=，/activeZ,>Data</li>
5</ul>
十一、分頁
分頁用.Pagination類來定義，定義如下:
<!—.pagination-centered（中間）.pagination-rigth（右邊）一>
<divclass="paginationpagination-centered〃>
33<ul>
<1i><ahref=，/#，Z>&1aquo;</a></li>
5。<li><ahref="r>K/a></li>
<lic1ass=/zactive/zXahref=">2</aX/li>
7*<li><ahref="#〃>3</a></1i>
<li><ahref=，/#，，>4</a></li>
<li><ahref="#'>5</a></li>
108<1iXahref=*'#，z>Next</a></li>
。</u1>
12o</div>
可根據(jù)不同情況定制鏈接。用.disab1ed標明鏈接不可點擊，用.active標明當
前頁。
<divc1ass="pagination”>
2<ul>
3<1ic1ass="disabled"><ahref=uo；</a></li>
-i<liclass=//activez/><ahref=/,#">1</a></li>
6</ul>
7</div>
你還可以使用span標簽替代a標簽，這樣就去除了點擊功能，同時又能保存需要的樣
式。
<divclass="paginationH>
<ul>
3<1iclass二〃disabled，，Xspan>«</span></1i>
4<liclass=，/activez，Xspan>l</span></li>
5...
6</ul>
7</div>
假如需要更改分頁器的大小，在class-"pagination”里面
添力口.pagination-large>.pagination-smal1或.pagination-
mini就可以改變分頁尺寸。假如需要定義“上一頁”“下一頁”的翻頁樣式”可以
用.Page類：
<u1class="pager>
<1i><ahref="#〃>前一頁V/a></1i>
o<li><ahrefi#">后一頁</aX/1i>
0</U1>
<!一將鏈接放頁面兩側(cè)一>
<ulclass二〃pagerz，>
?<liclass=/zprevious，z><ahref前一頁</a></1i>
<liclass="next"><ahref="#">后一頁</aX/li>
3</ul>
分頁也可使用.disab1ed工具類讓鏈接處在禁用狀態(tài)，添加在V1i>的caIss
屬性里面
十二、提醒框
提醒框用.alert定義。例如:
<divclass="a1ertalert-info，zid="Myalert”>
。<!—用<a>標簽來設(shè)立關(guān)閉功能—>
<ahref="#〃class="close"data-dismiss="alert”>X〈/a>
<h4〉提醒</h4>
這是一段提醒信息。。
?</div>
<!—帶按鈕的的信息提醒
Kdivclass=na1ertalert-errorfadein”>
<buttontype="button"class="close〃data-dismiss=zza1ert”>&
times;</button>
<strong>Warning!</strong>Bestcheckyoself,you,renot1o
okingtoogood.
o<p>
<ac1ass=*'btnbtn-danger/zh「?￡'=〃#">接受</a><aclass=nbt
n〃hre
</p>
</div>
彈出對話框的樣式有多鐘選擇可以定義為a1ert-error>lert.-success>alert-i
nfoo
關(guān)閉對話框有兩種方式，一種是通過鏈接的方式（Safari和Opera移動版瀏覽器上，當使用
<a>標簽關(guān)閉警告框時，除了添加data-dismiss="alert”屬性外,還需要包含href
="#"屬性。）一種是通過按鈕的方式。按鈕方式如下:
<divclass="alertalert—error”>
<buttontype='*button/zc1ass="c1ose"data-dismiss="a
>×</button>
<strong>Warning!</strong>Bestcheckyoself,yourenot
lookingtoogood.
</div>
假如你希望警告框在關(guān)閉時帶有動畫效果，請保證.fade和.in類已經(jīng)應(yīng)用到這些
警告框上。除此之外還可以通過調(diào)用JS的方式來達成關(guān)閉的效果，同時在關(guān)閉提醒的時候
還可以綁定事件，例如：
1<script>
//給ID="Myalert”添加關(guān)閉時的事件綁定
$('#Mya1ert').bind('close',function0{
alert。提醒信息即將被關(guān)閉')；
5})
$('ya1ert').bind('closed',function(){
alertC提醒信息已經(jīng)被關(guān)閉')；
8})
9
//關(guān)閉提醒最佳放在一個方法里面,不然頁面一啟動，信息提醒就關(guān)閉了
$('#Myalert').alertCclose*);
</script>
十三、靜態(tài)對話框
模態(tài)對話框是一類簡潔、靈活的的彈框,Bootstrap通過.modal類來定義整個對話框。
對話框包含三個部分:標題、正文、頁腳按鈕，這是對話框的通用樣式，其分別相應(yīng)的樣式
類為：.modal-header、.moda1-body>.moda1-footero
.modal-header重要用于顯示標題，也可以帶有關(guān)閉按鈕。.moda『body是正文部
分，具體內(nèi)容可自定義，一般為提醒語，或是個表單。.modal-footer重要顯示操作按鈕，
如〃關(guān)閉”、〃保存〃等等，實例如下：
i<!一觸發(fā)彈出對話框—>
<ahref="#myModal"role="button“c1ass="btn〃data-toggle="
modal”）鏈接觸發(fā)</a>
<buttontype="button“c1ass二〃btn〃data-toggle="modal"data-tar
get="#myModa1”>按鈕觸發(fā)〈/button>
<!一定義一個.moda1的div包圍整個對話框內(nèi)容hide表達隱藏fade是動畫效果
data-backdrop="「aIse〃表達沒有背景遮擋，如是true表達顯示黑
色的頁面背景且點擊黑色背景會隱蔽modal
data-backdrop="static”表達有背景遮擋，并且點擊對黑色背景區(qū)域，對話
框不會消失一>
<divid=z/myModa1〃class="modalhidefade"data-backdrop二〃static〃>
<!一用.modal-header定義一個對話框的頭一>
<divclass="modaI-header">
<!一添加一個關(guān)閉按鈕一>
<buttontype="button"class="close"data-dismiss二oda1"ar
ia-hidden=//true〃>×</button>
Vh3>對話框標題V/h3>
</div>
<!一用.moda1-body定義對話框的主體內(nèi)容一>
<divc1ass="moda1—body〃>
<p>0nefinebody,,?</p>
</div>
<!--用.modal-fo。ter定義對話框的主體內(nèi)容一>
<divclass="moda1-footer”>
<ahref="#"cIass="btn"oncliek="hideModa1()”>關(guān)閉</a>
<ahref="#〃class="btnbtn-primary/z>Savechanges</a>
</div>
</div>
24</div>
如上述代碼所示,無論是觸發(fā)還是關(guān)閉對話框都可以通過設(shè)立data屬性來進行操作,無需編
寫JavaScript代碼。在一個主控元素，例如按鈕,上設(shè)立data-toggle="modal",
然后將data—target="#modallD"(按鈕上)或href="#fmodalID"(鏈接上)
用以指向某個將要被啟動的對話框，這樣點擊觸發(fā)元素就會彈出對話框。關(guān)閉操作也是同
樣,在對話框內(nèi)的某個觸發(fā)元素上只需要指定data—dismiss="modal"即可。
當然你也可以使用JS的方式來進行觸發(fā)或者是關(guān)閉操作。
$('#myModal').moda1()
在觸發(fā)對話框時還可以設(shè)立一些參數(shù)：
名稱類型默認描述
backd布爾值true為true時,顯示對話框的遮蔽背景，鼠標點擊背景即可關(guān)
rop閉對話框。A為false時，無背景。
keyboar布爾值true為true時按下ESC鍵關(guān)閉模態(tài)對話框。劣為fa1se時
d無效。
show布爾值tru是否在初始化時顯示對話框。A
e
上面的參數(shù)都可以通過data屬性或JavaScript代碼傳遞給組件。對于data屬性，將
選項名稱附著于data-字符串之后，就像data-backdrop=""同樣。參數(shù)可以加到觸
發(fā)元素上，也可加到對話框元素上。
假如想通過javascript進行設(shè)立，如下：
I<!一讓你指定的內(nèi)容變成一個模態(tài)對話框一一>
$C#myModal').modal({
keyboard:false
；))
此外還提供了幾個控制方法,如下
$('#myModa1').moda1('toggle()：手動打開或隱藏一個模態(tài)對話框。
$('#myModal').modal('show'):手動打開一個模態(tài)對話框。
$("#myModal1).modalChide'):手動隱藏一個模態(tài)對話框。
Bootstrap中的模態(tài)對話框?qū)ν獗┞读艘恍┦录试S你監(jiān)聽
事件描述
show當show方法被調(diào)用時，此事件將被立即觸發(fā)。
shown當模態(tài)對話框呈現(xiàn)到用戶面前時(會等待過渡效果執(zhí)行結(jié)束)此事件被觸發(fā)。
hide當hide方法被調(diào)用時，此事件被立即觸發(fā)。
hidd當模態(tài)對話框被隱藏(并且過渡效果執(zhí)行完畢)之后，此事件將被觸發(fā)。
en
$('#myModal').on('事件名'，function()(
//dosomething…
))
十四、工具提醒
工具提醒有兩種形式，分別是tooltip和popover。實例如下：
<p><atilie="這是一個提醒信息"rel=HtooItip"href=〃#">Tooltip〈/a>
</p>
<p><aclass=*'btn"tille="這是標題〃data-content="這是提醒
的重要內(nèi)容"re1=〃popover"href="#">Popover</a></p>
假如想要觸發(fā)提醒信息，必須耍寫JS代碼：
<script>
$('body').off(r.data-api')
$(//a[rel=tooltip]n).tooltip()
$(〃a[re1=popove
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 特殊需求寵物共同撫養(yǎng)權(quán)及費用分擔合同
- 新能源汽車關(guān)鍵技術(shù)合作及知識產(chǎn)權(quán)共享協(xié)議
- 短視頻電商直播商品選擇與供應(yīng)鏈解決方案協(xié)議
- 微信小程序電商供應(yīng)鏈金融與倉儲管理聯(lián)合合同
- 《文學作品的深邃魅力：課件設(shè)計與展示》
- 企業(yè)業(yè)務(wù)流程管理
- 《小學課件：探索宇宙的奧秘》
- 電器知識培訓教材
- 《Lily的產(chǎn)品攝影》課件
- 學生干部能力提升與班級建設(shè)專題培訓
- 小學語文五年級知識競賽課件
- 護理人員業(yè)務(wù)技術(shù)檔案 模板
- 工藝管道儀表流程圖PID基礎(chǔ)知識入門級培訓課件
- 《游園不值》-完整版課件
- 人音版小學一年級音樂下冊教案 全冊
- 草皮鋪種施工方案
- 中醫(yī)養(yǎng)生穴位保健按摩課件
- 回旋鏢運動軌跡的模擬
- 《康復(fù)醫(yī)學》PPT課件(PPT 105頁)
- (完整)高血壓病歷以及全套臨床病歷
- 標準溶液配制與標定原始記錄(氫氧化鈉)
評論
0/150
提交評論