5_bootstrap之响应式布局|列表|按钮

时间:2022-10-14 16:10:51

5、响应式工具

为针对性地在移动页面上展示和隐藏不同的内容,bootStrap提供响应式工具。

可以让开发人员通过该工具决定,在何种屏幕尺寸下,隐藏或者显示某些元素

帮助手册位置:全局CSS样式---响应式工具

5_bootstrap之响应式布局|列表|按钮

6、列表

BootStrap同样提供了实用的列表样式供开发人员使用。

帮助手册位置:全局CSS样式----排版----列表

.list-inline

将列表所有元素放置于一行

示例:

5_bootstrap之响应式布局|列表|按钮

效果:

5_bootstrap之响应式布局|列表|按钮

7、按钮

BootStrap提供了丰富的按钮样式供开发人员使用。

帮助手册位置:全局CSS样式----按钮

任何HTML元素加上以下样式都会变成对应按钮

.btn btn-default

示例:

<a class="btn btn-default">Link</a>

效果:5_bootstrap之响应式布局|列表|按钮

.btn btn-primary

示例:

<a class="btn btn-primary">(首选项)Primary</a>

效果:5_bootstrap之响应式布局|列表|按钮

.btn btn-success

示例:

<a class="btn btn-success">(成功)Success</a>

效果:5_bootstrap之响应式布局|列表|按钮

.btn btn-info

示例:

<a class="btn btn-info">(一般信息)Info</a>

效果:5_bootstrap之响应式布局|列表|按钮

.btn btn-warning

示例:

<a class="btn btn-warning">(警告)Warning</a>

效果:

5_bootstrap之响应式布局|列表|按钮

.btn btn-danger

示例:

<a class="btn btn-danger">(危险)Danger</a>

效果:

  5_bootstrap之响应式布局|列表|按钮

.active

表示按钮被点击的样式

示例:

<a class=”btn btn-danger active”>(危险)Danger</a>

效果:

  5_bootstrap之响应式布局|列表|按钮

.disabled

表示按钮被禁用的样式

示例:

<a class=”btn btn-danger disabled”>(危险)Danger</a>

效果:

  5_bootstrap之响应式布局|列表|按钮