BooStrap4文档摘录: 1. Layout

时间 2019-11-13

标签 boostrap4 boostrap 文档摘录 layout 栏目 C&C++ 繁體版

原文原文链接

文档：

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

w3c的案例：很直观：css

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

Bootstrap Ruby Gem

下载后，须要进行一系列配置。java

1. @import "bootstrap"; #在application.scss中，其余的全删除。jquery

2. 它的JavaScript功能依赖JQuery。因此须要使用jquery-rails这个gem，由于event使用jquery写的git

3. 在application.js中加入github

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

大纲： bootstrap

开始：下载，内容，浏览器及系统支持， 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写的。sass

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

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

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

</div>

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