bootstrap4框架使用摘要

bootstrap是一个开源的前端框架，主要用于页面布局。

官网介绍:

同时也是移动优先的布局框架。

移动优先是指bootstrap开发的页面，不仅可以用于web展示，也可以用于移动展示。

在bootstrap中使用标准化的CSS样式可以使页面根据屏幕大小自适应，但必须在head部分添加:

可以设置的属性:

m-设置外部边距

P-set边距内的填充

可以设置的方向:

t-设定顶部距离*-顶部

b-设置底部距离*-底部

l-设置左侧距离*-左侧

r-设置右侧距离*-右侧

x-设置x方向的*距离，即*-左边距和*-右边距。

y-设置y方向*-顶部和*-底部。

(无)-空表示设置四个方向。

可以设置的尺寸:

0-将边距设置为0:对于通过将其设置为0来优化边距或填充的类

1-(默认情况下)将边距或填充设置为spacer * .25。

2-(默认情况下)将边距或填充设置为spacer * .5

3-(默认情况下)将边距或填充设置为$spacer

4-(默认情况下)将边距或填充设置为$ spacer * 1.5

5-(默认情况下)将边距或填充设置为$spacer * 3

自动设置自动边距*将边距设置为自动。

示例:

Mr-3对应margin-right:3 ^ 3是一个不定值，随屏幕大小而变化。

Py-2对应padding-top:2；底部填充:2；

……

D-inline-block将块级元素转换为内联块级元素。

见官网:围栏布局。

效果如下:

偏移-*

d-flex

对齐-内容-*

作用于div子元素。

效果如下:

对齐-项目-*

这同样适用于div子元素。

效果如下:

柔性填充

作用于当前元素，效果是填充父元素。

灵活增长-*

尽可能扩大当前元素。效果如下:

伸缩-*

缩短当前元素是必要的，效果如下:

使用外部边距可以实现:

Ml-auto的意思是margin-left:auto，效果使当前元素级别向右。

Mx-auto表示左右外边距自动，效果是水平居中。

对齐-*

作用于当前元素，效果如下:

效果如下:

文本换行

字体会自动换行，适用于指定宽度的div中的字体。

不，包的字体是text-nowarp。

文本截断

适用于块级元素中的字体。

文本-*

效果如下:

列表-无样式列表没有黑点。

列表-内嵌列表

列表内联项目行中列表中的项目。

按如下方式使用:

见官网表。

Blockquote设置为块引用。

块引用引用的管脚-页脚块

效果如下:

新手：Bootstrap左边栏怎么控制右侧内容部分不用每个页面都做左边栏或者导航栏吧？

建议你在每个页面相同的位置写上导航栏，要不然就用iframe标签也可以做到但是做起了会有点麻烦个中情况应项目需求而异

bootstrap5.0在vue中使用？

可以的，bootstrap本来就用vue版本，不需要自己麻烦重写了

amos bootstrap怎么用？

首先要建立中介效应模型，然后在Amos的分析属性中设置bootstrap，运行分析之后即可得到相关结果。 　　SPSS AMOS 21.0是一款使用结构方程式，探索变量间的关系的软件 。Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。中介效应，它指的是X对Y的影响是通过M实现的，也就是说M是X的函数，Y是M的函数（Y-M-X）。考虑自变量X对因变量Y的影响，如果X通过M影响变量Y，则称M为中介变量。例如，上司的归因研究：下属的表现——上司对下属表现的归因——上司对下属表现的反应，其中“上司对下属表现的归因”为中介变量。

bootstrap-vue和elementui哪个好？

如果用vue+bootstrap写前端，就需要找bootstrap-vue这类用vue实现的bootstrap风格的组件，

还要加上一大堆第三方组件库，相当麻烦，还不如用element UI 这些原生就是vue写的组件库。

怎么用bootstrap做一个后台管理界面？

1、你得先制作界面布局图（效果图）；

2、根据效果图进行切图生成html文件；

3、将html文件嵌套在bootstrap中；

说明：bootstrap是自适应框架，请仔细查看结构说明。