前端框架之bootstrap

時間 2019-11-20

原文原文鏈接

1、bootstrap按鈕

一、按鈕

<button class="btn btn-default">按鈕</button>
<button class="btn btn-primary">button按鈕</button>
<button class="btn btn-info">按鈕</button>
<button class="btn btn-success">按鈕</button>
<button class="btn btn-warning">按鈕</button>
<button class="btn btn-danger">按鈕</button>
<a class="btn btn-danger" href="#">a標籤按鈕</a>

二、按鈕組

<div class="btn-group">
    <button class="btn btn-default">button按鈕</button>
    <button class="btn btn-primary">button按鈕</button>
    <button class="btn btn-info">button按鈕</button>
    <button class="btn btn-success">button按鈕</button>
    <button class="btn btn-warning">button按鈕</button>
    <button class="btn btn-danger">button按鈕</button>
</div>

三、通欄按鈕

<button class="btn btn-success btn-block">通欄按鈕</button>javascript

四、通欄按鈕組

a、通欄按鈕組，若是用input標籤或者button標籤，須要將它用btn-group的容器包起來。css

b、若是用a標籤作按鈕，就不用上面的結果，直接寫html

2、 bootstrap表單

一、表單

<form class="form">
    <div class="form-group">
        <label for="username">用戶名：</label>
        <input type="text" id="username" class="form-control">
    </div>
    <div class="form-group">
        <label for="password">密碼：</label>
        <input type="password" id="password" class="form-control">
    </div>
</form>

二、內聯表單

爲 <form> 元素添加 .form-inline 類可以使其內容左對齊而且表現爲 inline-block 級別的控件。只適用於視口（viewport）至少在 768px 寬度時（視口寬度再小的話就會使表單摺疊）。前端

可能須要手動設置寬度、必定要添加 `label` 標籤（若是不想讓其顯示，能夠經過爲 `label` 設置 `.sr-only` 類將其隱藏。）

三、水平排列的表單

經過爲表單添加 .form-horizontal 類，並聯合使用 Bootstrap 預置的柵格類，能夠將 label 標籤和控件組水平並排佈局。這樣作將改變 .form-group 的行爲，使其表現爲柵格系統中的行（row），所以就無需再額外添加 .row 了。java

四、表單控件組

3、bootstrap圖片

一、響應式圖片：img-responsive

經過給圖片添加.img-responsive類可讓圖片支持響應式佈局。其實質上是爲圖片設置了max-width:100%;和height:auto;屬性，從而讓圖片在其父元素中更好的縮放。

二、圖片形狀

經過爲<img>元素添加如下相應的類，可讓圖片呈現不一樣的形狀跨瀏覽器兼容性請時刻牢記：IE8不支持CSS3中的圓角屬性。node

4、bootstrap字體圖標

經過字體代替圖標，font文件夾須要和css文件夾在同一目錄linux

<button class="btn btn-danger"><span class="glyphicon glyphicon-music"></span>音樂</button>

5、bootstrap導航條

一、聲明導航條：navbar git

二、聲明默認的導航條：navbar-default github

三、聲明反白的的導航條樣式 navbar-inverseweb

四、去掉導航條的圓角： navbar-static-top

五、固定到頂部的導航條：navbar-fixed-top

六、固定到底部的導航條：navbar-fixed-bottom

七、申明logo容器：navbar-header

八、針對logo等固定內容的樣式：navbar-brand

九、定義導航條中的菜單：nav navbar-nav

十、定義導航條中的表單：navbar-form

<div class="navbar navbar-default navbar-inverse navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <div class="navbar-toggle" data-toggle="collapse" data-target="#togglemenu">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </div>
            <a href="" class="navbar-brand">
                LOGO
            </a>
        </div>
        <div class="collapse navbar-collapse" id="togglemenu">
            <ul class="nav navbar-nav">
                <li><a href="javascript:void(0);">首頁</a></li>
                <li><a href="javascript:void(0);">公司新聞</a></li>
                <li><a href="javascript:void(0);">行業動態</a></li>
                <li><a href="javascript:void(0);">招賢納才</a></li>
                <li><a href="javascript:void(0);">關於咱們</a></li>
            </ul>
            <form class="navbar-form navbar-right">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" class="form-control">
                        <span class="input-group-btn">
                            <button class="btn btn-default">
                                <span class="glyphicon glyphicon-search"></span>
                            </button>
                        </span>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

路徑導航

<ol class="breadcrumb">
    <li><a href="#">首頁</a></li>
    <li><a href="#">新聞動態</a></li>
    <li class="active">新聞詳情</li>
</ol>

巨幕（相似於banner圖）jumbotron

6、bootstrap模態框

一、聲明一個模態框：modal

二、定義模態塊的尺寸：modal-dialog

三、定義大尺寸的模態框：modal-lg

四、定義小尺寸的模態框：modal-sm

五、modal-header

六、modal-body

七、modal-footer

<button id="btn1" class="btn btn-danger" data-toggle="modal" data-target="#modal1">大模態框</button>

<div class="modal" id="modal1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
                提示
            </div>
            <div class="modal-body">
                <p>姓名不能爲空</p>
            </div>
            <div class="modal-footer">
                <button class="btn">肯定</button>
                <button class="btn btn-warning " data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

7、bootstrap下拉菜單

用於顯示連接列表的可切換、有上下文的菜單。下拉菜單的 JavaScript 插件讓它具備了交互性。

<div class="dropdown">
    <div class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        請選擇城市
        <span class="caret"></span>
    </div>
    <ul class="dropdown-menu">
        <li><a href="javascript:void(0);">北京</a></li>
        <li><a href="javascript:void(0);">上海</a></li>
        <li><a href="javascript:void(0);">杭州</a></li>
    </ul>
</div>

8、bootstrap隱藏類

一、hidden-xs

二、hidden-sm

三、hidden-md

四、hidden-lg

詳細內容請見官網文檔：http://v3.bootcss.com/

Bootstrap 使用 Grunt 做爲編譯系統，而且對外提供了一些方便的方法用於編譯整個框架。下面講解的就是如何編譯源碼、運行測試用例等內容。

一、安裝 Grunt

安裝 Grunt 前，你須要首先下載並安裝 node.js （npm 已經包含在內）。npm 是 node packaged modules 的簡稱，它的做用是基於 node.js 管理擴展包之間的依賴關係。

而後在命令行中輸入如下命令：

在全局環境中安裝 grunt-cli ：npm install -g grunt-cli 。
進入 /bootstrap/ 根目錄，而後執行 npm install 命令。npm 將讀取 package.json 文件並自動安裝此文件中列出的全部被依賴的擴展包。

上述步驟完成後，你就能夠運行 Bootstrap 所提供的各個 Grunt 命令了。

二、可用的 Grunt 命令

`grunt dist` （僅編譯 CSS 和 JavaScript 文件）

從新生成 /dist/ 目錄，並將編譯壓縮後的 CSS 和 JavaScript 文件放入這個目錄中。做爲一名 Bootstrap 用戶，大部分狀況下你只須要執行這一個命令。

`grunt watch` （監測文件的改變，並運行指定的 Grunt 任務）

監測 Less 源碼文件的改變，並自動從新將其編譯爲 CSS 文件。

`grunt test` （運行測試用例）

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

`grunt docs` （編譯並測試文檔中的資源文件）

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

`grunt` （從新構建全部內容並運行測試用例）

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

三、除錯

若是你在安裝依賴包或者運行 Grunt 命令時遇到了問題，請首先刪除 npm 自動生成的 /node_modules/ 目錄，而後，再次運行 npm install 命令。

10、瞭解less（中文網：http://lesscss.cn/）

一、一種動態樣式語言.

LESS 將 CSS 賦予了動態語言的特性，如變量，繼承，運算，函數. LESS 既能夠在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也能夠藉助Node.js或者Rhino在服務端運行。

二、在客戶端使用

引入你的 .less 樣式文件的時候要設置 rel 屬性值爲「stylesheet/less」:

　　<link rel="stylesheet/less" type="text/css" href="styles.less">

而後點擊頁面頂部download按鈕下載 less.js, 在<head> 中引入:

　　<script src="less.js" type="text/javascript"></script>

注意你的less樣式文件必定要在引入less.js前先引入。

備註：請在服務器環境下使用！本地直接打開可能會報錯！

三、變量

變量容許咱們單獨定義一系列通用的樣式，而後在須要的時候去調用。因此在作全局樣式調整的時候咱們可能只須要修改幾行代碼就能夠了。

四、混合

混合能夠將一個定義好的class A輕鬆的引入到另外一個class B中，從而簡單實現class B繼承class A中的全部屬性。咱們還能夠帶參數地調用，就像使用函數同樣。

五、嵌套規則

咱們能夠在一個選擇器中嵌套另外一個選擇器來實現繼承，這樣很大程度減小了代碼量，而且代碼看起來更加的清晰。

六、函數 & 運算

運算提供了加，減，乘，除操做；咱們能夠作屬性值和顏色的運算，這樣就能夠實現屬性值之間的複雜關係。LESS中的函數一一映射了JavaScript代碼，若是你願意的話能夠操做屬性值。

11、瞭解sass（中文網：https://www.sass.hk/）

一、安裝Sass和Compass

sass基於Ruby語言開發而成，所以安裝sass前須要安裝Ruby。（注:mac下自帶Ruby無需在安裝Ruby!）

window下安裝SASS首先須要安裝Ruby，先從官網下載Ruby並安裝。安裝過程當中請注意勾選Add Ruby executables to your PATH添加到系統環境變量。以下圖：

安裝完成後需測試安裝有沒有成功,運行CMD輸入如下命令：

ruby -v //如安裝成功會打印 ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]

如上已經安裝成功。但由於國內網絡的問題致使gem源間歇性中斷所以咱們須要更換gem源。（使用淘寶的gem源https://ruby.taobao.org/）以下：

//1.刪除原gem源 gem sources --remove https://rubygems.org/ //2.添加國內淘寶源 gem sources -a https://ruby.taobao.org/ //3.打印是否替換成功 gem sources -l //4.更換成功後打印以下 *** CURRENT SOURCES *** https://ruby.taobao.org/

Ruby自帶一個叫作RubyGems的系統，用來安裝基於Ruby的軟件。咱們可使用這個系統來輕鬆地安裝Sass和Compass。要安裝最新版本的Sass和Compass，你須要輸入下面的命令：

//安裝以下(如mac安裝遇到權限問題需加 sudo gem install sass) gem install sass gem install compass

在每個安裝過程當中，你都會看到以下輸出：

Fetching: sass-3.x.x.gem (100%) Successfully installed sass-3.x.x Parsing documentation for sass-3.x.x Installing ri documentation for sass-3.x.x Done installing documentation for sass after 6 secon 1 gem installed

安裝完成以後，你應該經過運行下面的命令來確認應用已經正確地安裝到了電腦中：

sass -v Sass 3.x.x (Selective Steve) compass -v Compass 1.x.x (Polaris) Copyright (c) 2008-2015 Chris Eppstein Released under the MIT License. Compass is charityware. Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

以下sass經常使用更新、查看版本、sass命令幫助等命令：

//更新sass gem update sass //查看sass版本 sass -v //查看sass幫助 sass -h

二、編譯sass

sass編譯有不少種方式，如命令行編譯模式、sublime插件SASS-Build、編譯軟件koala、前端自動化軟件codekit、Grunt打造前端自動化工做流grunt-sass、Gulp打造前端自動化工做流gulp-ruby-sass等。

軟件方式編譯;

這裏推薦koala&codekit,它們是優秀的編譯器，界面清晰簡潔，操做起來也很是簡單。鑑於koala是免費編譯器，簡單操做以下圖:

LESS/Sass 編譯工具Koala介紹

易上手的Sass編譯工具koala支持多個環境的安裝文件下載Koala

koala是一個國產免費前端預處理器語言圖形編譯工具，支持Less、Sass、Compass、CoffeeScript，幫助web開發者更高效地使用它們進行開發。跨平臺運行，完美兼容windows、linux、mac。

相關標籤/搜索

每日一句

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