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