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以上,目的是页面的结构显示不冲突。
使用了一系列的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;自定义断点;
Bootstrap's media object可以用来建设高重复使用的组件,像评论,tweets等待。
.media,.media-body
可以嵌套。
可以像列表一样使用:
<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;
}
BooStrap4文档摘录: 1. Layout的更多相关文章
- BooStrap4文档摘录 2 Content, Component
Content Reboot:从新写了主要元素的排列. 本章讲了各种元素及其相关的类. ⚠️ 文档左上角有搜索栏. Components Alert✅ Badge✅ Button✅和Button gr ...
- BooStrap4文档摘录 Utilities
border:可以用原生css实现效果.❌没看 clearfix, float, ✅ close icon ✅ colors ✅ display✅ 各种显示的格式. embed ✅ <ifr ...
- 【转】(七)unity4.6Ugui中文教程文档-------概要-UGUI Auto Layout
原创至上,移步请戳:(七)unity4.6Ugui中文教程文档-------概要-UGUI Auto Layout 6. Auto Layout Rect Transform布局系统是足够灵活,可以处 ...
- 【转】(三)unity4.6Ugui中文教程文档-------概要-UGUI Basic Layout
原创至上,移步请戳:(三)unity4.6Ugui中文教程文档-------概要-UGUI Basic Layout 2. BasicLayout 在这一节我们会看到UI元素相对于画布的位置是怎样的. ...
- Kooboo CMS技术文档之一:Kooboo CMS技术背景
语言平台 依赖注入方案 存储模型 1. 语言平台 Kooboo CMS基于.NET Framework 4.x,.NET Framework 4.x的一些技术特性成为站点开发人员使用Kooboo CM ...
- C# 给word文档添加水印
和PDF一样,在word中,水印也分为图片水印和文本水印,给文档添加图片水印可以使文档变得更为美观,更具有吸引力.文本水印则可以保护文档,提醒别人该文档是受版权保护的,不能随意抄袭.前面我分享了如何给 ...
- Xamarin技术文档------VS多平台开发
此技术业余时间研究,仅供大家学习参考,不涉及深入研究,有一定开发基础的人员,应该都能较快上手. 一.简介 Xamarin始创于2011年,旨在使移动开发变得难以置信地迅捷和简单.Xamarin的产品简 ...
- 利用Java动态生成 PDF 文档
利用Java动态生成 PDF 文档,则需要开源的API.首先我们先想象需求,在企业应用中,客户会提出一些复杂的需求,比如会针对具体的业务,构建比较典型的具备文档性质的内容,一般会导出PDF进行存档.那 ...
- log4j 文档
log4j中文文档 中文详细教程 log4j中文文档 这篇文章描述了Log4j的API.独一无二的特色和设计原理.Log4j是一个聚集了许多作者劳动成果的开源软件项目.它允许开发人眼以任意的粒度 ...
随机推荐
- 【深拷贝VS浅拷贝】------【巷子】
1.回顾 数据传递的方法: 值传递:基本数据类型的数据不会发改变,因为基本数据类型一般存放在栈里面,值传递只是将数据拷贝了一份给另一个变量 引用传递:会改变内存中的数据,因为引用类型的数据都存放在堆里 ...
- 使用_Capistrano_进行自动化部署(2)
之前的一篇文章是为了解决问题而写的,很多东西都没有介绍清楚,这一篇文章就是完整介绍一下 Capistrano,主要的参考来源是 Modern PHP 这本书. Capistrano 是用于自动部署应用 ...
- Redis集群管理(二)
1.进入集群客户端 任意选一个redis节点,进入redis 所在目录 cd /redis 所在目录/src/ ./redis-cli -h 本地节点的ip -p redis的端口号 -a 密码 [r ...
- PHP的线性安全和非线性安全的区别
从2000年10月20日发布的第一个Windows版的PHP3.0.17开始的都是线程安全的版本,这是由于与Linux/Unix系统是采用多进程的工作方式不同的是Windows系统是采用多线程的工作方 ...
- timedatectl — Control the system time and date
timedatectl --help 的执行结果如下: timedatectl [OPTIONS...] COMMAND ... Query or change system time and dat ...
- Drawing Graphs using Dot and Graphviz
Drawing Graphs using Dot and Graphviz Table of Contents 1. License 2. Introduction 2.1. What is DOT? ...
- matplotlib常见绘图基础代码小结:折线图、散点图、条形图、直方图、饼图
一.折线图 二.散点图 三.条形图 四.直方图 五.饼图 一.折线图折线图用于显示随时间或有序类别的变化趋势 from matplotlib import pyplot as plt x = rang ...
- IQKeyboardManager第三方库的使用
IQKeyboardManager是iOS中解决键盘弹起遮挡UITextField/UITextView的一种很实用的工具.无需输入任何代码,不需要额外的设置.使用IQKeyboardManager的 ...
- Sparsity稀疏编码(一)
稀疏编码来源于神经科学,计算机科学和机器学习领域一般一开始就从稀疏编码算法讲起,上来就是找基向量(超完备基),但是我觉得其源头也比较有意思,知道根基的情况下,拓展其应用也比较有底气.哲学.神经科学.计 ...
- vuex的一个坑
1 error in callback for watcher "function (){ return this._data.$$state }" 用深拷贝解决 2 接口依赖: ...