bootstrap学习使用（导航条、下拉菜单、轮播、栅格布局等）

本文算是bootstrap学习使用的年底大总结，供大家参考，具体内容如下

bootstrap框架

BootStrap学习从现在开始，前端开发框架Bootstrap，可大大简化网站开发过程，从而深受广大开发者的喜欢。

导航

导航对于一位前端人员来说并不陌生。可以说导航是一个网站重要的元素组件之一，可以便于用户查找网站所提供的各项功能服务。

 .navbar-inverse:改变导航条的背景颜色
 .container:居中显示
 固定导航条会遮盖页面内容，解决办法设置body的*padding-top*

下拉菜单

小伙伴们注意，在Bootstrap框架中的下拉菜单组件是一个独立的组件。

 下拉菜单
 

 
Action
 
Another action
 
Something else
 

 
linkkk/a>
 

    data属性API可以使用所有的Bootstrap插件

轮播广告（carousel）

 
 

 

 

 

 

 
 
 
 
 ……
 
 
 
 ……
 
 

 
 
 
 previous
 
 
 
 Next
 

    .data-slide-to索引，指向轮播广告的内容，从0开始
    .carousel设置广告框的样式(高度、背景色)
    .carousel .item设置广告框的样式(高度、背景色)
栅格系统布局

 
 .col-md-4
 .col-md-4
 .col-md-4
 

标签页tabs

 
Home
 
Profile
 
Messages
 
Settings




 …
 …
 …
 …

标签页tabs

 
 

 
 
 
 ×
 Close
 
Modal title
 
 

 
 
 …
 

 
 
 Close
 Save
 

 
 

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

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

精彩专题分享：jQuery图片轮播 Javascript图片轮播

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