Bootstrap中的关键CSS总结
作者:feify_fei512_478 | 来源:互联网 | 2023-08-27 12:00
最近在学习Bootstrap,虽然说Bootstrap是一个框架,但是和其他前端框架相比,Bootstrap中的CSS部分应该是我们需要着重学习的部分。
最近在学习Bootstrap,虽然说Bootstrap是一个框架,但是和其他前端框架相比,Bootstrap中的CSS部分应该是我们需要着重学习的部分。下面仅总结一下我认为Bootstrap中较重要的CSS类。
栅格系统相关类
- 所有
.row
必须放置在.container
或者.container-fluid
中。
- 每个
.row
中均分为12个.col-*
,网页内容只能放在.col-*
中,不能放在.row
中,.col-*
中可以嵌套.row
.col-*
根据屏幕大小可以分为
.col-lg-*
:适用于大型屏幕(min-width=1200px)
.col-md-*
:适用于中型屏幕(min-width=992px)
.col-sm-*
:适用于平板设备(min-width=768px)
.col-xs-*
:适用于手机设备 (max-width = 767px)
- 可以为一个元素指定不同屏幕下的宽度,即在不同屏幕宽度下表现不同的样式。但是注意:
.col-xs-*
:对所有屏幕都有效
.col-sm-*
:对平板设备及以上设备有效
.col-md-*
:对中型及以上宽度屏幕有效
.col-lg-*
:仅对于大型屏幕有效
也就是说,要是你希望一个div
在xs
和lg
类型下的设备都表现一致,仅需设置.col-xs-*
即可。
- 隐藏相关类:
.hidden-lg
:在大PC屏幕下隐藏
.hidden-md
:在中等PC屏幕下隐藏
.hidden-sm
:在平板屏幕下隐藏
.hidden-xs
:在手机屏幕下隐藏
- 偏移相关类
.col-xs-offset-*
:在lg/md/sm/xs屏幕下偏移
.col-sm-offset-*
:在lg/md/sm屏幕下偏移
.col-md-offset-*
:在lg/md屏幕下偏移
.col-lg-offset-*
:在lg屏幕下偏移
表单相关类
.form-control
:控制input
元素占满一整行
.form-group
:使label
和相关input
控件成组
.help-block
:提示文字相关类
.from-inline
:是表单呈现为水平样式(所有控件在一行显示)
.checkbox
:专门为checkbox
控件的父元素准备的类
.form-horizontal
:表单控件的.form-group
可以看成.row
,子元素的水平排布使用.col-*
来控制
.control-label
:可以使得元素内的文本向右对齐。
媒体对象
.media
表示一个媒体对象。
.media-left
,.media-body
,.media-right
表示一个媒体对象的组成部分。可以看做一行中的左中右部分。
.media-middle
,.media-bottom
表示媒体对象中的内容的垂直对齐方式,默认水平对齐。
面板
.panel
:表示一个面板
.panel-body
:面板主体
.panel-heading
:面板头部
.panel-footer
:面板底部
.panel-title
:用于当做专门当做标题而作为.panel-heading
子元素的类。可以这样使用Panel title
。
表格
.table
:加在table上,表示一个表格。
.table-bordered
:带有边框的表格,需要与.table
一起使用
.table-responsive
:响应式表格,需要与.table
一起使用
.table-striped
:隔行变色表格,需要和.table
一起使用
.table-hover
:悬停变色表格,需要和.table
一起使用