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

BootStrap对开发者来说最大的好处就是响应式布局和一些优秀的样式

现在我给大家介绍一些使用BootStrap的步骤和一些常用的东西

1.编写头部

2.引入js

这个可以写在body

3.使用container类

container类是一个常用的div类

主要是用居中功能

4.使用栅格化系统

栅格化系统是BootStrap一个非常常用的一个布局系统

简单的使用如下

 
 
 
 
.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8
 
.col-xs-6 .col-md-4



 
 
.col-xs-12 .col-sm-6 .col-md-8
 
.col-xs-6 .col-md-4

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

5.使用表格

 
 

 
 

  

  

  
表格标题
  
表格标题
  
表格标题
  
  
  

  
  

  
表格内容
  
表格内容
  
表格内容
  
  
  

  
表格内容
  
表格内容
  
表格内容
  
  
  

  
表格内容
  
表格内容
  
表格内容
  
  
 
 

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

6.使用表单

最基本的用法如下

 

 
 

  
  Email address
  
  
 
 

  Password
  
 
 

  File input
  
  
  
Example block-level help text here.
 
 

  
   Check me out
  
 
 Submit
 

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

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

如

 
 

 

  Email
  
  

  
  
 
 

  Password
  

  
  
 
 summit
 

我们通常在注册账号时，信息错误或者正确他会在旁边提示，而且输入框的颜色会不同

Bootstrap给我们提供了这个很实用的功能

 

 
 
 

  Input with success
  
  
  
  
  (success)
 
 
 

  Input with warning
  
  
  (warning)
 
 
 

  Input with error
  
  
  (error)
 
 

7.按钮

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

（默认样式）Default

（首选项）Primary

（成功）Success

（一般信息）Info

（警告）Warning

（危险）Danger

类中还可以添加尺寸

 （大按钮）Large button
 （默认尺寸）Default button
 （小按钮）Small button
 （超小尺寸）Extra small button

以上就是Bootstrap的使用步骤和常用用法

用上这个框架后不仅开发的速度上去了，质量也提升了。

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