功能强大的Bootstrap使用手册（一）

发布时间：2020-12-18 00:50:52 所属栏目：安全来源：网络整理

导读：BootStrap对开发者来说最大的好处就是响应式布局和一些优秀的样式。现在我给大家介绍一些使用BootStrap的步骤和一些常用的东西。 1.编写头部 LearnBootstrap script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"gt; script src="https:/

BootStrap对开发者来说最大的好处就是响应式布局和一些优秀的样式。现在我给大家介绍一些使用BootStrap的步骤和一些常用的东西。

1.编写头部

LearnBootstrap

2.引入js

这个可以写在body

3.使用container类

container类是一个常用的div类主要是用居中功能

4.使用栅格化系统

栅格化系统是BootStrap一个非常常用的一个布局系统简单的使用如下

<div class="col-xs-12 col-sm-6 col-md-8 col-md-push-4">.col-xs-12 .col-sm-6 .col-md-8

<div class="col-xs-6 col-md-4 col-md-pull-8">.col-xs-6 .col-md-4

可以看到栅格化系统可以根据不同设备调整不同宽度

5.使用表格

表格标题表格内容表格内容表格内容

如果是想某一格变颜色也可以在th标签内加类像tr一样

6.使用表单

最基本的用法如下

如果将form的类设为form-inline则将所有元素显示在同一行

如果将form的类设为form-horizontal则每个form-group显示一行，不过要自己设置宽度如

我们通常在注册账号时，信息错误或者正确他会在旁边提示，而且输入框的颜色会不同 Bootstrap给我们提供了这个很实用的功能

7.按钮

按钮是必不可少的一样东西

类中还可以添加尺寸

以上就是Bootstrap的使用步骤和常用用法用上这个框架后不仅开发的速度上去了，质量也提升了。

如果大家还想深入学习，可以点击进行学习，再为大家附3个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

表格标题	表格标题
表格内容	表格内容
表格内容	表格内容
表格内容	表格内容