Bootstrap是一种web框架,是基于HTML,CSS和JS的一种目前较为流行的前端框架。
Bootstrap包含有丰富的组件,根据提供的组件,开发者可以更加快速、便捷地搭建自己心仪的网站。通常包括有以下常用组件:下拉菜单、按钮组、按钮下拉菜单、导航、导航条、分页、排版、缩略图、警告对话框、进度条、媒体对象等。此外,bootstrap还包含有众多JQuery插件:莫泰局昂、标签页、滚动条、弹出框等。
有关bootstrap的下载和文档可到bootstrap中文网:www.bootcss.com查看。
那么使用bootstrap的优势在哪里?第一、利于开发响应式网站,解决不同设备的兼容性问题。第二、提高了网站的开发速度和开发效率。
本篇文章将总结常用组件及其属性。
1.1栅格系统
1、栅格系统是一种行和列构成的一种布局。随着,屏幕分辨率的变大,最多可展示12个列。
PC端:
PAD端:
手机终端:
2、栅格参数:
col-lg-*:(屏幕>=1200px) PC
col-md-*:(992px-1200px)
col-sm-*:(768px-992px)小平板
col-xs-*:(小于768px)手机
3.代码示例:
- <div class="container" style="border:1px solid red;">
- <div class="row">
- <div class="col-lg-3 col-sm-4 col- xs-6">
- <div class="thumbnail">
- <img src="img/codeguide.png">
- <h2>靠谱研究所</h2>
- <p>我们的口号是:靠谱、有趣、有料</p>
- </div>
- </div>
- <div class="col-lg-3 col-sm-4 col- xs-6">
- <div class="thumbnail">
- <img src="img/codeguide.png">
- <h2>靠谱研究所</h2>
- <p>我们的口号是:靠谱、有趣、有料</p>
- </div>
- </div>
- </div>
- </div>
1.2辅助类
1.文本颜色:
- <span style="white-space:pre"> </span> <h1 class="text-primary">text-primary靠谱研究所</h1>
- <h1 class="text-success">text-success靠谱研究所</h1>
- <h1 class="text-warning">text-warning靠谱研究所</h1>
- <h1 class="text-danger">text-danger靠谱研究所</h1>
- <h1 class="text-info">text-info靠谱研究所</h1>
- <h1 class="text-muted">text-muted靠谱研究所</h1>
2、背景颜色:
- <span style="white-space:pre"> </span> <h1 class="bg-primary">text-primary靠谱研究所</h1>
- <h1 class="bg-success">text-success靠谱研究所</h1>
- <h1 class="bg-warning">text-warning靠谱研究所</h1>
- <h1 class="bg-danger">text-danger靠谱研究所</h1>
- <h1 class="bg-info">text-info靠谱研究所</h1>
- <h1 class="bg-muted">text-muted靠谱研究所</h1>
3、关闭按钮&三角图标:
- <span style="white-space:pre"> </span>
- <button class="close"><span>×</span></button>
-
- <span class="caret"></span>
4、快速浮动:
左浮动:pull-left右浮动:pull-right 清除浮动:clearfix
浮动会将块元素转换成行内元素
- <div class="pull-left bg-primary">这是左边的内容</div>
- <div class="pull-right bg-danger">这是右边的内容</div>
5、块元素居中、文字居中:
-
- <style>
- #div2{
- position:absolute;
- left:50%;
- top:50%;
- transform:translate(-50%,-50%);//平移
- }
- </style>
- <span style="white-space:pre"> </span>
- <div id="div1" class="center-block text-center" style="width:500px;border:1px solid red;">块元素水平居中</div>
-
- <div id="div2" class="center-block text-center" style="width:500px;border:1px solid red;">块元素垂直居中</div>
1.3表格
1.表格颜色:active,warning,danger,info,danger
2.鼠标悬停效果:table-hover
3.带边框表格:table-bordered
4.各行换色:table-striped
- <table class="table table-striped table-hover table-bordered">
- <thead>
- <tr class="danger">
- <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-groupli:list-group-item 徽章:span:badge 列表项颜色:list-group-item-(success/warning/danger)
- <ul class="list-group">
- <li class="list-group-item">
- 靠谱研究所
- <span class="badge">10</span>
- </li>
- <li class="list-group-item list-group-item-success">IT研究所</li>
- <li class="list-group-item list-group-item-warning">美食研究所</li>
- <li class="list-group-item list-group-item-info">美妆研究所</li>
- </ul>
1.5表单:
表单分组:form-group
表单项:(input/span/textarea):form-control
- <style>
- .container{
- width:450px;
- height:300px;
- background:#ffffff;
- position:absolute;
- left:50%;
- top:50%;
- transform:translate(-50%,-50%);
- border-radius:20px;
- }
- </style>
- <span style="white-space:pre"> </span><form role="form">
- <h3 class="text-center">靠谱研究所后台管理系统</h3>
- <div class="form-group has-success has-feedback">
- <label for="user">用户名</label>
- <input type="text" id="user" placeholder="请输入用户名" class="form-control">
- <span class="glyphicon glyphicon-ok form-control-feedback"></span>
- </div>
- <div class="form-group has-error has-feedback">
- <label for="pass">密码</label>
- <input type="text" id="pass" placeholder="请输入密码" class="form-control">
- <span class="glyphicon glyphicon-remove form-control-feedback"></span>
- </div>
- <div class="checkbox">
- <label>
- <input type="checkbox">请记住我
- </label>
- </div>
- <button type="submit" class="btn btn-success btn-block">提交</button>
- </form>