<>BootStrap 简介

概念:

课程目标:

* 响应式布局技术
* 了解BootStrap前端框架
<>二.BootStrap

​ Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。

​ Bootstrap 是一个用于 HTML、CSS 和 JS 开发的开源工具包,来自于Twitter,利用 Bootstrap 提供的 Sass
变量和混合(mixins)、响应式栅格系统、可扩展的预制组件以及强大的 jQuery 插件,能够让你快速地开发出产品原型或构建整个 app。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X2TH0vnA-1589444900650)(E:\政通路\课堂笔记\S2\bootstrap\assets\image-20200514104947017.png)]

<>2.1 引入文件

bootStrap.min.css

jquery.min.js

bootStrap.min.js

<>2.2 栅格系统

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mB2xHvew-1589444900655)(E:\政通路\课堂笔记\S2\bootstrap\assets\image-20200514105715506.png)]

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。

我们也可以根据自己的需要,定义列数:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pMmnc2G1-1589444900658)(E:\政通路\课堂笔记\S2\bootstrap\assets\image-20200514105759039.png)]

Bootstrap 4 的网格系统是响应式的,列会根据屏幕大小自动重新排列。

Bootstrap 4 网格系统有以下 5 个类(class):

* .col- 针对所有设备
* col-xs 小设备
* .col-sm 平板 - 屏幕宽度等于或大于 576px
* .col-md 桌面显示器 - 屏幕宽度等于或大于 768px)
* .col-lg 大桌面显示器 - 屏幕宽度等于或大于 992px)
* .col-xl 超大桌面显示器 - 屏幕宽度等于或大于 1200px)
<>2.2.1网格系统规则

Bootstrap4 网格系统规则:

*
网格每一行需要放在设置了.container (固定宽度) 或 .container-fluid (全屏宽度)
类的容器中,这样就可以自动设置一些外边距与内边距。

*
使用行样式row来创建水平的列组。

*
内容需要放置在列中,并且只有列可以是行的直接子节点。

*
预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。col:column列单词;sm:平板;-4:4个格

col-sm-n,n(1–12)设置列。

*
列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。

*
网格列是通过跨越指定的 12 个列来创建。 例如,设置三个相等的列,需要使用用三个.col-sm-4 来设置。

*
Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox(弹性盒子) 而不是浮动。
Flexbox 的一大优势是,没有指定宽度的网格列将自动设置为等宽与等高列 。

列组合

​ row/col-md-4 col-md-8等测试

列偏移

​ col-md-offset-4,原理 margin-left

列嵌套

<div class=‘row’>div代码嵌套代码</div>

列排序

col-md-push-8 推向右侧

<>2.2.2 CSS全局样式

的一大优势是,没有指定宽度的网格列将自动设置为等宽与等高列 。

列组合

​ row/col-md-4 col-md-8等测试

列偏移

​ col-md-offset-4,原理 margin-left

列嵌套

<div class=‘row’>div代码嵌套代码</div>

列排序

col-md-push-8 推向右侧

<>2.2.2 CSS全局样式


是CSS最基础、最简单的语法组合而成的,通过这些基础而又核心的布局语法,不需要太多时间就能制作出来比较精美的页面。并且为什么叫它是全局样式,主要是它的使用比较自由,可以在页面中的任意位置使用,也可以放在Bootstrap组件里使用

技术
©2019-2020 Toolsou All rights reserved,
Redis 计数器 高并发的应用颠覆!午睡千万别超过这个时间!当心引发致命疾病…ELementUI select多选下拉框获取选中项的全部属性 Unity3D Input按键系统指定位置输出字符串--PTAKeras训练数据加载实现小结(精华)2020年6月26日 C#类库 文件读写操作帮助类python获取excel的一列或者一行的数据keras从dataframe中读取数据并进行数据增强进行训练(分类+分割)SpringBoot JpaRepository 数据库增删改查