bootstrap的示例分析

这篇文章给大家分享的是有关bootstrap的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

成都创新互联公司专注于企业营销型网站建设、网站重做改版、龙游网站定制设计、自适应品牌网站建设、H5开发、商城网站开发、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为龙游等各大城市提供网站开发制作服务。

bootstrap提供了三种类型的下载：

1、用于生产环境的 Bootstrap

编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件。

2、Bootstrap 源码

Less、JavaScript 和 字体文件的源码，并且带有文档。需要 Less 编译器和一些设置工作。

3、Sass

这是 Bootstrap 从 Less 到 Sass 的源码移植项目，用于快速地在 Rails、Compass 或 只针对 Sass 的项目中引入。

其实我们不用下载bootstrap也可以使用它：

Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 cdn 加速服务。基于国内云厂商的 CDN 服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。

base.html

 
 
 
 
 
 

 
 
 
 
 
 
你好，bootstrap！

 
 
 
 
 

 base.html中已经引入了bootstrap，将其保存，我们就可以使用bootstrap提供的样式了。

字体图标

bootstrap默认提供了二百多个图标。我们可以通过span标签来使用这些图标：

 
图标
 
 
 
 
 
 
 
 

按钮

　　标签用于创建按钮，bootstrap提供了丰富的按钮样式。

 
按钮
 按钮
 primary
 success
 info
 warning
 danger
 
 
按钮尺寸
 按钮
 primary
 success
 info

 
把图标显示在按钮里
   按钮

按钮除了有默认的大小外，bootstrap还提供三个参数来调整按钮的大小，分别是：btn-lg、btn-sm和btn-xs。

下拉菜单

下拉菜单是最常见的交互之一，bootstrap提供了漂亮的样式。

  
下拉菜单
 
  
  Dropdown
  
  
  
  Action
  Another action
  Something else here
  Separated link