bootstrap前端框架(bootstrap前端框架有几层)
bootstrap4框架使用总结
bootstrap 是一个开源的前端框架，主要应用于页面的布局。
官网介绍：
同时，它也是移动优先的布局框架。
移动优先，指使用bootstrap开发的页面，不仅能用于web显示，还能用于移动端显示。
使用bootstrap中规范好的CSS样式，能使页面根据屏幕大小自适应，但必须要在 head 部分加入：
可以设置的属性：
m - 设置外边距 margin
p - 设置内边距 padding
可以设置的方向：
t - 设置上 距 *-top
b - 设置下 距 *-bottom
l - 设置左 距 *-left
r - 设置右 距 *-right
x - 设置x方向的*距，即左右边距 both *-left and *-right
y - 设置y方向 both *-top and *-bottom
(none) - 空则表示设置四个方向
可以设置的大小：
0 - 设置 边距为0：for classes that eliminate the margin or padding by setting it to 0
1 - (by default) 设置 the margin or padding to $spacer * .25
2 - (by default) 设置 the margin or padding to $spacer * .5
3 - (by default) 设置 the margin or padding to $spacer
4 - (by default) 设置 the margin or padding to $spacer * 1.5
5 - (by default) 设置 the margin or padding to $spacer * 3
auto - 设置自动的 外边距 * the margin to auto
示例：
mr-3 对应 margin-right: 3 3为不定值，随屏幕大小变化。
py-2 对应 padding-top:2;padding-bottom:2;
......
d-inline-block 将块级元素转换为行内块级元素
见官网： 栅栏布局
效果如下：
offset-*
d-flex
justify-content-*
作用于div子元素。
效果依次为：
align-items-*
同样作用于div子元素。
效果依次为：
flex-fill
作用于当前元素，效果是充满父元素。
flex-grow-*
将当前元素尽可能地增长，效果如下：
flex-shrink-*
将当前元素有必要地缩短，效果如下：
利用外边距可以实现：
ml-auto 表示 margin-left:auto ，效果使得当前元素水平居右。
mx-auto 表示左右外边距都为 auto ，效果是水平居中。
align-*
作用于当前元素 ，效果如下：
效果如下：
text-wrap
字体会自动换行，适用于 规定宽度 的div中的字体。
不包裹字体则是 text-nowarp 。
text-truncate
适用于块级元素中的字体。
text-*
效果如下：
list-unstyled 列表无黑点
list-inline 行内列表
list-inline-item 行内列表中的一项
使用如下：
见官网 表格
blockquote 设置为块引用
blockquote-footer 块引用的引脚
效果如下：
bootstrap是什么
Bootstrap是一个前端框架、是目前最受欢迎、最流行的web前端框架、是Twitter公司的Mark Otto和Jacob Thornton一起开发的，Bootstra框架是基于HTML、CSS、JavaScript 开发的，它因简洁、直观、功能强大被开发者广发使用。
Bootstrap前端框架使得 Web 开发更加快捷，提供了优雅的HTML、CSS和JavaScript规范，它是由动态CSS语言Less写成。Bootstrap前端框架刚推出就颇受欢迎，一直是GitHub上的热门开源项目，是一些前端开发者较为熟悉的框架。
Bootstrap简介
什么是Bootstrap？
Bootstr是一个用于快速开发web应用程序和网站的前端框架，Bootstrap是基于HTML，Css，JavaScript的。
Bootstrap历史：
? ? ? ? Bootstrap是由Twitt的Mark Otto和Jecob Thomton开发的。Bootstrap是2011年八月在Github上发布开源产品。
Bootstrap的优点：
? ? ?? 1.所有主流浏览器都支持Bootstrap。
? ? ? ? 2.容易上手。
? ? ? ? 3.响应式设计：Bootstrap的响应式能够自适应与台式机、平板电脑和手机。
? ? ? ? 4.包含了强大的内置组件，易于定制。
? ? ? ? 5.提供了基于web定制。
? ? ? ? 6.Bootrap是开源的。
Bootstrap包含的内容 ：
? ? ? ? 基本结构：Bootstrap提供了一个带有网络系统、链接样式、北京的基本结构。
? ? ? ? css：Bootstrap自带一下特性：全局css设置、定义基本的HTML元素样式、可扩展class、以及一个先进的网格系统。
? ? ? ? javascript 插件：Bootstrap包含了十几个自定义的的jq插件。你可以直接包含所有的插件，也可以逐个包含这些插件。
? ? ? ? 组件：Bootstrap包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
? ? ? ? 定制：你可以定制Bootstrap的组件、lESS 变量和jQuer插件来得到你自己的版本。