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

時間 2019-11-10

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

原文原文鏈接

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

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

推個廣告前端

我的網站：http://www.51pansou.comhtml5

BootStrap視頻下載：Bootstrap視頻jquery

BootStrap源碼下載：Bootstrap源碼bootstrap

本節目錄：框架

簡介svg
入門佈局
基本模板學習
CSS基本語法
JS基本語法
擴展

簡介

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

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

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

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

入門

cdn：

< link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

< link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

< script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></ script >

< 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組件的核心就是選擇器的定義以及在各自優先級上的處理。

HTML5輔助設計

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

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

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

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

我的網站：http://www.51pansou.com

BootStrap視頻下載：Bootstrap視頻

BootStrap源碼下載：Bootstrap源碼

轉載人:www.51pansou.com

相關標籤/搜索

每日一句

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