响应式开发
Bootstrap
Bootstrap按钮
<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果,标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮,看起来像一个链接,但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button
布局容器
栅格系统
1.栅格系统的选项参数
<div class="row">
<div class="col-lg-3">1</div>
<div class="col-lg-4">2</div>
<div class="col-lg-2">4</div>
<div class="col-lg-3">6</div>
</div>
2.列嵌套
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<!-- 列嵌套最后加上一行row,可以取消父元素的padding值,而且高度自动和父元素一样高 -->
<div class="row">
<div class="col-md-6">a</div>
<div class="col-md-6">b</div>
</div>
</div>
<div class="col-lg-2">4</div>
<div class="col-lg-3">6</div>
</div>
</div>
</body>
3.列偏移
<body>
<div class="container">
<div class="row">
<div class="col-md-3">左侧</div>
<!-- 偏移的份数 就是12-两个盒子份数=6 -->
<div class="col-md-3 col-md-offset-6">右侧</div>
</div>
</div>
</body>
4.列排序
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8">左侧</div>
<div class="col-md-8 col-md-pull-4">右侧</div>
</div>
</div>
</body>
5.响应式工具
body>
<div class="container">
<div class="row">
<div class="col-xs-3">
<span class="visible-lg">我会显示哦</span>
</div>
<div class="col-xs-3">2</div>
<div class="col-xs-3 hidden-md hidden-xs">我会变魔术哦</div>
<div class="col-xs-3">4</div>
</div>
</div>
</body>