Bootstrap是一种web框架,是基于HTML,CSS和JS的一种目前较为流行的前端框架。
Bootstrap包含有丰富的组件,根据提供的组件,开发者可以更加快速、便捷地搭建自己心仪的网站。通常包括有以下常用组件:下拉菜单、按钮组、按钮下拉菜单、导航、导航条、分页、排版、缩略图、警告对话框、进度条、媒体对象等。此外,bootstrap还包含有众多jQuery插件:莫泰局昂、标签页、滚动条、弹出框等。
有关bootstrap的下载和文档可到bootstrap中文网:查看。
那么使用bootstrap的优势在哪里?第一、利于开发响应式网站,解决不同设备的兼容性问题。第二、提高了网站的开发速度和开发效率。
参考:如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
本篇文章将总结常用组件及其属性。
1.1栅格系统
1、栅格系统是一种行和列构成的一种布局。随着,屏幕分辨率的变大,最多可展示12个列。
PC端:
PAD端:
手机终端:
2、栅格参数:
col-lg-*:(屏幕>=1200px) PC
col-md-*:(992px-1200px)
col-sm-*:(768px-992px)小平板
col-xs-*:(小于768px)手机
3.代码示例:
<div> <div> <div> <div> <img src="https://www.jb51.net/img/codeguide.png"> <h2>靠谱研究所</h2> <p>我们的口号是:靠谱、有趣、有料</p> </div> </div> <div> <div> <img src="https://www.jb51.net/img/codeguide.png"> <h2>靠谱研究所</h2> <p>我们的口号是:靠谱、有趣、有料</p> </div> </div> </div> </div>
1.2辅助类
1.文本颜色:
<span> </span> <h1>text-primary靠谱研究所</h1> <h1>text-success靠谱研究所</h1> <h1>text-warning靠谱研究所</h1> <h1>text-danger靠谱研究所</h1> <h1>text-info靠谱研究所</h1> <h1>text-muted靠谱研究所</h1>
2、背景颜色:
<span> </span> <h1>text-primary靠谱研究所</h1> <h1>text-success靠谱研究所</h1> <h1>text-warning靠谱研究所</h1> <h1>text-danger靠谱研究所</h1> <h1>text-info靠谱研究所</h1> <h1>text-muted靠谱研究所</h1>
3、关闭按钮&三角图标:
<span> </span> <!--关闭按钮--> <button><span>×</span></button> <!--三角图标--> <span></span>
4、快速浮动:
左浮动:pull-left
右浮动:pull-right 清除浮动:clearfix
浮动会将块元素转换成行内元素
<div>这是左边的内容</div> <div>这是右边的内容</div>
5、块元素居中、文字居中:
<!--块元素垂直居中--> <style> #div2{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);//平移 } </style> <span> </span><!--实现块元素水平居中--> <div>块元素水平居中</div> <!--实现块元素垂直居中--> <div>块元素垂直居中</div>
1.3表格
1.表格颜色:active,warning,danger,info,danger
2.鼠标悬停效果:table-hover
3.带边框表格:table-bordered
4.各行换色:table-striped
<table><!--隔行换色、鼠标悬停、表格边框--> <thead> <tr><!--表格颜色--> <th>姓名:</th> <th>性别:</th> <th>年龄:</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>男</td> <td>23</td> </tr> <tr> <td>张三</td> <td>男</td> <td>23</td> </tr> <tr> <td>张三</td> <td>男</td> <td>23</td> </tr> </tbody> </table>
1.4列表:
class属性:ul:list-group
li:list-group-item 徽章:span:badge
列表项颜色:list-group-item-(success/warning/danger)