BootStrap詳解之(一)

時間  2019-11-24
標籤 bootstrap 詳解 欄目 Bootstarp 简体版
原文   原文鏈接

1、BootStrap簡介javascript

 BootStrap是一個用來構建網站前段框架的一個插件。不管你是想構建應用程序、博客仍是CMS網站，Bootstrap都特別的使用，只要你想獲得，它就能行。Bootstrap把HTML、CSS和JavaScript組合起來爲構建穩定的網站提供了基礎設施，也能提升開發效率。基於默認的網絡系統，佈局變成了小菜一碟，按鈕、導航和表格也都活脫脫地賞心悅目。十幾個JavaScript插件更爲咱們賦予網站交互能力提供了強大保障。css

響應式佈局：根據用戶設備都不一樣，進行相應的佈局html

Bootstrap是Mark 0tto 和Jacob Thornton共同開發的一個開源框架。最初發布Bootstrap的時候，他們兩位都在Twitter工做。當時，他們面臨着爲公司提供了一套標準化的前端開發工具的需求。發佈Bootstrap的那篇博客中，Mark 0tto 這樣介紹它們的新項目：前端

2、文件結構html5

bootstrap2
├── css
│   ├── bootstrap-responsive.css
│   ├── bootstrap-responsive.min.css
│   ├── bootstrap.css
│   └── bootstrap.min.css
├── img
│   ├── glyphicons-halflings-white.png
│   └── glyphicons-halflings.png
└── js
├── bootstrap.js
└── bootstrap.min.jsjava

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

bootstrap-responsivecss3

　　相應的代碼，根據分辨率和設備的不一樣進行佈局web

map文件chrome

　　

source map文件是js文件壓縮後，文件的變量名替換對應、變量所在位置等元信息數據文件，通常這種文件和min.js主文件放在同一個目錄下。 好比壓縮後原變量是map，壓縮後經過變量替換規則可能會被替換成a，這時source map文件會記錄下這個mapping的信息，這樣的好處就是說，在調試的時候，若是有一些JS報錯，那麼瀏覽器會經過解析這個map文件來從新merge壓縮後的js,使開發者能夠用未壓縮前的代碼來調試，這樣會給咱們帶來很大的方便！ 而這種還原性調試功能，目前只有chorme才具備，因此就會出現標題說的問題，我引入jquery-1.10.2.min.js的時候，在firefox下或者其餘瀏覽器下是好的，在chorme下會報錯找不到jquery-1.10.2.min.map文件，404，就是由於以上說的狀況，jquery會檢測瀏覽器是否支持source map功能，若是支持的話，那就去下載source map文件，而這個時候若是你引用的是官網的min.js那沒問題，它會去本身的目錄下找source map文件，而若是jquery.min.js文件在你的服務器上而服務器上又沒有source map的話，那就會報錯了，因此三種解決辦法：一，引用官網文件 二，把source map文件下載下來放到服務器上(推薦) 三，把chorme文件的工具-->開發者工具-->設置-->Enable source maps勾去掉，去掉這個勾，jquery就不會去下載source map文件了！

https://segmentfault.com/q/1010000000259052
http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html

npm.js
忽略，編譯bootstrap時使用

bootstrap-theme
可選的Bootstrap主題文件（通常不用引入）


eot、svg、ttf、woff、woff2

@font-face語句是css中的一個功能模塊，用於實現網頁字體多樣性的模塊(設計者可隨意指定字體，不須要考慮瀏覽者電腦上是否安裝)。

而因爲網頁中使用的字體類型，也是各瀏覽器對字體類型有不一樣的支持規格。 字體格式類型主要有幾個大分類：TrueType、Embedded Open Type 、OpenType、WOFF 、SVG。


eot EOT– Embedded Open Type
EOT是嵌入式字體，是微軟開發的技術。容許OpenType字體用@font-face嵌入到網頁並下載至瀏覽器渲染，存儲在臨時安裝文件夾下。

SVG Scalable Vector Graphics
SVG是由W3C制定的開放標準的圖形格式。SVG字體就是使用SVG技術來呈現字體，還有一種gzip壓縮格式的SVG字體。

ttf TrueType
Windows和Mac系統最經常使用的字體格式，其最大的特色就是它是由一種數學模式來進行定義的基於輪廓技術的字體，這使得它們比基於矢量的字體更容易處理，保證了屏幕與打印輸出的一致性。同時，這類字體和矢量字體同樣能夠隨意縮放、旋轉而沒必要擔憂會出現鋸齒。

woff WOFF–WebOpen Font Format
WOFF（Web開發字體格式）是一種專門爲了Web而設計的字體格式標準，其實是對於TrueType/OpenType等字體格式的封裝，每一個字體文件中含有字體以及針對字體的元數據（Metadata），字體文件被壓縮，以便於網絡傳輸。

@font-face {
    font-family: 'Glyphicons Halflings';

    src: url('fonts/glyphicons-halflings-regular.eot');
    src: url('fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('fonts/glyphicons-halflings-regular.woff') format('woff'), url('fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

@font-face
@font-face是CSS3中的一個模塊，他主要是把本身定義的Web字體嵌入到網頁中
參數說明：

一、FontName：自定義的字體名稱，名稱最好與所調用的字體相同，方便識別與引用。在@font-face中聲明瞭，在Web元素中以font-family來引用，如「font-family:"FontName";」
二、src:：自定義的字體的存放路徑，能夠是相對路徑也能夠是絕路徑；
三、format：自定義的字體的格式，主要用來幫助瀏覽器識別，其值主要有如下幾種類型：truetype,opentype,truetype-aat,embedded-opentype,avg等；
四、weight和style:這兩個值你們必定很熟悉，weight定義字體是否爲粗體，style主要定義字體樣式，如斜體。
瀏覽器兼容性：
說到瀏覽器對@font-face的兼容問題，這裏涉及到一個字體format的問題，由於不一樣的瀏覽器對字體格式支持是不一致的，這樣你們有必要了解一下，各類版本的瀏覽器支持什麼樣的字體，前面也簡單帶到了有關字體的幾種格式，下面我就分別說一下這個問題，讓你們內心有一個概念：


TureTpe(.ttf)格式：
.ttf字體是Windows和Mac的最多見的字體，是一種RAW格式，所以他不爲網站優化,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；
OpenType(.otf)格式：
.otf字體被認爲是一種原始的字體格式，其內置在TureType的基礎上，因此也提供了更多的功能,支持這種字體的瀏覽器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；
Web Open Font Format(.woff)格式：
.woff字體是Web字體中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支持元數據包的分離,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；
Embedded Open Type(.eot)格式：
.eot字體是IE專用字體，能夠從TrueType建立此格式字體,支持這種字體的瀏覽器有【IE4+】；
SVG(.svg)格式：
.svg字體是基於SVG字體渲染的一種格式,支持這種字體的瀏覽器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

https://yfdxs.com/font-face.html


僞類：
答：僞元素（注意，不是僞類）。 它雖然被收錄到css3標準中，但其實主流瀏覽器都已經支持僞元素了，這其中包括了IE8+。 僞元素實際上在html dom中不存在，但會被瀏覽器渲染成html的一個節點，好比題主提到的#twitter:before，就是在#twitter這個標籤裏的開始處插入了一個子元素（節點），同理，:after是在該元素的最後插入子元素，

content：
unicode -> 字體對應的圖標


使用：
Bootstrap 插件所有依賴 jQuery請注意，Bootstrap 的全部 JavaScript 插件都依賴 jQuery，所以 jQuery 必須在 Bootstrap 以前引入

<!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>

<meta charset="utf-8">
編碼

<meta http-equiv="X-UA-Compatible" content="IE=edge">
Bootstrap 不支持 IE 古老的兼容模式。爲了讓 IE 瀏覽器運行最高級別的可用模式渲染顯示內容


<meta name="viewport" content="width=device-width, initial-scale=1">
爲了確保適當的繪製和觸屏縮放，須要在 <head> 之中添加 viewport 元數據標籤。

在移動設備瀏覽器上，經過爲視口（viewport）設置 meta 屬性爲 user-scalable=no 能夠禁用其縮放（zooming）功能。這樣禁用縮放功能後，用戶只能滾動屏幕，就能讓你的網站看上去更像原生應用的感受。注意，這種方式咱們並不推薦全部網站使用，仍是要看你本身的狀況而定！

<meta name="renderer" content="webkit">
國內瀏覽器廠商通常都支持兼容模式（即 IE 內核）和高速模式（即 webkit 內核），不幸的是，全部國產瀏覽器都是默認使用兼容模式，這就形成因爲低版本 IE （IE8 及如下）內核讓基於 Bootstrap 構建的網站展示效果很糟糕的狀況。幸運的是，國內瀏覽器廠商逐漸意識到了這一點，某些廠商已經開始有所做爲了
目前只有360瀏覽器支持此 <meta> 標籤。但願更多國內瀏覽器儘快採起行動、儘快進入高速時代！


響應式佈局

@media
    
    @media mediatype and|not|only (media feature) {
        CSS-Code;
    }

    <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

mediatype
all 用於全部設備
aural 已廢棄。用於語音和聲音合成器
braille 已廢棄。 應用於盲文觸摸式反饋設備
embossed 已廢棄。 用於打印的盲人印刷設備
handheld 已廢棄。 用於掌上設備或更小的裝置，如PDA和小型電話
print 用於打印機和打印預覽
projection 已廢棄。 用於投影設備
screen 用於電腦屏幕，平板電腦，智能手機等。
speech 應用於屏幕閱讀器等發聲設備
tty 已廢棄。 用於固定的字符網格，如電報、終端設備和對字符有限制的便攜設備
tv 已廢棄。 用於電視和網絡電視


邏輯判斷

and，且
not，非
only，只有


媒體功能

aspect-ratio 定義輸出設備中的頁面可見區域寬度與高度的比率
color 定義輸出設備每一組彩色原件的個數。若是不是彩色設備，則值等於0
color-index 定義在輸出設備的彩色查詢表中的條目數。若是沒有使用彩色查詢表，則值等於0
device-aspect-ratio 定義輸出設備的屏幕可見寬度與高度的比率。
device-height 定義輸出設備的屏幕可見高度。
device-width 定義輸出設備的屏幕可見寬度。
grid 用來查詢輸出設備是否使用柵格或點陣。
height 定義輸出設備中的頁面可見區域高度。
max-aspect-ratio 定義輸出設備的屏幕可見寬度與高度的最大比率。
max-color 定義輸出設備每一組彩色原件的最大個數。
max-color-index 定義在輸出設備的彩色查詢表中的最大條目數。
max-device-aspect-ratio 定義輸出設備的屏幕可見寬度與高度的最大比率。
max-device-height 定義輸出設備的屏幕可見的最大高度。
max-device-width 定義輸出設備的屏幕最大可見寬度。
max-height 定義輸出設備中的頁面最大可見區域高度。
max-monochrome 定義在一個單色框架緩衝區中每像素包含的最大單色原件個數。
max-resolution 定義設備的最大分辨率。
max-width 定義輸出設備中的頁面最大可見區域寬度。
min-aspect-ratio 定義輸出設備中的頁面可見區域寬度與高度的最小比率。
min-color 定義輸出設備每一組彩色原件的最小個數。
min-color-index 定義在輸出設備的彩色查詢表中的最小條目數。
min-device-aspect-ratio 定義輸出設備的屏幕可見寬度與高度的最小比率。
min-device-width 定義輸出設備的屏幕最小可見寬度。
min-device-height 定義輸出設備的屏幕的最小可見高度。
min-height 定義輸出設備中的頁面最小可見區域高度。
min-monochrome 定義在一個單色框架緩衝區中每像素包含的最小單色原件個數
min-resolution 定義設備的最小分辨率。
min-width 定義輸出設備中的頁面最小可見區域寬度。
monochrome 定義在一個單色框架緩衝區中每像素包含的單色原件個數。若是不是單色設備，則值等於0
orientation 定義輸出設備中的頁面可見區域高度是否大於或等於寬度。
resolution 定義設備的分辨率。如：96dpi, 300dpi, 118dpcm
scan 定義電視類設備的掃描工序。
width 定義輸出設備中的頁面可見區域寬度。
    @media screen and (max-width: 1000px) and (min-width: 800px){
        body{
            background-color: red;
        }
    }
    @media screen and (max-width: 800px){
        body{
            background-color: green;
        }
    }



    <form class="form-inline">
      <div class="form-group">
        <label for="exampleInputName2">Name</label>
        <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
      </div>
      <div class="form-group">
        <label for="exampleInputEmail2">Email</label>
        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
      </div>
      <button type="submit" class="btn btn-default">Send invitation</button>
    </form>

導航條

2、禁用相應式佈局

3、佈局容器
　　.container

　　.container-fluid


4、柵格
將一行的寬度按照百分比分紅了12份

　　.col-xs- * 永遠百分比
　　.col-sm- * 屏幕大於750px時，才生效
　　.col-md- * 屏幕大於970px時，才生效
　　.col-lg- * 屏幕大於1170px時，才生效


列偏移 offset
嵌套列 row
列排序

<div class="row">
    <div class="col-md-9">.col-md-9 .col-md-push-3</div>
    <div class="col-md-3">.col-md-3 .col-md-pull-9</div>
</div>

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

5、標題

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

在標題內還能夠包含 <small> 標籤或賦予 .small 類的元素，能夠用來標記副標題。

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

6、內容
　　Bootstrap 將全局 font-size 設置爲 14px，line-height 設置爲 1.428

中心內容
　　.lead 將字體大小、加粗、行高修改 （無卵高深用）
標記
　　mark標籤高亮內容 <mark>highlight</mark>
刪除內容
　　del標籤刪除內容（橫線）
　　<del>This line of text is meant to be treated as deleted text.</del>
無用文本
　　s 標籤（橫線）
　　<s>This line of text is meant to be treated as deleted text.</s>
同刪除內容
　　插入文本
ins標籤（下劃線）
　　<ins>This line of text is meant to be treated as an addition to the document.</ins>
帶下劃線的文本
　　u標籤
　　<u>This line of text will render as underlined</u>

小號文本
　　small標籤，父容器字體大小的 85% （標題的small是指定的大小）

着重
　　strong標籤

斜體
　　em標籤

對齊

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">左右對齊</p>
<p class="text-nowrap">不換行</p>

大小寫

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

縮略語
　　<abbr title="attribute">attr</abbr>
首字母縮略語
　　<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>


地址

<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:424662508@qq.com">424662508@qq.com</a>
</address>

引用
blockquote標籤

<footer> 用於標明引用來源。來源的名稱能夠包裹進 <cite>標籤中。
    <blockquote>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>

右對齊效果
　　.blockquote-reverse

無序列表

<ul>
<li>...</li>
</ul>

有序列表

<ol>
<li>...</li>
</ol>

無樣式列表

<ul class="list-unstyled">
<li>...</li>
</ul>

內聯列表

<ul class="list-inline">
<li>...</li>
</ul>

描述列表

<dl>
<dt>...</dt>
<dd>...</dd>
</dl>

水平排列的描述

<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>

-- 自動截斷：text-overflow: ellipsis;
-- 不換行：white-space: nowrap;


用戶輸入
　　<kbd> 標籤

代碼塊
　　<pre> 標籤

　　.pre-scrollable 類，其做用是設置 max-height 爲 350px ，並在垂直方向展現滾動條

變量
　　var 標籤

程序輸出
　　標籤

 

7、表格

table、caption、thead、tbody、tr、th、td

.table 
.table .table-striped 條紋狀
.table .table-bordered 邊框
.table .table-hover 鼠標懸停
.table .table-condensed 緊縮，padding減小
顏色，tr和td均可以加入顏色樣式：
.active 鼠標懸停在行或單元格上時所設置的顏色
.success 標識成功或積極的動做
.info 標識普通的提示信息或動做
.warning 標識警告或須要用戶注意
.danger 標識危險或潛在的帶來負面影響的動做

.table-responsive 相應式表格，將任何 .table 元素包裹在 .table-responsive 元素內，便可建立響應式表格，其會在小屏幕設備上（小於768px）水平滾動。當屏幕大於 768px 寬度時，水平滾動條消失。


8、表單
基本表單
　　.form-group 
　　label
　　.form-control

內聯表單
　　.form-inline：當行表單，在表單組外面添加.form-inline 類，可使得表單內聯， 若是屏幕寬度小於768px，則失效
　　.sr-only： 隱藏label，class="sr-only"
　　.input-group： 對input標籤進行處理
　　.form-horizontal： .form-horizontal 類，並聯合使用 Bootstrap 預置的柵格類，能夠將 label 標籤和控件組水平並排佈局

 

其餘詳見：http://v3.bootcss.com/

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