Bootstrap起步介紹

時間 2019-11-08

標籤 bootstrap 起步介紹欄目 Bootstarp 简体版

原文原文鏈接

起步

簡要介紹Bootstrap,以及如何下載、使用，還有基本模板案例等等.css

下載

下載bootstrap有三種形式.html

用於生產環境的Bootstrap

編譯並壓縮後的Css、Javascript和字體文件.不包含文檔和源文件.html5

Bootstrap基於Less的源碼

Less、Javascript和字體的源文件,而且帶有文檔，須要Less編譯後方可用於生產環境.jquery

Bootstrap基於Sass的源碼

Sass、Javascript和字體的源文件,而且帶有文檔，須要Sass編譯後方可用於生產環境.android

安裝

經過Bower進行安裝

bower install bootstrap

經過npm進行安裝

npm install bootstrap

文件目錄

預編譯版

bootstrap/ios

glyphicons-halflings-regular.eotnginx
glyphicons-halflings-regular.svggit
glyphicons-halflings-regular.ttf程序員
glyphicons-halflings-regular.woffgithub
glyphicons-halflings-regular.woff2
bootstrap.js
bootstrap.min.js
bootstrap.css
bootstrap.css.map
bootstrap.min.css
bootstrap-theme.css
bootstrap-theme.css.map
bootstrap-theme.min.css

css/
js/
fonts/

Less源碼

bootstrap/

examples/
css/
js/
fonts/
less/
js/
fonts/
dist/
docs/

Less源碼的編譯

在程序員須要對Bootstrap進行定製時咱們會用到Less源碼的編譯,Bootstrap使用Grunt做爲編譯系統.對grunt還不瞭解的能夠到http://gruntjs.com/先了解一下.這裏編譯須要用到的命令以下:

grunt dist

從新生成/dist/目錄,並將編譯壓縮後的Css和Javascript放入這個目錄中.做爲一名Bootstrap用戶,大部分狀況你只須要執行這個命令.

grunt watch

監測Less源碼文件的改變,並自動從新將其編譯爲Css文件.

grunt test

在PhantomJS環境中運行JSHint和QUnit自動化測試用例.

grunt docs

編譯並測試CSS、Javascript和其餘資源文件.在本地環境下經過jekyll serve運行Bootstrap文檔時須要用到這些資源文件.

grunt

編譯並壓縮CSS和Javascript文件、構建文檔站點、對文檔作html5校驗、從新生成定製工具所需的資源文件等.都須要jekyll工具.這些只有你對Bootstrap深度研究時纔有用.

基本模板

<!DOCTYPE html><html lang="zh-CN"><head>
    <meta charset="UTF-8"/>
    <meta http-equiv='X-UA-Compatible' content="IE=edge"/>
    <meta name='viewport' content='width=device-width,initial-scale=1'/>
    <title>Bootstrap Template</title>
    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css"/></head><body>
    <h1>hello world!</h1>
    <script src='../bower_components/jquery/dist/jquery.js'></script></body></html>

禁止響應式佈局

Bootstrap會自動幫你針對不一樣的屏幕尺寸調整你的頁面.使其在個個尺寸的屏幕上表現良好.下面咱們列出瞭如何禁用這一特性.

移除設置瀏覽器視口的標籤：<meta>
經過爲.container類設置一個width值從而覆蓋框架的默認width設置,例如width:970px !important;.請確保這些設置所有放在默認的Bootstrap Css文件的後面.
若是使用了導航條,須要移除全部導航條的摺疊和展開行爲.
對於柵格系統佈局，額外增長.col-xs-*類或替換掉.col-md-*和.col-lg-*.針對超小屏幕設備的柵格系統可以在全部分辨率的環境下展開.

瀏覽器和設備的支持狀況

被支持的瀏覽器

在Windows平臺下,咱們支持ie8+.

Bootstrap在Chromium和Linux版Chrome、Linux版Firefox和IE7上的表現也很不錯,雖然咱們不對其進行官方支持.

IE8和IE9是被支持的,然而，你要知道不少CSS3屬性和HTML5元素(例如,圓角,矩形和投影)是不被支持的.另外,IE8須要Respond.js配合才能實現對媒體查詢的支持

IE8與Respond.js

Respond.js與Css文件不在同一域下時須要額外的設置.請參考respond.js文檔獲取更多信息.
Respond.js在file://協議下無效
Respond.js對經過@import 引入的css無效.

IE8與box-sizing

當box-sizing:border-box;與min-width max-width min-height max-height一塊兒使用時,IE8不能徹底支持box-sizing屬性.因爲此緣由，從BootstrapV3.0.1版本開始,咱們再也不爲.container賦予max-width屬性.

IE8與@font-face

當@font-face與:before在IE8下共同使用時會出現問題.因爲BootStrap對Glyphicons的樣式設置使用了這一組合方式,若是某個頁面被瀏覽器緩存了,而且此頁面不是經過點擊刷新按鈕或經過iframe加載的,那麼就會致使字體文件還沒有加載的狀況下就開始繪製此頁面.當鼠標滑過頁面時，頁面上的某些圖標就會顯現，鼠標滑過其餘沒有顯現的圖標時,這些圖標就能顯示出來了.

IE兼容模式

Bootstrap不支持IE古老的兼容模式.爲讓IE有更好的渲染,建議將下面標籤添加到頁面中:

<meta http-equiv='X-UA-Compatible' content='IE=edge'/>

360極速模式

將下面代碼添加到頁面中：

<meta name='renderer' content="webkit"/>

模態框、導航條和虛擬鍵盤.

超出範圍和滾動

body元素在ios和android上對overflow:hidden的支持頗有限,致使的結果就是在這兩種設備上的瀏覽器，當你滾動屏幕超過模態框的頂部或底部時,body中的內容開始隨着滾動.

虛擬鍵盤

若是你正在使用fixed定位的導航條或在模態框上面使用輸入框,還會遇到IOS在頁面繪製上的bug.當觸發虛擬鍵盤後，其不會更新fixed定位的元素,這裏有幾種解決方案.包括將fixed定位轉換爲position:absolute定位.或者啓動一個定時器手工修正組件的位置.

導航條上的下拉菜單

在IOS設備上,用於導航組件的複雜的z-indexing屬性，.dropdown-backdrop元素並未被使用.所以,爲了關閉導航條上的下拉菜單，必須直接點擊下拉菜單上的元素(或者任何其餘可以觸發IOS上click事件的元素).

移動設備上應用 :hover/:focus

儘管在大多數觸屏上沒有真正的懸停狀態,大多數移動設備瀏覽器模擬了懸停（hover）狀態並讓:hover狀態多展示一下子.換句話說,輕觸元素後開始應用:hover樣式,而且在用戶輕觸其餘的元素以後中止應用:hover樣式.在這些瀏覽器中，Bootstrap的hover狀態可能不是你所指望的.某些移動瀏覽器中的:focus狀態也存在一樣的問題.對於這些問題，除了徹底清除這些樣式,目前尚未簡單的解決方法.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。