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>

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;
}