[Bootstrap]7天深刻Bootstrap(1)入門準備

時間 2019-11-19

標籤 bootstrap 7天深刻入門準備欄目 Bootstarp 简体版

原文原文鏈接

因爲申請了一個域名，一個雲主機，開始弄我的網站。javascript

發現Bootstrap很是方便，和重要，故開始學習與分享關於Bootstrap的技術。css

推個廣告html

我的網站：http://www.neverc.cn前端

signalR作的一個討論圈很是方便公司交流，哈哈！http://grouphtml5

本節目錄：java

簡介jquery

Bootstrap是目前最流行的前端開發框架，由Twitter的兩位前員工Mark Otto和Jacob Thornton在2010年8月份建立。它是一套基於Less的前端開發庫（最新版也包含了Sass源碼），提供了不少常見並經常使用的各類CSS和JavaScript合集，以便開發人員隨時上手。bootstrap

Bootstrap提供了以下重要的特性：api

一套完整的基礎CSS插件。
豐富的預約義樣式表。
一組基於jQuery的JS插件集。
一個很是靈活的響應式（Responsive）柵格系統，而且崇尚移動先行（Mobile First）的思想。

從V3.1.0開始，Bootstrap的License受權改爲了MIT協議。 MIT是目前最爲寬鬆的協議，你們能夠放心地在各類商業環境中使用它。bash

入門

cdn：

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- 可選的Bootstrap主題文件（通常不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- jQuery文件。務必在bootstrap.min.js 以前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Bootstrap框架的文件和源碼能夠在其官方網站（www.getbootstrap.com）下載。點擊連接能夠看到3個下載連接

下載Bootstrap，下載的內容是編譯後能夠直接使用。包括未經壓縮的文件和通過壓縮處理的文件。

下載源碼，是用於編譯CSS的Less源碼，以及各個插件的JS源碼。

下載Sass項目，是用於編譯CSS的Sass源碼，以及各個插件的JS源碼。

文件結構

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

3.X版和2.X系列版本有一個很大區別，就是2.x系列版本用於展現icon小圖標的.png圖片不見了，取而代之的是fonts目錄的4種類型的字體文件。咱們稱這種方式爲@font-face版本的icon實現，該字體來自glyphicons.com網站，並獲得免費受權。經過這種技術顯示圖標的好處是，圖標能夠被任意縮放、改變顏色。

對文件的css、js文件夾名稱進行隨意重命名，可是不能對fonts文件夾進行重命名，由於CSS 文件裏的源碼使用了相對路徑（../fonts/）

注意bs的全部js插件都是基於jQuery的，要確保在使用這些功能的時候引用相應的jQuery文件。

基本模板

<!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">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <title>Bootstrap 101 Template</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]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

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

由上述模板代碼能夠看出，3.x和2.x版本相比，有一個很大的區別，就是多瞭如下一行代碼：

<meta name="viewport" content="width=device-width, initial-scale=1">

這就是咱們前面提到的，Bootstrap從3.0版本開始全面支持移動平臺了，並將貫徹移動先行（Mobile First）的宗旨。

上述代碼的意思是，默認狀況下，UI佈局的寬度和移動設備的寬度一致，縮放大小爲原始大小。

CSS基本語法

Bootstrap的CSS組件的核心就是選擇器的定義以及在各自優先級上的處理。

如何肯定CSS的優先級？

這裏咱們要先引入一個機制，分別用4個數字（a，b，c，d）表示優先級組合.

第一個數字（a）表示style屬性，優先級最高。因爲通常都是class樣式，因此該值通常都是0。

第二個數字（b）是該CSS選擇器上的id數量的總和，通常都是1個。

第三個數字（c）是用在該CSS選擇器上的其餘屬性CSS選擇器以及僞類的總和。這裏包括class（.btn）和屬性CSS選擇器（比如li[id=red]）。

第四個數字（d）計算元素（就像table、p、div等）和僞元素（就像first-child等）。

選擇器

這裏簡單介紹2個經常使用的：

子選擇器：

element element	div p	選擇 <div> 元素內部的全部 <p> 元素。	1
element>element	div>p	選擇父元素爲 <div> 元素的全部 <p> 元素。

兄弟選擇器：

element+element	div+p	選擇緊接在 <div> 元素以後的全部 <p> 元素。
element1~element2	p~ul	選擇前面有 <p> 元素的每一個 <ul> 元素。

擴展：

div,p表示多個選擇器同時被選擇

僞類用於向某些選擇器添加特殊的效果。如a:hover a:link

媒體查詢

媒體查詢是進行響應式設計的核心要素，其功能很是強大。

Bootstrap主要用到min-width、max-width，以及and語法，用於在不一樣的分辨率下設置不一樣的CSS樣式。

@media (max-width: 767px) {
    /*在小於768像素的屏幕裏,這裏的樣式才生效*/ 
} 
@media (min-width: 768px) and (max-width: 991px) {
    /*在768和991像素之間的屏幕裏,這裏的樣式才生效*/ 
} 
@media (min-width: 992px) and (max-width: 1199px) {
    /*在992和1199像素之間的屏幕裏,這裏的樣式才生效*/ 
} 
@media (min-width: 1200px) {
    /*在大於1200像素的屏幕裏,這裏的樣式才生效*/ 
}

JS基本語法

||與&& 2個運算符

||表示，若是第一個元素能夠轉換爲true，則返回第一個元素的值，不然查詢第二個元素的值

&&則相反，若是第一個元素能夠轉換爲false，才返回第一個元素的值，不然返回第二個元素的值

空對象null，undefined爲false

數字零爲false

空字符串爲false

自執行函數

(function () { /* code */ } ());               // 推薦使用這個 
(function () { /* code */ })();                     // 這個也是能夠用的
+function () { /* code */ }();                  //前面的+號主要是防止不符合規定的代碼
;function () { /* code */ }();                   //+號也能夠換成;

原型

在Alert函數上定義一個名爲close的原型方法。

Alert.prototype.close = function (e) {    /*...*/ }

什麼是原型，原型的好處，能夠看個人博客js篇。

這裏演示如何調用原型方法

var alert = new Alert();
alert.close();

jQuery

綁定事件

$('td').on("click", function (e) {//todo});         //在td上綁定click
$('td).off('click');                                            // 在td上禁用click事件

而在bs中

$(document).on('click.bs.carousel.data-api','td',function (e){}; 
$(document).off('.carousel.data-api');

上述的on在使用時，中間多了一個參數，並且選擇器變成了 document。它的好處是隻在document上綁定一個單擊事件，利用冒泡的機制，在單擊的時候檢查是不是td元素，若是是才處理。而前面咱們把td做爲選擇器的時候，一個頁面有多少td元素就會綁定多少個click事件，這樣性能會大大下降。這種3個參數的模式稱爲享元模式。

$(selector).data()

收集指定元素上的全部以data-開頭的自定義屬性，併合併成爲一個對象字面量。

<div id="abc" data-role="aaa" data-toggle="toggle"></div>

若是要獲取data-role裏aaa這個值

$("'#abc").data("role");

擴展

Less是一種CSS預處理技術，它是一種動態樣式語言，屬於 CSS預處理語言中的一種。

HTML5輔助設計

在bs中，出現了不是以data-開頭的自定義屬性，咱們稱之爲輔助屬性。

這些屬性是HTML5新提出的概念，用於支持殘障人士、老年人、文化水平不高或暫時患病的人使用屏幕閱讀器進行頁面訪問。

aria-hidden="true"表示對屏幕閱讀器隱藏該div 元素

role="navigation"表示該區域用於導航

相關標籤/搜索

每日一句

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