学习周记4
Bootstrap的使用
1、Bootstrap网格系统
这是Bootstrap中最基础也是最重要的系统之一。网格系统可以将一个页面分为12个区域进行操作和编辑,会十分的方便。
通过div代码设定基础的网格系统
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">
在移动设备、中型设备、大型设备中网格系统的布局是不同的。
移动设备
<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>
中型设备
<div class="col-md-6">....</div>
<div class="col-md-6">....</div>
大型设备
<div class="col-md-6 col-lg-4">....</div>
<div class="col-md-6 col-lg-8">....</div>
2、Bootstrap的网页排版
排版标题段落代码
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 标题</title>
</head>
<body>
<h1>标题行1</h1>
<h2>标题行2</h2>
<h3>标题行3</h3>
<h4>段落行1</h4>
<h5>段落行2</h5>
<h6>段落行3</h6>
</body>
</html>
效果如下
3、Bootstrap表格设计
表格代码如下
<html>
<head>
<meta charset="utf-8">
<title>我的网站(iridescence.com)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>表格test</h2>
<table class="table">
<thead>
<tr>
<th>编号</th>
<th>属性</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>A</td>
</tr>
<tr>
<td>02</td>
<td>B</td>
</tr>
<tr>
<td>03</td>
<td>C</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
表格效果如下
4、Bootstrap按钮设计
按钮类型:
.btn | 为按钮添加基本样式
.btn-default | 默认/标准按钮
.btn-primary | 原始按钮样式(未被操作)
.btn-success | 表示成功的动作
.btn-info | 该样式可用于要弹出信息的按钮
.btn-warning | 表示需要谨慎操作的按钮
.btn-danger | 表示一个危险动作的按钮操作
.btn-link | 让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg(-sm)(-xs) | 制作一个大(小)(超小)按钮
.btn-block | 块级按钮(拉伸至父元素100%的宽度)
.active | 按钮被点击
.disabled | 禁用按钮
代码效果
<body>
<!-- 标准的按钮 -->
<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>
</body>