BooStrap4文檔摘錄: 1. Layout

文檔： 

https://getbootstrap.com/docs/4.1/layout/overview/

w3c的案例：很直觀：

https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp 

 

---

 

 

Bootstrap Ruby Gem

下載後，須要進行一系列配置。

1. @import "bootstrap";  #在application.scss中，其餘的全刪除。

2. 它的JavaScript功能依賴JQuery。因此須要使用jquery-rails這個gem，由於event使用jquery寫的

3. 在application.js中加入

//= require jquery3 //= require popper //= require bootstrap-sprockets

 

 

---

 

 

大綱： 

 

•  開始：下載，內容，瀏覽器及系統支持， javascript， Theming,  Webpack, accessibility.
• Layout: containers, Gird, Media object, Utilities for layout
• Content: Reboot, 排版typography, Code(關於一行／多行代碼塊), Images, Tables, Figures(關於圖片和文本的顯示)
• Components: 各種組件。
• Utilities: 幾十個class用於顯示，隱藏，aligning校準，spacing content。
• Extend: 擴展。Approach使用的原則／策略／技巧, Icons推薦使用的第三方庫。

 

 

---

瀏覽器和設備支持

JavaScript  :提供JS插件，是用jQuery寫的。

 

accessibility: sr-only類。 

---

 

---

Layout 

佈局概覽：

 

組件和選項爲你的Bootstrap程序佈局。包括wrapping containers, gird system, media object, Utility classes。

 

Containers 

若是使用grid就必須使用container。放在<div>中。

 

• 固定寬度的， container
• 能夠隨屏幕達到最大寬度的，contain-fluid 

 

Responsive breakpoins

bootstrap首要用於移動開發。經過media queries來建立斷點，能夠改變想要的佈局和交互
。 

如下幾個media query ranges（breakpoints）放到了源sass文件中：用於佈局，grid, components。

⚠️默認設置的是：最小斷點 ，col-md指ipad以上屏幕的設備

@media (min-width: 576px) { ... }

⚠️，768，992，1200對應三個不一樣的設備大小的斷點。sm,md,lg, xl

 
 
 
 

  
  
  
  @media screen and (min-width: 400px) {
 
 
 
 
 body {
 background-color: lightgreen;
 }
 }
因此，經過Sass混入，就可使用他了。
@include media-breakpoint-up(sm) { ... }

Z-index
一些組件的z-index設置爲1000以上，目的是頁面的結構顯示不衝突。

 

---

 

 

---

Grid

 

使用了一系列的containers, rows, columns來顯示和校準內容。他使用了flexbox工具。 

 container

row

    col-sm 

根據設備屏幕大小選擇.col-sm-/.col-md-/.col-lg-/.col-xl-，或者用靈活的.col- 

(瞭解就好了： 默認padding是30px，每一個邊15 )

 

總寬細分12個單元，每一個col能夠指定佔幾個單元的寬度。不指定就是平均分。

 

 col-6，定死這列就佔6個單元寬度 

 col-{breakpoint}-auto 所佔寬就是內部的元素的實際寬度

 

 w-100 用於主動斷行，經過width:100%

⚠️默認超過12自動換行，column wrapping。

Min and match

經過在一個類中使用多個斷點，可讓佈局使用多種不一樣的設備屏幕。

若是移動設備，第一行佔全屏幕，第二行只佔半屏幕寬度

解釋：col-md指的是正常屏幕及以上大小使用8/4的分法，
其餘的使用第一行全佔，第二行佔一半的分法.
若是指定col-12和col-6，則其餘狀況下每一個<div>佔全寬。
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
  
  
  

 

若是移動設備，第一行佔全屏幕，第二行只佔半屏幕寬度
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Alignment校準， 使對齊。

 

— 水平方向上的排列 

在row類中，針對全部子div:

justify-content-start/center/end: 這一行的元素靠左，劇中，靠右排列

justify-content-around: 若是有多餘的空白列，把它平均分給每一個元素的padding。

justify-content-between: 若是有多餘的空白類，把他放在中間。

 

具體看示例：https://getbootstrap.com/docs/4.1/layout/grid/

 

|  垂直方向上的排列 （不重要）

在row類中，針對全部子div, 使用align-items-start/center/end在最上方／中間／最下方。

在col類中，針對單獨子div，使用align-self-start/center/end上在最上方／中間／最下方。

文字描述不清楚： 

 

margin和padding都清0（估計不重要）

使用no-gutters 類

 

---

 

 

Ordering 

在同一行，對可見的content，進行順序的排列。 order-1, order-md-3

 

---

 

 

Grid還能夠嵌套。

能夠設置offset-{breakpoint}-4： 和左邊空出4個單元空格

 

---

 

 

Sass mixins（自定義用法：具體見文檔）

當使用Bootstrap's源Sass文件時，你能夠設置variables並建立客製化的，響應式的頁面佈局。

預製的Grid classes一樣使用這些variables和mixins。

如能夠自定義每行多少列；列之間的padding；自定義斷點；

 

---

 

---

 

 

Media object 

Bootstrap's media object能夠用來建設高重複使用的組件，像評論，tweets等待。

 .media，.media-body 

      <div class="media">

   <div class="media-body">

        <h5 class="mt-0 mb-1">Media object</h5>

        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque 

   </div>

   <img class="ml-3" src=".../64x64" alt=" image">

      </div>

能夠嵌套。

能夠像列表同樣使用:

<ul class="list-unstyled">

...

<ul> 

#list-unstyled類是把圖形換成圖像或圖標。

 

---

 

 

Utilities 

 

 幾十個class用於顯示，隱藏，aligning校準，spacing content。

 

Changing display 

使用多功能display。 和grid, content或者組件一塊兒使用來顯示或所以它們。

 

Flexbox options 

沒看懂：不是全部元素的display被dsiplay: flex改變。因此你應該加.d-flex或者響應式的.d-sm-flex到你的元素的類。 

 

Margin and padding

關於這2個css設置： Bt4增長了一個5級的單位空間的功能。

1rem是默認的間距$spacer變量： 能夠給margin-right: 1rem選擇.mr-3 

或者使用響應式的變量來瞄準指定的viewports, 如給margin-right: 1rem選擇.mr-md-3，這會在斷點md的時候生效

 

Visibility 

.visible,   .invisible 

和display無關，僅僅是不可見，還佔空間的。 

.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}