How many common classes are there in bootstrap?-Bootstrap Tutorial-php.cn

How many common classes are there in bootstrap?

尚

Release： 2019-07-31 14:33:46

Original

4560 people have browsed it

How many common classes are there in bootstrap?

## Commonly used classes in bootstrap:

Basic class

.code来显示单行内联代码
.pre来显示多行块代码
.kbd来显示用户输入代码
.pre-scrollable高度超出340px，就会在Y轴出现滚动条

Copy after login

Table class

.table基础表格margin-bottom:20px，在thead底部2px的浅灰实线，每个单元格顶部1px的浅灰实线
.table-striped：斑马线表格，隔行有一个浅灰色的背景色
.table-bordered：带边框的表格,所有单元格有1px的边框
.table-hover：鼠标悬停在表格的行上,有高亮的背景色
.table-condensed：将单元格的内距由8px调至5px
.table-responsive：设置类名.table-responsive的容器,将<table class="table">置于这个容器中

Copy after login

Classes of table rows

.active表示当前活动信息
.success成功或正确的行为
.info表示中立信息或行为
.warning表示警告
.danger表示危险活着错误行为

Copy after login

Except for .active, the other four class names should match .table-hover

Form

.form- horizontal form effect, matching the grid system of the Bootstrap framework; setting the padding and margin values of the form controls; changing the expression of "form-group", similar to the "row" of the grid system

also when using input in Bootstrap The type type must be added
In order to make the control style correct in various form styles, it is necessary to add .form-control
Multiple row selection to set the value of the multiple attribute to multiple
rows defines the height, and cols sets the width. .form-control, there is no need for cols
Both checkbox and radio use the label package
If the checkbox needs to be arranged horizontally, you only need to add the class name "checkbox-inline" to the label label

Fixed navigation bar

The top and bottom of the main content of the page are covered by the fixed navigation bar. In order to prevent the fixed navigation bar from covering the content, we need to do some processing on the body:

body {
padding-top: 70px;/*有顶部固定导航条时设置*/
padding-bottom: 70px;/*有底部固定导航条时设置*/
}
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
　…
</div>

Copy after login

In fact, in addition to this solution, we have other solutions, placing the fixed navigation bar on the page content Front:

<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
　…
</div>
<div class="content">我是内容</div>

Copy after login

Add the following style code in the file:

.navbar-fixed-top ~ .content {
padding-top: 70px;
}
.navbar-fixed-bottom ~ .content {
padding-bottom: 70px;
}

Copy after login

Recommended:

bootstrap Getting Started Tutorial

The above is the detailed content of How many common classes are there in bootstrap?. For more information, please follow other related articles on the PHP Chinese website!