-
bootstrap中的“模態(tài)彈出框”有以下幾個(gè)特點(diǎn)： 1、模態(tài)彈出窗是固定在瀏覽器中的。 2、單擊右側(cè)全屏按鈕，在全屏狀態(tài)下，模態(tài)彈出窗寬度是自適應(yīng)的，而且modal-dialog水平居中。 3、當(dāng)瀏覽器視窗大于768px時(shí)，模態(tài)彈出窗的寬度為600px。查看全部
-
導(dǎo)入jquery庫(kù)和javascript插件 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>查看全部
-
我要添加多個(gè)panel 代碼怎么寫呢？是要添加js 。還是bootstrap本身就有代碼？查看全部
-
dropdowm()也不能正常彈出收起 $(function(){ $(".dropdown-toggle").dropdown("toggle"); }) 不過使用該參數(shù)，每次單擊都要兩次toggle，就會(huì)一直是一個(gè)不變的狀態(tài)。所以，一般情況下，使用示例中不帶參數(shù)的方法。查看全部
-
聲明式方法是通過定義 data 屬性來實(shí)現(xiàn)，data 屬性可以很容易地控制輪播的位置。其主要包括以下幾種： data-ride 屬性：取值 carousel，并且將其定義在 carousel 上。 data-target 屬性：取值 carousel 定義的 ID 名或者其他樣式識(shí)別符，如前面示例所示，取值為“#slidershow”，并且將其定義在輪播圖計(jì)數(shù)器的每個(gè) li 上。 data-slide 屬性：取值包括 prev，next，prev表示向后滾動(dòng)，next 表示向前滾動(dòng)。該屬性值同樣定義在輪播圖控制器的 a 鏈接上，同時(shí)設(shè)置控制器 href 值為容器 carousel 的 ID 名或其他樣式識(shí)別符。 data-slide-to 屬性：用來傳遞某個(gè)幀的下標(biāo)，比如 data-slide-to="2"，可以直接跳轉(zhuǎn)到這個(gè)指定的幀（下標(biāo)從0開始計(jì)），同樣定義在輪播圖計(jì)數(shù)器的每個(gè) li 上。 在這里需要注意可以為 #slidershow 層添加 slide 樣式，使用圖片與圖片切換效果有平滑感。查看全部
-
第三步：設(shè)計(jì)輪播圖片播放區(qū)。這個(gè)區(qū)域主要用來放置需要輪播的圖片。使用 carousel-inner 樣式來控制，而且其同樣放置在 carousel 容器內(nèi)，并且通過 item 容器來放置每張輪播的圖片.其主要通過 carousel-inner 來控制其樣式呈現(xiàn)。 上面顯示的圖片區(qū)只實(shí)現(xiàn)了圖片播放，但很多輪播圖片效果，在每個(gè)圖片上還對(duì)應(yīng)有自己的標(biāo)題和描述內(nèi)容。其實(shí) Bootstrap 框架中的 Carousel 也提供類似的效果。只需要在 item 中圖片底部添加對(duì)應(yīng)的代碼： <div class="carousel-inner"> <div class="item active"> <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a> <!-- 圖片對(duì)應(yīng)標(biāo)題和描述內(nèi)容 --> <div class="carousel-caption"> <h3>圖片標(biāo)題</h3> <p>描述內(nèi)容...</p> </div>查看全部
-
一個(gè)輪播圖片主要包括三個(gè)部分： ? 輪播的圖片 ? 輪播圖片的計(jì)數(shù)器 ? 輪播圖片的控制器 復(fù)雜一點(diǎn)的輪播圖片，每個(gè)輪播區(qū)會(huì)帶有對(duì)應(yīng)的標(biāo)題和描述內(nèi)容。 第一步：設(shè)計(jì)輪播圖片的容器。在 Bootstrap 框架中采用 carousel 樣式，并且給這個(gè)容器定義一個(gè) ID 值，方便后面采用 data 屬性來聲明觸發(fā)。 <div id="slidershow" class="carousel"></div> 第二步：設(shè)計(jì)輪播圖片計(jì)數(shù)器。在容器 div.carousel 的內(nèi)部添加輪播圖片計(jì)算器，采用 carousel-indicators 樣式，其主要功能是顯示當(dāng)前圖片的播放順序(有幾張圖片就放置幾個(gè)li)，一般采用有序列表來制作： <div id="slidershow" class="carousel"> <!-- 設(shè)置圖片輪播的順序 --> <ol class="carousel-indicators"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> ...查看全部
-
第五步，激活手風(fēng)琴交互行為。要完成交互行為，需要在標(biāo)題鏈接中自定義兩個(gè)屬性，一個(gè)是data-toggle，并且取值為collapse；另一個(gè)是data-target，取值為各個(gè)面板內(nèi)容區(qū)的標(biāo)識(shí)符，比如說ID，在這個(gè)例子分別是#panel1、#panel2和#panel3. 注意：在這個(gè)案例中不加入data-target="#panel1"也可以，因?yàn)榍懊嬉呀?jīng)有了href="#panel1"，但如是button按鈕作為觸發(fā)器就必須使用data-target="#panel1"語(yǔ)句了。 第六步，定義data-parent屬性，實(shí)現(xiàn)點(diǎn)擊一個(gè)其中一個(gè)元素時(shí)，關(guān)閉所有的折疊區(qū)，再打開所單擊的區(qū)域（如果所單擊區(qū)域是展示的，則會(huì)關(guān)閉）。這個(gè)data-parent取值與手風(fēng)琴面板容器的標(biāo)識(shí)符相匹配，比如這個(gè)例子是指 #myAccordion 總結(jié)： ? 使用 panel 的 panel-title 做為觸元素，使用panel-body的父元素作為折疊區(qū)； ? 使用一個(gè) panel-group 來包含多個(gè) panel，從而實(shí)現(xiàn)手風(fēng)琴效果； ? 每個(gè) panel 里的觸發(fā)元素都要指定data-parent屬性； ? data-parent 屬性的值對(duì)應(yīng) panel-group樣式元素的ID或者其他樣式標(biāo)識(shí)符； ? 觸發(fā)元素需要指定 data-toggle，并且值為 collapse； ? 觸發(fā)元素都要指定 data-target屬性； ? data-target屬性的值對(duì)應(yīng) panel-body 的父元素的ID或者其他樣式標(biāo)識(shí)符。查看全部
-
第三步，為了把標(biāo)題和內(nèi)容區(qū)捆綁在一起，可以通過錨鏈接的方法，把標(biāo)題區(qū)域和面板區(qū)連在一起： <div class="panel-group" id="myAccordion"> <div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a href="#panel1">標(biāo)題一</a></h4> </div> <div class="panel-collapse" id="panel1"> <div class="panel-body">折疊區(qū)內(nèi)容...</div> </div> </div> 第四步，控制面板內(nèi)容區(qū)是否可視。在Bootstrap框架中，如果你想讓內(nèi)容區(qū)域不可視，只需要在 panel-collapse 樣式上添加 collapse： <div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a href="#panel1">標(biāo)題一</a></h4> </div> <div class="panel-collapse collapse" id="panel1"> ... 每個(gè)面板的內(nèi)容區(qū)都被隱藏起來了，但有時(shí)候希望默認(rèn)有面板內(nèi)容是可視的,只需要在collapse基礎(chǔ)上再追加 in 樣式： <div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a href="#panel1">標(biāo)題一</a></h4> </div> <div class="panel-collapse collapse in" id="panel1"> ...查看全部
-
觸發(fā)手風(fēng)琴可以通過自定義的 data-toggle 屬性來觸發(fā)。其中data-toggle值設(shè)置為 collapse，data-target="#折疊區(qū)標(biāo)識(shí)符"。接下來我們來看一個(gè)簡(jiǎn)單的示例：（六步） 第一步，設(shè)計(jì)一個(gè)面板組合，里面有三個(gè)折疊區(qū)： <div class="panel-group" id="myAccordion"> <div class="panel panel-accordion panel-default"></div> <div class="panel panel-accordion panel-default"></div> <div class="panel panel-accordion panel-default"></div> </div> 第二步：給面板添加內(nèi)容，每個(gè)面板包括兩個(gè)部分，第一個(gè)是面板標(biāo)題 panel-heading，并且在這里面添加標(biāo)題 panel-title。第二個(gè)部分是面板內(nèi)容，也就是折疊區(qū)，使用 panel-collapse 樣式。 <div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title">標(biāo)題一</h4> </div> <div class="panel-collapse"> <div class="panel-body">折疊區(qū)內(nèi)容...</div> </div> </div>查看全部
-
手風(fēng)琴最關(guān)鍵的部分，就是每個(gè)標(biāo)題對(duì)應(yīng)有一個(gè)內(nèi)容，在Bootstrap框架中將這兩個(gè)部分組合起來稱為一個(gè)panel頁(yè)板，如右邊效果所示，他就有三個(gè)panel面板，將這三個(gè)面板組合在一起，就是一個(gè)面板組合 panel-group，也就是手風(fēng)琴的結(jié)構(gòu)。 簡(jiǎn)單點(diǎn)就是一個(gè)觸發(fā)器和一個(gè)折疊區(qū)： <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">觸發(fā)器</button> <div id="demo" class="collapse in">折疊區(qū)</div>查看全部
-
警告框結(jié)構(gòu)： <div class="alert " role="alert"> <buttonclass="close" type="button" >×</button> 恭喜您操作成功！ </div>查看全部
-
因?yàn)樵贐ootstrap中的JavaScript插件都是依賴于jQuery庫(kù)，所以不論是單獨(dú)導(dǎo)入還一次性導(dǎo)入之前必須先導(dǎo)入jQuery庫(kù)。查看全部
-
注意：在這個(gè)案例中不加入data-target="#panel1"也可以，因?yàn)榍懊嬉呀?jīng)有了href="#panel1"，但如是button按鈕作為觸發(fā)器就必須使用data-target="#panel1"語(yǔ)句了。查看全部
-
同樣的，選項(xiàng)卡也定義data屬性來觸發(fā)切換效果。當(dāng)然前提你也要先加載bootstrap.js或者是tab.js。聲明式觸發(fā)選項(xiàng)卡需要滿足以下幾點(diǎn)要求： 1、選項(xiàng)卡導(dǎo)航鏈接中要設(shè)置 data-toggle="tab" 2、并且設(shè)置 data-target="對(duì)應(yīng)內(nèi)容面板的選擇符(一般是ID)"; 如果是鏈接的話，還可以通過 href="對(duì)應(yīng)內(nèi)容面板的選擇符(一般是ID)" 主要起的作用是用戶點(diǎn)擊的時(shí)候能找到該選擇符所對(duì)應(yīng)的面板內(nèi)容 tab-pane。 3、面板內(nèi)容統(tǒng)一放在 tab-content 容器中，而且每個(gè)內(nèi)容面板 tab-pane 都需要設(shè)置一個(gè)獨(dú)立的選擇符（最好是ID）與選項(xiàng)卡中的 data-target 或 href 的值匹配。查看全部
舉報(bào)
0/150
提交
取消