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通俗的讲是什么?
Bootstrap是一个做网页的框架(目前最流行的WEB前端框架之一),就是说用户只需要写HTML标签调用它的类就可以很快速的做一个高大上的网页,用户不用担心兼容问题,提供了很多样式供用户选择!
webstorm怎么引入bootstrap?
WebStorm是用来是Jetbrains公司旗下一款开发工具,主要用于Web前端开发,是软件。
bootstrap是一个前端框架,所谓框架就是为满足特定需要在特定环境下提供的一些有机联系的组件。
1.
打开webstorm的设置
2.
点击Plugins
3.
在搜索框输入bootstrap3,之后点击Installed安装,安装成功后重启webstorm
4.
需要使用的时候,按Ctrl+j,输入bs3-
怎么用bootstrap做一个后台管理界面?
1、你得先制作界面布局图(效果图);
2、根据效果图进行切图生成html文件;
3、将html文件嵌套在bootstrap中;
说明:bootstrap是自适应框架,请仔细查看结构说明。
node和bootstrap先学哪个?
不是一个东西,bootstrap是一套前端框架,是前端层面的东西,而node其实属于后端,是用js编写后端服务器相关逻辑的,二者结合起来可以做一整套应用