Bootstrap

1、Bootstrap3和Bootstrap4區別

轉載自：https://blog.csdn.net/miaomiao_1024/article/details/83418352

*）不一樣點：

 

*）Bootstrap3的4種柵格：

特小（col-xs-） 適配手機(<768px)
小（col-sm-） 適配平板(≥768px)
中（col-md-） 適配電腦(≥992px)
大（col-lg-） 適配寬屏電腦(≥1200px)

*）Bootstrap4的5種柵格：

特小（col-）(<576px)
小（col-sm-）(≥576px)
中（col-md-）(≥768px)
大（col-lg-） (≥992px)
特大（col-xl-）（≥1200px）（只有bootstrap4裏面有xl）

*）Bootstrap4特色：

新增網格層適配了移動端；
全面引入ES6新特性（重寫全部JavaScript插件）；
css文件減小了至少40%；
全部文檔都用Markdown編輯器重寫；
放棄對IE8的支持

---

 

如下內容參考自官方文檔：https://v3.bootcss.com/css/#grid
2、容器

.container 類用於固定寬度並支持響應式佈局的容器。.container-fluid 類用於 100% 寬度，佔據所有視口（viewport）的容器。

3、柵格

Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。

柵格系統用於經過一系列的行（row）與列（column）的組合來建立頁面佈局，你的內容就能夠放入這些建立好的佈局中。下面就介紹一下 Bootstrap 柵格系統的工做原理：

• 「行（row）」必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便爲其賦予合適的排列（aligment）和內補（padding）。
• 經過「行（row）」在水平方向建立一組「列（column）」。
• 你的內容應當放置於「列（column）」內，而且，只有「列（column）」能夠做爲行（row）」的直接子元素。
• 相似 .row 和 .col-xs-4 這種預約義的類，能夠用來快速建立柵格佈局。Bootstrap 源碼中定義的 mixin 也能夠用來建立語義化的佈局。
• 經過爲「列（column）」設置 padding 屬性，從而建立列與列之間的間隔（gutter）。經過爲 .row 元素設置負值 margin 從而抵消掉爲 .container 元素設置的 padding，也就間接爲「行（row）」所包含的「列（column）」抵消掉了padding。(參考：https://blog.csdn.net/weixin_42041193/article/details/81068002 的內容：工做原理：.container實現固定的寬度並居中呈現,並和其它網格實現對齊 行(.row)是列(.col-*)的橫向組合和父容器(它們有效組織在.row下), 每列都有水平的padding值，用於控制它們之間的間隔，同時在負邊距的行上抵消，從而實現列中的全部內容在視覺上是左側對齊的體驗。）
• 負值的 margin就是下面的示例爲何是向外突出的緣由。在柵格列中的內容排成一行。
• 柵格系統中的列是經過指定1到12的值來表示其跨越的範圍。例如，三個等寬的列能夠使用三個 .col-xs-4 來建立。
• 若是一「行（row）」中包含了的「列（column）」大於 12，多餘的「列（column）」所在的元素將被做爲一個總體另起一行排列。
• 柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 而且針對小屏幕設備覆蓋柵格類。 所以，在元素上應用任何 .col-md-*柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 而且針對小屏幕設備覆蓋柵格類。 所以，在元素上應用任何 .col-lg-*不存在， 也影響大屏幕設備。

*）響應式 （參考：http://www.runoob.com/bootstrap/bootstrap-v2-responsive-design.html

　　　　　　　　http://www.runoob.com/bootstrap/bootstrap-responsive-utilities.html）

##）什麼是響應式 Web 設計：

響應式 Web 設計是一個讓用戶經過各類尺寸的設備瀏覽網站得到良好的視覺效果的方法。例如，您先在計算機顯示器上瀏覽一個網站，而後在智能手機上瀏覽，智能手機的屏幕尺寸遠小於計算機顯示器，可是你卻沒有感受到任何差異，二者的用戶體驗幾乎同樣，這說明這個網站在響應式設計方面作得很好。

##）響應式 Web 設計工做原理：

爲了應用響應式 Web 設計，您須要建立一個包含適應各類設備尺寸樣式的 CSS。一旦頁面在特定的設備上加載，該頁面上使用了各類字體和 Web 開發技術，好比媒體查詢（Media Queries），此時，會先檢測設備的視口大小，而後加載特定於設備的樣式。

##）響應式web設計的CSS

必須在網頁頭部加：

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

（解析：

視口的 meta 標籤，重寫了默認的視口，並幫助加載與特定視口相關的樣式。

width 屬性設置屏幕寬度。它包含一個值，好比 320，表示 320 像素，或者值爲 'device-width'，用來告訴瀏覽器使用原始的分辨率，device-width 能夠確保它能正確呈如今不一樣設備上。

initial-scale 屬性是視口最初的比例。當設置爲 1.0 時，將呈現設備的原始寬度。）

 

引入bootstrap的CSS：

1 <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

 ##）響應式樣式：

響應式圖像，在img上加：class="img-responsive"

響應式表格，在table上加：增長class="table-responsive"

##)響應式還提供了一些工具類：參考：https://v3.bootcss.com/css/#responsive-utilities

.visible-xs-4  ：只對xs級別的顯示屏可見

.hidden-xs   ： 只對xs級別的顯示屏隱藏

.visible-xs-block  ：對xs級別的可見，而且block顯示

.visible-print-block：可見--對打印機（對瀏覽器隱藏）

.hidden-print：隱藏-對打印機（對瀏覽器可見）

*）列偏移

使用 .col-md-offset-* 類能夠將列向右側偏移。這些類實際是經過使用 * 選擇器爲當前元素增長了左側的邊距（margin）。例如，.col-md-offset-4 類將 .col-md-4 元素向右側偏移了4個列（column）的寬度。

*）列嵌套

爲了使用內置的柵格系統將內容再次嵌套，能夠經過添加一個新的 .row 元素和一系列 .col-sm-* 元素到已經存在的 .col-sm-* 元素內。被嵌套的行（row）所包含的列（column）的個數不能超過12（其實，沒有要求你必須佔滿12列）。

*）列排序

.col-md-push-* 和 .col-md-pull-*

pull：把柵格往前拉

push：把柵格子往後推