什麼是Bootstrap?
Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JavaScript 的，它簡潔靈活，使得 Web 開發更加快捷。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發，是一個CSS/HTML框架。Bootstrap提供了優雅的HTML和CSS規範，它即是由動態CSS語言Less寫成。
- bootstrap如何禁止響應式佈局？
-
- 移除 此 CSS 文檔中提到的設置瀏覽器視口（viewport）的標籤：<meta>。
- 通過爲 .container 類設置一個 width 值從而覆蓋框架的默認 width 設置，例如 width: 970px !important; 。請確保這些設置全部放在默認的 Bootstrap CSS 文件的後面。注意，如果你把它放到媒體查詢中，也可以略去 !important 。
- 如果使用了導航條，需要移除所有導航條的摺疊和展開行爲。
- 對於柵格佈局，額外增加 .col-xs-* 類或替換掉 .col-md-* 和 .col-lg-*。 不要擔心，針對超小屏幕設備的柵格系統能夠在所有分辨率的環境下展開。
- 針對 IE8 仍然需要額外引入 Respond.js 文件（由於仍然利用了瀏覽器對媒體查詢（media query）的支持，因此還需要做處理）。這樣就禁用了 Bootstrap 對移動設備的響應式支持。
-
- Bootstrap 柵格系統的工作原理
- “行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便爲其賦予合適的排列（aligment）和內補（padding）。
- 通過“行（row）”在水平方向創建一組“列（column）”。
- 你的內容應當放置於“列（column）”內，並且，只有“列（column）”可以作爲行（row）”的直接子元素。
- 類似 .row 和 .col-xs-4 這種預定義的類，可以用來快速創建柵格佈局。Bootstrap 源碼中定義的 mixin 也可以用來創建語義化的佈局。
- 通過爲“列（column）”設置 padding 屬性，從而創建列與列之間的間隔（gutter）。通過爲 .row 元素設置負值 margin 從而抵消掉爲 .container 元素設置的 padding，也就間接爲“行（row）”所包含的“列（column）”抵消掉了padding。
- 負值的 margin就是下面的示例爲什麼是向外突出的原因。在柵格列中的內容排成一行。
- 柵格系統中的列是通過指定1到12的值來表示其跨越的範圍。例如，三個等寬的列可以使用三個 .col-xs-4 來創建。
- 如果一“行（row）”中包含了的“列（column）”大於 12，多餘的“列（column）”所在的元素將被作爲一個整體另起一行排列。
- 柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 並且針對小屏幕設備覆蓋柵格類。 因此，在元素上應用任何 .col-md-* 柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 並且針對小屏幕設備覆蓋柵格類。 因此，在元素上應用任何 .col-lg-* 不存在， 也影響大屏幕設備。
- bootstrap的柵格系統爲什麼是12列，而不是其他的，比如18列，24列等等。採用12列有什麼好處？
因爲12是1，2，3，4，6的最小公倍數，所以12列柵格系統相對較靈活，支持將一行分成1列，2列，3列，4列，6列。若是想要支持5列，那1，2，3，4，5的最小公倍數是60，而60這個數對於柵格系統來說顯然太大了。18能均分4列不？24能做的12都能做，所以12是最好的選擇。
- container 和 container-fluid的區別？
container 類和container-fluid類的區別體現在是否有隨視口寬度改變的margin存在。
container類所謂的自適應也是通過margin的改變來完成，container-fluid類的百分百寬度是指在固有的15px的padding前提下寬度總是當前視口的寬度。
- 說明Bootstrap包結構？
- Dist：包含了預編譯包內的所有文件
- Docs：參考文檔
- Fonts：存儲字體圖標文件
- Js：存儲各種jQuery插件和交互行爲所需要的js腳本文件
- Less：存儲所有CSS動態腳本文件
- Bootstrap柵格系統？
- Bootstrap內置了一套響應式、移動設備優先的流式柵格系統，隨着屏幕設備或視口（viewport）尺寸的增加，系統會自動分爲最多12列。
- 我在這裏是把Bootstrap中的柵格系統叫做佈局。它就是通過一系列的行（row）與列（column）的組合創建頁面佈局，然後你的內容就可以放入到你創建好的佈局當中。下面就簡單介紹一下Bootstrap柵格系統的工作原理：
- 網格系統的實現原理非常簡單，僅僅是通過定義容器大小，平分12份(也有平分成24份或32份，但12份是最常見的)，再調整內外邊距，最後結合媒體查詢，就製作出了強大的響應式網格系統。Bootstrap框架中的網格系統就是將容器平分成12份。
- 在使用的時候大家可以根據實際情況重新編譯LESS（或Sass）源碼來修改12這個數值（也就是換成24或32，當然你也可以分成更多，但不建議這樣使用）。
- 使用bootstrap如何在手機端隱藏一個模塊？
visible-md-8 hidden-xs
中屏（>=992px）顯示，超小屏幕（<768px）隱藏
9、 爲什麼使用 Bootstrap?
移動設備優先：自 Bootstrap 3 起，框架包含了貫穿於整個庫的移動設備優先的樣式。
瀏覽器支持：所有的主流瀏覽器都支持 Bootstrap。Internet Explorer Firefox Opera Google Chrome Safari
容易上手：只要您具備 HTML 和 CSS 的基礎知識，您就可以開始學習 Bootstrap。
響應式設計：Bootstrap 的響應式 CSS 能夠自適應於臺式機、平板電腦和手機。更多有關響應式設計的內容詳見 Bootstrap 響應式設計。
10、bootstrap3.x使用哪四種柵格選項來形成柵格系統，並說明四種柵格選項之間的區別
就是適合不同尺寸的屏幕設備。以class前綴命名這四種柵格選項，分別是col-xs、col-sm、col-md、col-lg:
lg是large的縮寫，大屏幕：桌面 (≥1200px)
md是mid的縮寫，中等屏幕：桌面 (≥992px)
sm是small的縮寫，小屏幕：平板 (≥768px)
xs是extremely small的縮寫，超小屏幕：手機 (<768px)
11、 Bootstrap UI 編輯器有哪些？
1）Bootstrap Magic
這是一個 Bootstrap 主題生成器，使用最新的 Bootstrap 3 版本和 Angular JS 版本，提供一個鮮活的用戶修改預覽。它包括了各種各樣的導入，一個顏色選擇器和智能的預先輸入。更神奇的是，Bootstrap 會根據用戶的每個選擇來重新建立框架，方便用戶的下載和使用。
2）BootSwatchr
BootSwatchr 是由 Drew Strickiand 獨立開發和維護的，是唯一支持從右到左語言顯示的 Bootstrap 自定義構建工具，這也是它的特色之一。BootSwatchr 是個可視化的工具，可以從底層開始創建 Bootstrap 主題。
3）Bootstrap Live Editor
Bootstrap Live Editor 是個所見即所得的構建 Bootstrap 的編輯器。在 Bootstrap 準備好的內容和代碼片段的基礎上提供一個又好又優雅的方法來編輯和美化 html，也因此它是個明智的選擇。除此之外，它還包括高級的選項比如按鈕配置，自定義標籤和爲用戶做最明智最有益的選擇。
4）4Fancy Boot
Fancyboot 是個非常有用的 Bootstrap 自定義工具，允許用戶編輯 Bootstrap 的配置，自動預覽他們的修改結果。通過滑動菜單可以選擇需要使用的插件和組件。當用戶做好了相應的修改，可以下載一個包含用戶所使用的 jQuery 插件的編譯好的和簡化後的 CSS 文件。
5）Style Bootstrap
Style Bootstrap 是個非常棒的內置瀏覽器的 GUI 實用工具，幫助用戶自定義 Twitter Bootstrap 外觀。它非常容易進行自定義操作。從 body 風格，字體排版，按鈕，導航，格式，通知提示和其他用戶很容易根據自己的意願自定義的元素。除了強大的自定義功能，它還可以很容易生成可下載的 CSS 文件
6）Lavish
7）Bootstrap ThemeRoller
8）Pingendo
12、 Bootstrap CSS編碼規範
- 用兩個空格來代替製表符（tab） -- 這是唯一能保證在所有環境下獲得一致展現的方法。
- 爲選擇器分組時，將單獨的選擇器單獨放在一行。
- 爲了代碼的易讀性，在每個聲明塊的左花括號前添加一個空格。
- 聲明塊的右花括號應當單獨成行。
- 每條聲明語句的 : 後應該插入一個空格。
- 爲了獲得更準確的錯誤報告，每條聲明都應該獨佔一行。
- 所有聲明語句都應當以分號結尾。最後一條聲明語句後面的分號是可選的，但是，如果省略這個分號，你的代碼可能更易出錯。
- 對於以逗號分隔的屬性值，每個逗號後面都應該插入一個空格（例如，box-shadow）。
- 不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的內部的逗號後面插入空格。這樣利於從多個屬性值（既加逗號也加空格）中區分多個顏色值（只加逗號，不加空格）。
- 對於屬性值或顏色參數，省略小於 1 的小數前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。
- 十六進制值應該全部小寫，例如，#fff。在掃描文檔時，小寫字符易於分辨，因爲他們的形式更易於區分。
- 儘量使用簡寫形式的十六進制值，例如，用 #fff 代替 #ffffff。
- 爲選擇器中的屬性添加雙引號，例如，input[type="text"]。只有在某些情況下是可選的，但是，爲了代碼的一致性，建議都加上雙引號。
- 避免爲 0 值指定單位，例如，用 margin: 0; 代替 margin: 0px;。
13、 Bootstrap HTML編碼規範
- 用兩個空格來代替製表符（tab） -- 這是唯一能保證在所有環境下獲得一致展現的方法。
- 嵌套元素應當縮進一次（即兩個空格）。
- 對於屬性的定義，確保全部使用雙引號，絕不要使用單引號。
- 不要在自閉合（self-closing）元素的尾部添加斜線 -- HTML5 規範中明確說明這是可選的。
- 不要省略可選的結束標籤（closing tag）（例如，</li> 或 </body>）。
14、 Bootstrap的按鈕有哪些風格？
15、 使用bootstrap的文字圖標需要注意什麼？
1）出於性能的考慮，所有圖標都需要一個基類和對應每個圖標的類。把下面的代碼放在任何地方都可以正常使用。注意，爲了設置正確的內補（padding），務必在圖標和文本之間添加一個空格。
2）不要和其他組件混合使用
圖標類不能和其它組件直接聯合使用。它們不能在同一個元素上與其他類共同存在。應該創建一個嵌套的 <span> 標籤，並將圖標類應用到這個 <span> 標籤上。
3）只對內容爲空的元素起作用
圖標類只能應用在不包含任何文本內容或子元素的元素上。
16、 如何改變圖標字體文件的位置
Bootstrap 假定所有的圖標字體文件全部位於 ../fonts/ 目錄內，相對於預編譯版 CSS 文件的目錄。如果你修改了圖標字體文件的位置，那麼，你需要通過下面列出的任何一種方式來更新 CSS 文件：
- 在 Less 源碼文件中修改 @icon-font-path 和/或 @icon-font-name 變量。
- 利用 Less 編譯器提供的 相對 URL 地址選項。
- 修改預編譯 CSS 文件中的 url() 地址。
根據你自身的情況選擇一種方式即可。
17、 如何選擇bootstrap中javaScript插件的單個引入和全部引入？
JavaScript 插件可以單個引入（使用 Bootstrap 提供的單個 *.js 文件），或者一次性全部引入（使用 bootstrap.js 或壓縮版的 bootstrap.min.js）。
1）建議使用壓縮版的 JavaScript 文件
bootstrap.js 和 bootstrap.min.js 都包含了所有插件，你在使用時，只需選擇一個引入頁面就可以了。
2）插件之間的依賴關係
某些插件和 CSS 組件依賴於其它插件。如果你是單個引入每個插件的，請確保在文檔中檢查插件之間的依賴關係。注意，所有插件都依賴 jQuery （也就是說，jQuery必須在所有插件之前引入頁面）。 bower.json 文件中列出了 Bootstrap 所支持的 jQuery 版本。
18、如何解決bootstrap導航條內所包含元素溢出問題
- 減少導航條內所有元素所佔據的寬度。
- 在某些尺寸的屏幕上（利用 響應式工具類）隱藏導航條內的一些元素。
- 修改導航條在水平排列和摺疊排列互相轉化時，觸發這個轉化的最小屏幕寬度值。可以通過修改 @grid-float-breakpoint 變量實現，或者自己重寫相關的媒體查詢代碼，覆蓋 Bootstrap 的默認值。
19、navbar-fixed-bottom和navbar-static-top的區別？
添加 .navbar-fixed-bottom 類可以讓導航條固定在底部，並且還可以包含一個 .container 或 .container-fluid 容器，從而讓導航條居中，並在兩側添加內補（padding）。
添加 .navbar-static-top 類即可創建一個與頁面等寬度的導航條，它會隨着頁面向下滾動而消失。還可以包含一個 .container 或 .container-fluid 容器，用於將導航條居中對齊並在兩側添加內補（padding）。
與 .navbar-fixed-* 類不同的是，你不用給 body 添加任何內補（padding）。
.navbar-fixed-bottom需要爲 body 元素設置內補（padding）這個固定的導航條會遮住頁面上的其它內容，除非你給 <body> 元素底部設置了 padding。用你自己的值，或用下面給出的代碼都可以。提示：導航條的默認高度是 50px。如：body { padding-bottom: 70px; }
20、bootstrap有哪些狀態類可以爲行或單元格設置顏色
