-
在線自定義設置--Bootstrap組件
在 Bootstrap 組件設置這一部分，提供了公共樣式（Common CSS），UI 組件(Components)和?JavaScript 組件(JavaScript components)三個部分，如下圖所示：
每個部分都有對應的列表清單，在自定義配置時候，可以根據自己需求進行選擇，比如，我自己的 Bootstrap 框架中，不需要打印樣式、code、Glyphicons、等等，那么只需要不選中它們：
查看全部 -
自定義Bootstrap
使用?Bootstrap 框架的不方便：
很多時候在創建 Web 頁面或應用的時，需要自己獨立的 UI 界面效果，此時僅僅使用 Bootstrap 框架并不能滿足我們自身 UI 的需求，也造成要寫很多的樣式代碼來覆蓋 Bootstrap 框架提供的樣式代碼。如此一來，這也失去使用 Bootstrap 框架的意義。
很多同學會問，我要使用Bootstrap框架，而且還要讓其出來的 UI 界面效果能和滿足自己的UI設計效果。
解決方法：
在 Bootstrap 框架中提供多種方式來自定義 Bootstrap，讓 Bootstrap 框架適合自己的需求，接下來，簡單的向大家介紹怎樣自定義 Bootstrap 框架。
自定義Bootstrap框架主要有兩種方式來實現：
使用 CSS 預處理器語言
使用在線自定義設置
1.使用?CSS?預處理器語言
在學習 Bootstrap 框架的使用時，可以看到 Bootstrap 框架中很多組件的 UI 效果都有對應的 LESS 版本和 Sass 版本源碼。其實需要自定義 Bootstrap 框架，完全可以在這些組件的 LESS 或 Sass 源碼文件上進行修改，然后將修改好的源碼重新編譯出 bootstrap.css 文件，從而實現適合自己的 UI 界面風格。?
使用 CSS 預處理器語言來重新定義 Bootstrap 框架有一個前提條件，那就是開發人員會使用 LESS 或 Sass 預處理器語言，否則要在此基礎上實現 Bootstrap 框架自定義不是一件容易的事情。不過大家不用擔心，就算你不懂 LESS 或 Sass 也不用怕，可以通過在線自定義設置來實現自定義 Bootstrap 框架。
2.使用在線自定義設置
在Bootstrap框架的官網為大家提供了一個在線自定義 Bootstrap 框架的配置頁面?http://getbootstrap.com/customize/ ，可以通過這里進行配置。
在線自定義設置主要包括三個部分：
Bootstrap 組件
Bootstrap 插件
Bootstrap 的 LESS 版本變量設置
我們只需要根據自己的需求設置完成之后，點擊最底部的下載按鈕就可以得到自定義后的 Bootstrap 框架。
查看全部 -
固定定位--聲明式觸發固定定位
Affix 插件可以對任何元素進行固定定位，其中比較簡單的方法，就是通過自定義屬性?data?來觸發。其主要包括兩個參數：
1、data-spy：取值 affix，表示元素固定不變的。
2、data-offset：整數值，比如 90，表示元素 top 和 bottom 的值都是 90px，其包括兩種方式：data-offset-top?和?data-offset-bottom。
data-offset-top?用來設置元素距離頂部的距離。比如 90，表示元素距離頂部 90px，當用戶從頂部向下拖動滾動條，當滾動的距離大于 90px 時，affix 元素不再滾動，就會固定在瀏覽器窗口頂部。
data-offset-bottom?剛好與 data-offset-top 相反。
具體使用如下：
<div?data-spy="affix"?data-offset="90">affix元素</div>
分開設置 data-offset 值方式：
<div?data-spy="affix"?data-offset-top="90"?data-offset-bottom="150">affix元素</div>
我們來看一個簡單的示例：
<nav?class="navbar?navbar-default"?role="navigation">?????…?</nav>?<div?class="container">?????<div?class="row">?????????<div?class="col-md-3"?id="sidebarMenu">?????????????<ul?class="navnav-pills?nav-stacked"?data-spy="affix"?data-offset-top="20">??????????????????????…?????????????</ul>?????????</div>?????????<div?class="col-md-9">?????????????????…?????????</div>?????</div>?</div>
注意，在 body 要聲明滾動監控!!!!!!!!!!
<body data-spy="scroll" data-target="sidebarMenu">!!!!
運行效果如下：
注意，請在寬屏模式下查看效果。據我測試下來，使用聲明式，就算設置了 data-offset-top 的值也會失效，需要在樣式中給 affix 設置一個top值!!!!!，與 data-offset-top 值相等。data-offset-bottom一樣。
CSS 樣式中ul.nav-tabs.affix和 <ul>中 data-offset-top 沒有沖突嗎
最新回答 /?筑夢先生
data-offset-top=125 當頁面向上滾動超過125時 ul則不會跟著頁面繼續滾動。nav-tabs.affix {top：30px} ?則是定義ul的頁面位置。前者是設置滾動距離，后者是頁面top距離
查看全部 -
圖片輪播--JavaScript觸發方法
默認情況之下，如果 carousel 容器上定義了 data-ride="carousel" 屬性，頁面加載之后就會自動加載輪播圖片切換效果。如果沒有定義 data-ride 屬性，可以通過 JavaScript 方法來觸發輪播圖片切換。具體使用方法如下：
$(".carousel").carousel();也可以通過容器的 ID 來指定：
$("#slidershow").carousel();在 carousel() 方法中可以設置具體的參數，如：
屬性名稱
類型
默認值
描述
interval
number
5000
幻燈片輪換的等待時間（毫秒）。如果為false,輪播將不會自動開始循環
pause
string
hover
默認鼠標懸停留在幻燈片區域即停止播放，離開即開始播放
wrap
布爾值
true
輪播是否持續循環
使用時，在初始化插件的時候可以傳關相關的參數，如：
$("#slidershow").carousel({????????interval:?3000?});實際上，當我們給carousel()方法配置參數之后，輪播效果就能自動切換。但 Bootstrap 框架中的 carousel 插件還給使用者提供了幾種特殊的調用方法，簡單說明如下：
.carousel("cycle")：從左向右循環播放；
.carousel("pause")：停止循環播放；
.carousel("number")：循環到指定的幀，下標從0開始，類似數組；
.carousel("prev")：返回到上一幀；
.carousel("next")：下一幀
例如，前面的調用方法，向前和向后兩個按鈕還無法正常工作，其實可以通過 .carousel("prev") 和 .carousel("next") 方法讓他們能正常工作，代碼如下：
$(function(){?????$("#slidershow").carousel({?????????interval:2000?????});??????});查看全部 -
片輪播--聲明式觸輪播圖的播放（二）
除了data-ride="carousel"、data-slide、data-slide-to 以外，輪播組件還支持其他三個自定義屬性：
屬性名稱
類型
默認值
描述
data-interval
number
5000
幻燈片輪換的等待時間（毫秒）。如果為false,輪播將不會自動開始循環
data-pause
string
hover
默認鼠標懸停留在幻燈片區域即停止播放，離開即開始播放
data-wrap
布爾值
true
輪播是否持續循環
如下代碼實現“輪播不持續循環”和“輪播時間間隔為1秒”。
<div?id="slidershow"?class="carousel"?data-ride="carousel"?data-wrap="false"?data-interval="1000">????......?</div>
上面三個屬性可以在容器元素上定義，也可以在標示符（或左右控制鏈接）上定義，但是后者定義的優先級比較高。
查看全部 -
沒有實現。。
查看全部 -
圖片輪播--聲明式觸輪播圖的播放（一）
觸發輪播圖的播放方法也有兩種，一種是聲明式，另外一種是JavaScript方式。首先來看聲明式方法。
聲明式方法是通過定義 data 屬性來實現，data 屬性可以很容易地控制輪播的位置。其主要包括以下幾種：
data-ride 屬性：取值 carousel，并且將其定義在 carousel 上。
data-target 屬性：取值 carousel 定義的 ID 名或者其他樣式識別符，如前面示例所示，取值為“#slidershow”，并且將其定義在輪播圖計數器的每個 li 上!!!!!!最重要這個，是用容器的div的id?。。。?/strong>
data-slide 屬性：取值包括 prev，next，prev表示向后滾動，next 表示向前滾動。該屬性值同樣定義在輪播圖控制器的 a 鏈接上，同時設置控制器 href 值為容器 carousel 的 ID 名或其他樣式識別符。
data-slide-to 屬性：用來傳遞某個幀的下標，比如 data-slide-to="2"，可以直接跳轉到這個指定的幀（下標從0開始計），同樣定義在輪播圖計數器的每個 li 上。
基于上例，設置了自定義的 data 屬性之后如下：
<div?id="slidershow"?class="carousel"?data-ride="carousel">?<!--?設置圖片輪播的順序?-->?????<ol?class="carousel-indicators">?????????<li?class="active"?data-target="#slidershow"?data-slide-to="0"></li>?????????<li?data-target="#slidershow"?data-slide-to="1"></li>?????????<li?data-target="#slidershow"?data-slide-to="2"></li>?????????<li?data-target="#slidershow"?data-slide-to="3"></li>?????????<li?data-target="#slidershow"?data-slide-to="4"></li>?????????<li?data-target="#slidershow"?data-slide-to="5"></li>?????</ol>?????<!--?設置輪播圖片?-->?????<div?class="carousel-inner">?????…?????</div>?????<!--?設置輪播圖片控制器?-->?????<a?class="left?carousel-control"?href="#slidershow"?role="button"?data-slide="prev">?????????<span?class="glyphicon?glyphicon-chevron-left"></span>?????</a>?????<a?class="right?carousel-control"?href="#slidershow"?role="button"?data-slide="next">?????????<span?class="glyphicon?glyphicon-chevron-right"></span>?????</a>?</div>
在這里需要注意可以為 #slidershow 層添加 slide 樣式，使用圖片與圖片切換效果有平滑感。
<div?id="slidershow"?class="carousel?slide"?data-ride="carousel">???...?</div>
這樣頁面一加載就會有輪播效果了且單擊向前向后按鈕也可以切換圖片了：
<!-- data-ride="carousel" 屬性用于標記輪播在頁面加載時就開始動畫播放，無需使用初始化的js函數 -->
查看全部 -
圖片輪播--輪播圖片的設計（三）
第四步：設計輪播圖片控制器。很多時候輪播圖片還具有一個向前播放和向后播放的控制器。在 Carousel 中通過?carousel-control樣式配合 left 和 right 來實現。其中left表示向前播放，right表示向后播放。其同樣放在carousel容器內：
<div?id="slidershow"?class="carousel">?????<!--?設置圖片輪播的順序?-->?????<ol?class="carousel-indicators">????????…?????</ol>?????<!--?設置輪播圖片?-->?????<div?class="carousel-inner">?????????…?????</div>?????<!--?設置輪播圖片控制器?-->????/div>
這段代碼是放在inner的后面！
通過兩個 a 鏈接然后在內部定義要顯示的小圖標，一個是向前，一個是向后。
這兩個圖標都顯示在圖片容器的上面（z-index的值大于carousel-inner的）。
最終的效果如下：
上圖展示的就是 Bootstrap 框架中 Carousel 插件實現的圖片輪播的效果。只是上例展示的僅是設計效果，并不具備動畫效果，接下來我們一起來看如何觸發其播放效果。
?
查看全部 -
圖片輪播--輪播圖片的設計（二）
第三步：設計輪播圖片播放區。輪播圖整個效果中，播放區是最關鍵的一個區域，這個區域主要用來放置需要輪播的圖片。這個區域使用?carousel-inner?樣式來控制，而且其同樣放置在?carousel?容器內，并且通過?item?容器來放置每張輪播的圖片：
<div?id="slidershow"?class="carousel">?????<!--?設置圖片輪播的順序?-->???class=">?????????<li?class="active">1</li>?????????…?????</ol>?????<!--?設置輪播圖片?-->?????<div?class=>?????????<div?class=">?????????????<a?href="##"><img?src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"?alt=""></a>?????????</div>?????????<div?class="item">?????????????<a?href="##"><img?src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"?alt=""></a>?????????</div>?????????…?????????<div?class="item">?????????????<a?href="##"><img?src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg"?alt=""></a>?????????</div>?????</div>?</div>
其主要通過 carousel-inner 來控制其樣式呈現。
運行效果如下：
上面顯示的圖片區只實現了圖片播放，但很多輪播圖片效果，在每個圖片上還對應有自己的標題和描述內容。其實 Bootstrap 框架中的 Carousel 也提供類似的效果。只需要在 item 中圖片底部添加對應的代碼：
<div?id="slidershow"?class="carousel">?????<!--?設置圖片輪播的順序?-->?????<ol?class="carousel-indicators">?????????<li?class="active">1</li>?????…?????</ol>?????<!--?設置輪播圖片?-->?????<div?class="carousel-inner">?????????<div?class="item?active">?????????????<a?href="##"><img?src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"?alt=""></a>?????????????<!--?圖片對應標題和描述內容?-->????????????class">???????????????????????</div>?????????</div>?????…?????</div>?</div>
運行效果如下：
查看全部 -
圖片輪播--輪播圖片的設計（一）
一個輪播圖片主要包括三個部分：
? ?輪播的圖片
? ?輪播圖片的計數器
? ?輪播圖片的控制器
復雜一點的輪播圖片，每個輪播區會帶有對應的標題和描述內容。那么在 Bootstrap 框架中，輪播圖是如何設計的呢？
第一步：設計輪播圖片的容器。在 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>?????????...?????</ol></div>
查看全部 -
手風琴--聲明式觸發手風琴（三）
第五步，激活手風琴交互行為。要完成交互行為，需要在標題鏈接中自定義兩個屬性，一個是data-toggle，并且取值為collapse；另一個是data-target，取值為各個面板內容區的標識符，比如說ID，在這個例子分別是#panel1、#panel2和#panel3：
<div?class="panel?panel-accordion?panel-default">?????<div?class="panel-heading">?????????<h4?class="panel-title"><a?href="#panel1"?data-toggle="collapse"?data-target="#panel1">標題一</a></h4>?????</div>?????<div?class="panel-collapse?collapse?in"?id="panel1">?????????<div?class="panel-body">折疊區內容...</div>?????</div>?</div>
到此，實現了單個面板的“顯示/隱藏”的切換。但離手風琴效果還略有差距。
注意：在這個案例中不加入
data-target="#panel1"也可以，因為前面已經有了href="#panel1"，但如是button按鈕作為觸發器就必須使用data-target="#panel1"語句了。第六步，定義data-parent!!!!!屬性，實現點擊一個其中一個元素時，關閉所有的折疊區，再打開所單擊的區域（如果所單擊區域是展示的，則會關閉）。這個data-parent取值與手風琴面板容器的標識符相匹配，因為涉及到全部元素的，所以得與div這個大容器中id相匹配?。。?/strong>比如這個例子是指?#myAccordion：
<div?class="panel-group"?id="">?????<div?class="panel?panel-accordion?panel-default">?????????<div?class="panel-heading">?????????????<h4?class="panel-title">?????????????????<a?href="#panel1"?data-toggle="collapse"?data-target="#panel1"?>標題一</a>?????????????</h4>?????????</div>?…
最終效果如下：
通過示例，我們可以看出以下幾點：
??使用?panel?的?panel-title?做為觸元素，使用panel-body的父元素作為折疊區；???使用一個?panel-group?來包含多個?panel，從而實現手風琴效果；???；???觸發元素需要指定?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">?????????????class="panel-title"></h4>?????????</div>?????????<div?class="panel-collapse"?id="panel1">?????????????<div?class="panel-body">折疊區內容...</div>?????????</div>?????</div>?????<div?class="panel?panel-accordion?panel-default">?????????<div?class="panel-heading">?????????????<h4?class="panel-title"><a?href="#panel2">標題二</a></h4>?????????</div>?????????<div?class="panel-collapse"?id="panel2">?????????????<div?class="panel-body">折疊區內容...</div>?????????</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"?id="panel1">?????????<div?class="panel-body">折疊區內容...</div>?????</div>?</div>
此時你會看到效果如下圖所示：
每個面板的內容區都被隱藏起來了，變成不可視，但有時候希望默認第一個面板內容是可視的，需要怎么辦？其實Bootstrap作者早就為大家做了這方面的考慮，你只需要在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?"?id="panel1">?????????<div?class="panel-body">折疊區內容...</div>?????</div>?</div>
效果如下：
查看全部 -
手風琴--聲明式觸發手風琴（一）
觸發手風琴可以通過自定義的?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，也就是手風琴的結構。如：
<div?class="panel-group"?id="accordion">?????<div?class="panel?panel-default">?????????<div?class="panel-heading">?????????????<h4?class="panel-title"><a?data-toggle="collapse"?data-parent="#accordion"?href="#collapseOne">標題一</a></h4>?????????</div>?????????<div?id="collapseOne"?class="panel-collapse?collapse?in">?????????????<div?class="panel-body">標題一對應的內容</div>?????????</div>?????</div>?????<div?class="panel?panel-default">?????????<div?class="panel-heading">?????????????<h4?class="panel-title"><a?data-toggle="collapse"?data-parent="#accordion"?href="#collapseTwo">標題二</a></h4>?????????</div>?????????<div?id="collapseTwo"?class="panel-collapse?collapse">?????????????<div?class="panel-body">標題二對應的內容</div>?????????</div>?????</div>?????<div?class="panel?panel-default">?????????<div?class="panel-heading">?????????????<h4?class="panel-title"><a?data-toggle="collapse"?data-parent="#accordion"?href="#collapseThree">標題三</a></h4>?????????</div>?????????<div?id="collapseThree"?class="panel-collapse?collapse">?????????????<div?class="panel-body">標題三對應的內容</div>?????????</div>?????</div>?</div>
簡單點就是一個觸發器和一個折疊區：
<button?type="button"?class="btn?btn-danger"?data-toggle="collapse"?data-target="#demo">觸發器</button>?<div?id="demo"?class="collapse?in">折疊區</div>
?
查看全部 -
按鈕插件--JavaScript用法
除了上面介紹的屬性聲明使用方法之外，按鈕插件還可以通過調用button函數，然后給button函數傳入具體的參數，實現不同的效果。而其中有兩個參數是固定不變的，即toggle和reset。其他的都可以隨意定義：
1、切換按鈕狀態（得到焦點）：$("#mybutton").button2、重新恢復按鈕：
$("#mybutton").如下代碼：
$(function()?{???????$("#mybutton").click(function(){??????????$(this)..delay(1000).{?????????????$(this?????});???????????????});?});3、任意參數：
$("#mybutton").button("任意字符參數名")上面代碼作用：替換?data-任意字符參數名-text?的屬性值為“按鈕上顯示的文本值”。如下代碼：
html:
<button?type="button"?data-toggle="button"?class="btn?btn-primary"?id="mybutton"?data-complete-text="Loading?finished"?>確認</button>
js代碼：
?$(function()?{???????$("#mybutton").click(function(){??????????$(this).).delay(1000)(function()?{?????????????$(this));??????????});???????????????});??});查看全部
舉報