從零開始學Bootstrap(3)

時間  2019-11-17
標籤 開始 bootstrap 欄目 Bootstarp 简体版
原文   原文鏈接

首先讓咱們回顧一下系列內容。javascript

從零開始學Bootstrap（1）介紹了BootStrap最簡單的模板，逐條解釋了每行代碼的含義。css

從零開始學Bootstrap（2）強調了邊學邊作，經過實際的例子，講解了如何一步一步的實現本身想要的效果。html

 

寫到這裏，這篇從零開始學Bootstrap（3）我想寫如下幾個內容：前端

1. 基於我對Bootstrap的理解，作一個小小的總結。html5

2. 對從零開始學Bootstrap（2）例子進行UI美化和代碼優化，主要是說說我是怎麼作出本身想要的效果的。java

3. 授人以魚不如授人以漁，以本身的例子（由於本身也是新手，寫出來的東西可能更適合初學者），講講代碼編寫過程當中遇到的坑和須要注意的點。jquery

 

廢話很少說，下面開始：編程

1、   Bootstrap的小小總結json

基於以Bootstrap的官方文檔（http://v3.bootcss.com/）的說明，Bootstrap分爲三個大塊：CSS樣式，組件，Javascript插件。bootstrap

首先要明確一點：Bootstrap是一個框架，意思就是別人造好了輪子，你能夠直接拿來用，免去了本身去造輪子。因此我們須要明確兩點：這些輪子是什麼樣的輪子，怎麼樣去使用這些輪子。

 

1. CSS樣式：主要介紹了柵格系統和Bootstrap的全局樣式。經過設定Class的值實現。

　　1.1柵格系統：

　　讓咱們能夠很方便的實現HTML頁面的佈局(http://v3.bootcss.com/css/#grid)。

　　我以爲柵格系統很重要。由於HTML頁面的佈局是很重要也很繁瑣的一項任務（你看一下W3School裏關於佈局的介紹http://www.w3school.com.cn/html/html_layout.asp，看一下例子裏的代碼，就明白了），而且須要考慮到不一樣瀏覽器、不一樣設備的兼容性。

　　柵格系統把這一切大大簡化了。打開上面關於柵格系統的鏈接，你會發現只須要根據你想要實現的效果，給HTML元素Class屬性賦相應的值，就能夠實現，而且還能設置針對不一樣屏幕大小的設備展示不一樣的效果。

　　1.2 Bootstrap全局樣式：

　　也就是Bootstrap對經常使用HTML元素（eg: DIV、Button、 P、 Table、 Img等等）是怎樣美化的。經過給HTML元素的Class屬性賦相應的值，就能夠獲得本身想要的效果。

　　舉一個最簡單的例子：

 

 

如上圖所示，Bootstrap可讓你僅僅改變Button元素的class的值就是改變按鈕的大小，而不用很麻煩的去修改css文件，或者給元素內嵌style的值。

 

2. 組件：我認爲組件就是Bootstrap把一些元素（HTML元素和Javascript代碼）組合起來，就變成了組件，而且提供了不少很好看很實用的圖標。這些組件基本都是HTML開發過程當中經常使用的。經過設定Class的值實現。(http://v3.bootcss.com/components/)

舉一個最簡單的例子：

 

如上圖所示，當咱們須要實現導航功能的時候。找到Boostrap裏相應的組件，依照其給的代碼模板，根據本身的需求，賦相應的class和ul、li值就能夠了

 

3. Javascript插件：我認爲Bootstrap的Javascript插件就是封裝了經常使用網頁交互功能的」輪子」。只須要設定class屬性和data屬性就能夠實現經常使用的網頁交互功能，而不用本身寫一大堆javascript代碼。

首先說一個小插曲，新手可能誤覺得」javascript」和」java」有着很深的聯繫，甚至會認爲javascript是java的變種。其實並非這樣，javascript是網景(Netscape)公司開發的應用於互聯網的腳本語言，其實它最早的名字」是livescript」，後來網景公司與Sun公司(也就是發明Java的公司，後來被Oracle收購)達成合做，當時Java語言如日中天，名氣很大，爲了搭順風車，就把livesript更名爲javascript。以致於有人開玩笑：」Java」和」Javascrip」的區別就比如」雷鋒」和」雷峯塔」的區別同樣。

言歸正傳，咱們知道，Javascript是爲了賦予網頁交互功能而存在的。因此，Bootsript上豐富的Javascript插件可以讓你很方便的實現經常使用的網頁交互功能，而不用把精力放在」造輪子」上。

 

如上圖所示，利用Bootstrap的輪播插件(http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html， Bootstrap的官方文檔這裏沒有翻譯成中文，runoob上卻有很詳細的中文翻譯，而且能夠在線修改代碼提交觀察效果，強烈推薦)，你能夠很方便的實現如今不少網站都採用的圖片輪播功能。這裏只須要根據上述連接裏面的教程，賦相應的class和圖片src值就能夠了，連data值都不用設。

 

2、   對從零開始學Bootstrap（2）例子進行UI美化和代碼優化

下圖是上期教程中實現的效果：

 

咱們能夠看到有如下幾個缺點須要改正：

　　(1) 點擊具體同窗，顯示其信息以後，沒有處於被選中的狀態。（你一開始點擊，會處於被選中狀態，但那只是button的點擊效果，你點一下空白處，被選中的狀態就消失了）

　　(2) 色彩單調，不太美觀。

　　(3) 佈局方面須要調整，信息框是呈現咱們須要的信息的地方，應該儘量大，最好其顯示的時候能把不須要的框給隱藏起來。

　　(4) 對於代碼方面，對從零開始學Bootstrap（2）中的Javascript代碼都寫在HTML頁面裏了，而且有重複的代碼段，應該把重複的代碼段寫成函數，這樣能夠減小代碼體積，再一個修改代碼的時候，我直接修改相應的函數就能夠了，而不用一個地方一個地方的找。Javascript代碼能夠寫到JS文件裏，實現HTML頁面和Javascript代碼的分離。

 

技術選型（直白的說就是思考怎樣利用Bootstrap框架裏已有的東西，實現想要的效果）：

一、首先調整佈局，把信息框和同窗框調整在一塊兒，班級框顯示在最上面。

顯然，咱們只須要把信息框所在的DIV和同窗框的DIV放在同一個row的DIV裏，並把修改跟柵格系統相關的class屬性值」col-md」就能夠實現。好比咱們想讓他們2:1的比例顯示，那麼信息框的class屬性應該有col-md-8，而同窗框的應該是col-md-4了。

值得注意的是，前端永遠不多是一步到位的開發，每每最開始的代碼都不是咱們想要的完美結果，須要細細調整。如下面爲例，你們要學會本身搜，去嘗試，去不斷的調整(後面的調整，具體過程就不交代了)：

咱們修改完代碼後，呈現的效果是下面這樣的：

 

很明顯的，上面每行只顯示一個Class，有點浪費空間。下面的兩個部分沒有對齊。

把上面DIV組件的class屬性裏的」btn-group-vertical」刪掉，把col-md-6添加到js代碼裏的tmp_button的class屬性中。另外觀察到這樣設定了以後，第一行與第二行相比有奇怪的縮進：

 

毫無疑問，這種外觀、佈局類的變化跟CSS有關。這時候咱們能夠看一下元素具體的CSS。

以Chrome爲例：

在這個元素上點鼠標右鍵，選擇Inspect，即審查，你會在右邊的框裏查到相應的代碼。經過比對，咱們發現是margin-left的問題，這個屬性是bootstrap框架裏默認的，從上層元素繼承而來，有的爲 -1px，有的爲0px，咱們只須要改爲同樣就能夠了，好比都改爲0px：

在js代碼裏的tmp_button，修改style屬性，添加」margin-left:0px；」，有的人以爲字體居中很差看，能夠添加text-align:left，設定按鈕上的文字從左邊起。

改正後的效果：

 

 

二、添加摺疊按鈕，讓用戶能夠經過這個按鈕隱藏/打開class框，點擊classmate顯示詳細信息的時候，自動隱藏，以把大量的空間省給信息框來顯示。

添加摺疊按鈕能夠參考http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html 來實現。

另外，咱們能夠給摺疊按鈕加一個好看的圖標，參考http://v3.bootcss.com/components/#glyphicons的教程就能夠輕鬆實現。

實現點擊classmate顯示詳細信息的時候，自動隱藏，須要修改classmate按鈕的點擊事件，即相應的js代碼。

咱們查看Bootstrap摺疊插件的用法http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html（這個更好，官方的這部分還沒翻譯好），查到下面的內容：

 

原來Class屬性裏的cllapse和in值控制了隱藏和顯示功能，那咱們只須要在按鈕的click事件js代碼裏修改相應的要進行」顯示/隱藏」操做的HTML元素的class屬性就能夠了，因而在classmate按鈕的click函數裏添加如下語句就能夠了：

$("#collapseOne").attr("class","panel-collapse collapse");

三、修正」點擊具體同窗，顯示其信息以後，沒有處於被選中的狀態」的bug。

咱們經過查閱文檔，http://www.runoob.com/bootstrap/bootstrap-button-plugin.html， 給button的data-toggle屬性設置爲」button」，可使其變成點擊後自動呈現被選中的狀態。

因此咱們給classmate的button添加屬性data-toggle=」button」。

此時又出現了另外一個問題，我想接下去點擊其餘classmate的時候，原來點的仍是處於激活狀態，怎麼辦？

經過查閱http://www.runoob.com/bootstrap/bootstrap-buttons.html, button的class賦值有active時，纔會呈現被選中的狀態，也就是說，上面的設定，也就是bootstrap作了這麼一件事情：當data-toggle=」button」的按鈕被點擊時，自動把active添加到class裏，此時呈現被選中狀態，當再次被點擊時，自動把active從class裏移除，就呈現未被選中的狀態。

也就是說，咱們只要本身去作這個操做，好比在點擊classmate時，我能夠把全部的classmate按鈕的active都從class屬性裏移除，這樣點擊完成後，只有我最新點擊的Button處於active狀態。

所以，只須要在classmate按鈕的click函數里加入這樣的語句：

$(".btn-classmate").attr("class","btn btn-default btn-classmate btn-info");

效果以下圖：

 

四、美化按鈕外觀

找到bootstrap裏CSS關於按鈕的部分：

http://www.runoob.com/bootstrap/bootstrap-buttons.html

按照教程修改，我這裏只是簡單的修改了一下按鈕的顏色，你們能夠按照需求本身改。效果以下圖：

 

五、 HTML頁面和Javascript代碼的分離

其實分爲兩步：

第一步：把javascript代碼放到js文件裏，並在HTML文件裏連接上。

第二步：把javascript裏複用，或者有明確功能的代碼塊，寫進一個函數裏，直接調用函數。

因爲這兩步都比較簡單，任何學過編程語言的應該都會。我就不展開寫了。

值得注意的是，在連接JS文件時，要注意順序。

好比Bootstrap的JS文件，裏面的代碼是基於Jquery寫的，用了不少Jquery的函數，因此Jquery的JS文件要在Bootstrap的JS文件以前聲明連接。

同理，我們的JS文件時基於Bootstrap，因此要在Bootstrap以後，否則代碼就不起做用了。

 

最後國際慣例，貼一下相關的代碼：

 getClassmate.html:

<!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>getClassmate</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    <style type="text/css">
        #btn-group-vertical-classes 
        {
        overflow-y:auto; 
        overflow-x:auto; 
        height:100px;
        }
        #btn-group-vertical-classmates 
        {
        overflow-y:auto; 
        overflow-x:auto; 
        height:500px;
        }
        button
        {
        text-overflow: ellipsis;
        overflow: hidden;
        border-radius: 0px;
        }
        #context_div
        {
        overflow-y:auto; 
        overflow-x:auto; 
        height:500px;
        }
    </style>
  </head>
  <body>
  <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
            <h4 class="panel-title" style="text-align:right;">
                <a id="collapse_a" data-toggle="collapse" data-parent="#accordion" 
                href="#collapseOne">
                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Click this to show/hide class
                </a>                                
            </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    <div class="row" id="div1-classes-classmates">
                        <div class="btn-group-lg col-md-12" role="group" aria-label="..." id="btn-group-vertical-classes">
                        <!-- where classes show-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <br></br>
        <div class="row">
            <div class="btn-group-vertical btn-group-lg col-md-4 " id="btn-group-vertical-classmates" role="group" aria-label="..."> 
            <!-- where classmates show-->
                <button type="button" style="border-radius: 0px;" class="btn btn-default">Click class to show classmate.</button>
            </div>
            <div class="form-group">
                <div class="col-md-8">
                    <div class="jumbotron" id="context_div">
                        <p>Click classmate to show details.</p>
                    </div>
                </div>
             </div>
        </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-3.0.0.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/script_getClassmate.js"></script>
  </body>
</html>

 

script_getClassmate.js:

$(document).ready(function(){
        $.getJSON("resource/classmates.json",function(result){
            $.each(result, function(i, field){
                var tmp_button=$('<button type="button" style="border-radius: 0px; text-align:left; margin-left:0px" class="btn btn-default btn-class col-md-6 btn-success" data-toggle="button" chosen_state=0></button>').text(i);
                tmp_button.attr("title",i);
                $("#btn-group-vertical-classes").append(tmp_button);
            });
            $(".btn.btn-default.btn-class").click(function(){
                var tmp_chosen=Number($(this).attr("chosen_state"))^1;
                $(this).attr("chosen_state",String(tmp_chosen));
                showClassmates(result);
                $(".btn.btn-default.btn-classmate").click(function(){
                    $(".btn-classmate").attr("class","btn btn-default btn-classmate btn-info");
                    $("#collapseOne").attr("class","panel-collapse collapse");
                    var selected_classmate=$(this).text();
                    showClassmateDetail(result,selected_classmate);
                });
            });
        });
})

function showClassmates(result){
    $("#btn-group-vertical-classmates").empty();
    var chosen_list=new Array();
    
    $(".btn.btn-default.btn-class").filter(function(){
        judgeflag=false;
        if($(this).attr("chosen_state")=="1"){
            judgeflag=true;
            chosen_list.push($(this).text());
        }
        return judgeflag;                        
    });
    $.each(result,function(i,field){
        var chosen_list_x;
        for (chosen_list_x in chosen_list){
            if(chosen_list[chosen_list_x]==i){
                $.each(field,function(j,field2){
                    var tmp_button=$('<button type="button" style="border-radius: 0px;" class="btn btn-default btn-classmate btn-info" data-toggle="button" chosen_state=0></button>').text(j);
                    tmp_button.attr("title",j);
                    $("#btn-group-vertical-classmates").append(tmp_button);
                });
            }
        }
    });
}

function showClassmateDetail(result,selected_classmate){
    var classmate_context_item;
    $("#context_div").empty();
    $.each(result,function(i,field){
        $.each(field,function(j,field2){
            if(j==selected_classmate){
                $.each(field2,function(k,field3){
                    //alert(k);
                    //alert(field3);
                    classmate_context_item=k + ": " + field3;
                    var tmp_p=$('<p></p>').text(classmate_context_item);
                    $("#context_div").append(tmp_p);
                    });
            }
        });
    });
}

 

classmates.json:

{
    "Class 001": {
        "Xiao Wang": {
            "Gender": "Male",
            "Age": "18",
            "Interest": "Football",
            "Hometown": "Shanghai",
            "Chinese": "78",
            "Math": "90",
            "English": "66",
            "Physics": "81",
            "Chemistry": "88",
            "History": "69",
            "Geography": "92"
        },
        "Xiao Li": {
            "Gender": "Male",
            "Age": "20",
            "Interest": "Basketball",
            "Hometown": "Beijing",
            "Chinese": "98",
            "Math": "77",
            "English": "97",
            "Physics": "72",
            "Chemistry": "73",
            "History": "88",
            "Geography": "81"
        }
    },
    "Class 002": {
        "Xiao Cai": {
            "Gender": "Female",
            "Age": "19",
            "Interest": "Dance",
            "Hometown": "Gaoxiong",
            "Chinese": "93",
            "Math": "80",
            "English": "92",
            "Physics": "82",
            "Chemistry": "77",
            "History": "89",
            "Geography": "83"
        }
    },
    "Class 003": {
        "Xiao Ma": {
            "Gender": "Male",
            "Age": "18",
            "Interest": "Reading",
            "Hometown": "Taibei",
            "Chinese": "91",
            "Math": "93",
            "English": "96",
            "Physics": "97",
            "Chemistry": "100",
            "History": "94",
            "Geography": "92"
        }
    },
    "Class 005": {
        "Xiao Zhang": {
            "Gender": "Male",
            "Age": "20",
            "Interest": "Running",
            "Hometown": "Guangzhou",
            "Chinese": "67",
            "Math": "70",
            "English": "66",
            "Physics": "80",
            "Chemistry": 68,
            "History": "79",
            "Geography": "93"
        }
    }
}

 

主要參考連接：

[1].Bootstrap中文官方文檔

http://v3.bootcss.com/

[2].Runoob.com的Bootstrap教程

http://www.runoob.com/bootstrap/bootstrap-tutorial.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程