溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

網(wǎng)站前端_Bootstrap.基礎(chǔ)入門.0001.模版標準/樣式標準/腳本標準入門?

發(fā)布時間：2020-05-24 04:30:51 來源：網(wǎng)絡(luò) 閱讀：731 作者：運維開發(fā) 欄目：web開發(fā)

簡單介紹:

1. Bootstrap于2010年Twitter開源將常見的CSS布局小組件和JS插件進行了封裝,大大規(guī)范且提高了代碼質(zhì)量及開發(fā)效率.

2. Bootstrap包含完整的基礎(chǔ)CSS插件,豐富的預定義樣式表,基于JQuery的JS插件集,非常靈活的響應(yīng)式刪欄系統(tǒng),支持跨平臺,且完全支持自定義.

注意: Bootstrap的所有JS插件都依賴jQuery庫,所以要確保在使用這些功能的時候引用相應(yīng)的jQuery文件


模版標準:

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- 默認文檔寬度與設(shè)備寬度保持1:1 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css">
        <!-- 以下2個插件使IE8支持HTML5元素和媒體查詢 -->
        <!--[if lt IE 9]>
            <script src="js/html5shiv.min.js"></script>
            <script src="js/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <!-- 如果使用Bootstrap的JS插件則必須引入JQuery -->
        <script src="js/jquery.min.js"></script>
        <script  src="js/bootstrap.js"></script>
    </body>
</html>


樣式標準:

說明: Bootstrap的CSS核心就是選擇器的定義以及各自優(yōu)先級上的處理,CSS優(yōu)先級引入組合概念(a, b, c, d),a表示style屬性,優(yōu)先級最高,由于一般都是class樣式,所以該值一般都是0,b表示該選擇器上id數(shù)量的總和,一般都是1個,c表示該選擇器上其它的屬性CSS選擇器以及偽類選擇器的總數(shù),d表示元素和偽元素選擇器個數(shù),所以#menu h3就是0101, h3.title就是0011,h3+p就是0002,所以#leftbar li#first就比#leftbar li:first-child的優(yōu)先級高因為前者是0201后者是0102,所以前者優(yōu)先級高.


腳本標準: 

+function($){
    // Javascript Code
}(jQuery);

說明: 如上自執(zhí)行函數(shù),在執(zhí)行時傳入jQuery對象,這樣做i的好處在于函數(shù)內(nèi)部$已經(jīng)是局部變量,不再受外部作用域影響,前面的+號和;號功能一樣,都是為了防止代碼壓縮時由于不規(guī)范而出錯

Alert.prototype.show = function (e){
    // Javascript Code
};

說明: 如上原型對象,就是在Alert函數(shù)上定義一個名為show的原型方法,調(diào)用時只需要在其實例上調(diào)用原型上的show方法即可

$(document).on('mouseover.bs.stress', 'tr:not(:first)', function(event) {
    // JavaScript Code
});

說明: 如上事件綁定,支持以事件命名空間的方式在事件后加點自定義事件處理函數(shù),常規(guī)綁定事件會觸發(fā)mouseover所有綁定的回調(diào),而以命名空間的形式可以確保只觸發(fā)自定義的事件.

<select id="area" data-role="area" data-toggle="toggle" role="combobox"></select>

網(wǎng)站前端_Bootstrap.基礎(chǔ)入門.0001.模版標準/樣式標準/腳本標準入門?


說明: 如上輔助設(shè)計,支持很多自定義屬性,如data-*開頭,還有一個role支持如上不同類別,不同設(shè)備會對此角色做不同的反應(yīng).

+function($){
    console.log($("#area").data("role"))
    var $data = $("#area").data();
    for(var key in $data){
        console.log(key, $data[key])
    };
}(jQuery)

說明: $(selector).data([field])會自動搜集指定元素上以data-開頭的自定義HTML5屬性,


向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手