08-bootcss
官网：https://v3.bootcss.com/javascript
CDN库：http://www.bootcdn.cn/bootstrap/css
媒体查询
@media screen and (min-width: 500px) {
div{
width: 100px;
height: 100px;
background: yellow;
}
}
@media screen and (min-width: 800px) {
div{
width: 200px;
height: 200px;
background: blue;
}
}
布局容器
.container 类用于固定宽度并支持响应式布局的容器java
<div class="container"> ... </div>
.container-fluid 类用于 100% 宽度，占据所有视口（viewport）的容器python
<div class="container-fluid"> ... </div>
栅格系统(系统会自动分为最多12列)
超小屏幕 小屏幕 中等屏幕 桌面显示器 大屏幕 大桌面显示器 手机 (<768px) 平板 (≥768px) (≥992px) (≥1200px) 栅格系统行为 老是水平排列 开始是堆叠在一块儿的，当大于这些阈值时将变为水平排列C .container 最大宽度 None （自动） 750px 970px 1170px 类前缀 .col-xs- .col-sm- .col-md- .col-lg- 列（column）数 12 12 12 12 最大列（column）宽 自动 ~62px ~81px ~97px
<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>
排版
HTML 中的全部标题标签，<h1> 到 <h6> 都可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式c++
<h1>我是h1标签</h1> <h2>我是h2标签</h2> <h3>我是h3标签</h3> <h4>我是h4标签</h4> <h5>我是h5标签</h5> <h6>我是h6标签</h6> <span class="h1">我是p标签的h1标签</span><br/><br/> <span class="h2">我是p标签的h2标签</span><br/><br/> <span class="h3">我是p标签的h3标签</span><br/><br/> <span class="h4">我是p标签的h4标签</span><br/><br/> <span class="h5">我是p标签的h5标签</span><br/><br/> <span class="h6">我是p标签的h6标签</span><br/><br/>
表格
为任意 <table> 标签添加 .table 类能够为其赋予基本的样式 — 少许的内补（padding）和水平方向的分隔线bootstrap
条纹状表格
经过 .table-striped 类能够给 <tbody> 以内的每一行增长斑马条纹样式布局
<table class="table table-striped"> ... </table>
带边框的表格
添加 .table-bordered 类为表格和其中的每一个单元格增长边框字体
<table class="table table-bordered"> ... </table>
鼠标悬停
经过添加 .table-hover 类可让 <tbody> 中的每一行对鼠标悬停状态做出响应ui
<table class="table table-hover"> ... </table>
紧缩表格
经过添加 .table-condensed 类可让表格更加紧凑，单元格中的内补（padding）均会减半spa
<table class="table table-condensed"> ... </table>
状态类
经过这些状态类能够为行或单元格设置颜色
| Class | 描述 |
|---|---|
.active |
鼠标悬停在行或单元格上时所设置的颜色 |
.success |
标识成功或积极的动做 |
.info |
标识普通的提示信息或动做 |
.warning |
标识警告或须要用户注意 |
.danger |
标识危险或潜在的带来负面影响的动做 |
表单
内联表单
为 <form> 元素添加 .form-inline 类可以使其内容左对齐而且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px宽度时（视口宽度再小的话就会使表单折叠）。
水平排列的表单
经过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，能够将 label 标签和控件组水平并排布局
单独的表单控件会被自动赋予一些全局样式。全部设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中能够得到最好的排列
<form action="#" class="form-horizontal">
<div class="form-group">
<input type="text" placeholder="请输入你的账号" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="请输入你的密码" class="form-control">
</div>
<div class="checkbox">
<label>
<input type="checkbox">记住我
</label>
</div>
<div class="radio">
<label for="man">
<input type="radio" id="man" name="sex">man
</label>
<label for="woman">
<input type="radio" id="woman" name="sex">woman
</label>
<label for="secret">
<input type="radio" id="secret" name="sex" disabled>secret
</label>
</div>
<div class="form-group">
<select name="select" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</form>
按钮
为 <a>、<button> 或 <input> 元素添加按钮类（button class）便可使用 Bootstrap 提供的样式
<a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default" type="submit" value="Submit">
<button type="button" class="btn btn-default">（默认样式）Default</button> <button type="button" class="btn btn-primary">（首选项）Primary</button> <button type="button" class="btn btn-success">（成功）Success</button> <button type="button" class="btn btn-info">（通常信息）Info</button> <button type="button" class="btn btn-warning">（警告）Warning</button> <button type="button" class="btn btn-danger">（危险）Danger</button> <button type="button" class="btn btn-link">（连接）Link</button>
尺寸
使用 .btn-lg、.btn-sm 或 .btn-xs 就能够得到不一样尺寸的按钮
<p> <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button> <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button> </p> <p> <button type="button" class="btn btn-primary">（默认尺寸）Default button</button> <button type="button" class="btn btn-default">（默认尺寸）Default button</button> </p> <p> <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button> <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button> </p> <p> <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button> <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button> </p>
经过给按钮添加 .btn-block 类能够将其拉伸至父元素100%的宽度，并且按钮也变为了块级（block）元素
<button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>
图片
经过为 <img> 元素添加如下相应的类，可让图片呈现不一样的形状
<img src="..." alt="..." class="img-rounded"> <img src="..." alt="..." class="img-circle"> <img src="..." alt="..." class="img-thumbnail">
辅助类
情境文本颜色
<p class="text-muted">Donec ullamcorper nulla non metus auctor fringilla.</p> <p class="text-primary">Donec ullamcorper nulla non metus auctor fringilla.</p> <p class="text-success">Donec ullamcorper nulla non metus auctor fringilla.</p> <p class="text-info">Donec ullamcorper nulla non metus auctor fringilla.</p> <p class="text-warning">Donec ullamcorper nulla non metus auctor fringilla.</p> <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
情境背景色
<p class="bg-primary">Donec ullamcorper nulla non metus auctor fringilla.</p> <p class="bg-success">Donec ullamcorper nulla non metus auctor fringilla.</p> <p class="bg-info">Donec ullamcorper nulla non metus auctor fringilla.</p> <p class="bg-warning">Donec ullamcorper nulla non metus auctor fringilla.</p> <p class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
关闭按钮
经过使用一个象征关闭的图标，可让模态框和警告框消失
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
三角符号
经过使用三角符号能够指示某个元素具备下拉菜单的功能。注意，向上弹出式菜单中的三角符号是反方向的
<span class="caret"></span>
快速浮动
<div class="pull-left">...</div> <div class="pull-right">...</div>
清除浮动
经过为父元素添加 .clearfix 类能够很容易地清除浮动
<div class="clearfix">...</div>
显示或隐藏内容
<div class="show">...</div> <div class="hidden">...</div>
Glyphicons字体图标
图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其余类共同存在。应该建立一个嵌套的 <span> 标签，并将图标类应用到这个 <span> 标签上.图标类只能应用在不包含任何文本内容或子元素的元素上。
<span class="glyphicon glyphicon-align-left"></span> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star"></span> </button>
下拉菜单
用于显示连接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具备了交互性
将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另外一个声明了 position: relative; 的元素。而后加入组成菜单的 HTML 代码
<div class="dropdown">
<button class="btn btn-primary" data-toggle="dropdown">我是一个下拉框
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">python</a></li>
<li><a href="#">c++</a></li>
<li><a href="#">java</a></li>
</ul>
</div>
<br/><br/><br/><br/><br/><br/>
<div class="dropup">
<button class="btn btn-primary" data-toggle="dropdown">我是一个上拉框
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="http://www.baidu.com">python</a></li>
<li><a href="#">c++</a></li>
<li><a href="#">java</a></li>
</ul>
</div>
按钮组
经过按钮组容器把一组按钮放在同一行里。经过与按钮插件联合使用，能够设置为单选框或多选框的样式和行为
<div class="btn-group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-success">Middle</button> <button type="button" class="btn btn-warning">Right</button> </div>
按钮组嵌套下拉框
<div class="btn-group">
<button class="btn btn-danger">按钮1</button>
<button class="btn btn-success">按钮2</button>
<button class="btn btn-warning">按钮3</button>
<div class="btn-group">
<button class="btn btn-primary" data-toggle="dropdown">我是一个下拉框
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">python</a></li>
<li><a href="#">c++</a></li>
<li><a href="#">java</a></li>
</ul>
</div>
</div>
分裂式下拉菜单
<div class="btn-group">
<button class="btn btn-success">成功</button>
<button class="btn btn-info" data-toggle="dropdown">
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">python</a></li>
<li><a href="#">c++</a></li>
<li><a href="#">java</a></li>
</ul>
</div>
输入框组
经过在文本输入框 <input> 前面、后面或是两边加上文字或按钮，能够实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 或 .input-group-btn 类，能够给 .form-control 的前面或后面添加额外的元素
<div class="input-group"> <span class="input-group-addon">@</span> <input type="text" placeholder="请输入你的账号" class="form-control"> </div> <div class="input-group"> <input type="text" placeholder="请输入你的账号" class="form-control"> <span class="input-group-addon">@</span> </div> <div class="input-group"> <input type="text" placeholder="请输入你的账号" class="form-control"> <span class="input-group-addon"> <span class="glyphicon glyphicon-heart"></span> </span> </div> <div class="input-group"> <span class="input-group-addon"> <span class="glyphicon glyphicon-heart"></span> </span> <input type="text" placeholder="请输入你的账号" class="form-control"> </div>
导航
Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类能够改变样式
标签页
注意 .nav-tabs 类依赖 .nav 基类
<ul class="nav nav-tabs">
<li class="active"><a href="#">python</a></li>
<li><a href="#">c++</a></li>
<li><a href="#">java</a></li>
</ul>
胶囊式标签页
<ul class="nav nav-pills">
<li class="active"><a href="#">python</a></li>
<li><a href="#">c++</a></li>
<li><a href="#">java</a></li>
</ul>
两端对齐的标签页
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">python</a></li>
<li><a href="#">c++</a></li>
<li><a href="#">java</a></li>
</ul>
路径导航标签页
<ul class="breadcrumb">
<li class="active"><a href="#">python</a></li>
<li><a href="#">c++</a></li>
<li><a href="#">java</a></li>
</ul>
导航条
添加 .navbar-fixed-top 类可让导航条固定在顶部,添加 .navbar-fixed-bottom 类可让导航条固定在底部
<div class="navbar navbar-default navbar-fixed-top">
<ul class="nav navbar-nav">
<li class="active"><a href="#">python</a></li>
<li><a href="#">c++</a></li>
<li><a href="#">java</a></li>
</ul>
</div>
<div class="navbar navbar-inverse navbar-fixed-bottom">
<ul class="nav navbar-nav">
<li class="active"><a href="#">python</a></li>
<li><a href="#">c++</a></li>
<li><a href="#">java</a></li>
</ul>
</div>
分页
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
进度条
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:50%">50%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:50%">50% </div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped active" style="width:50%">50%</div>
</div>
</div>
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
