1. Bootstrap简介
Bootstrap是一个流行的前端框架,用于快速开发响应式、移动设备优先的网站。它提供了丰富的CSS样式和组件,可以帮助开发者节省时间并提高开发效率。
2. Bootstrap基本结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap入门</title>
<!-- Bootstrap 样式 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 页面内容 -->
<!-- Bootstrap 插件 -->
<script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
3. Bootstrap常用类名
.container:固定宽度容器。.container-fluid:全宽度容器。.row:行容器。.col-md-*:响应式列宽度。
4. Bootstrap栅格系统
Bootstrap的栅格系统允许开发者通过列的排列组合来创建响应式布局。
5. 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>
6. Bootstrap表单
<form>
<div class="form-group">
<label for="exampleInputEmail1">邮箱地址</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入邮箱地址">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
</div>
<div class="form-group">
<label for="exampleInputFile">文件输入</label>
<input type="file" id="exampleInputFile">
<p class="help-block">这里可以上传文件。</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 记住我
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
7. Bootstrap表格
<table class="table table-bordered">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>22</td>
</tr>
</tbody>
</table>
8. Bootstrap表单控件
<div class="form-group">
<label for="exampleInputText">文本框</label>
<input type="text" class="form-control" id="exampleInputText" placeholder="请输入文本">
</div>
<div class="form-group">
<label for="exampleInputPassword">密码框</label>
<input type="password" class="form-control" id="exampleInputPassword" placeholder="请输入密码">
</div>
<div class="form-group">
<label for="exampleInputFile">文件输入</label>
<input type="file" id="exampleInputFile">
<p class="help-block">这里可以上传文件。</p>
</div>
<div class="form-group">
<label for="exampleInputDate">日期选择器</label>
<input type="date" class="form-control" id="exampleInputDate">
</div>
<div class="form-group">
<label for="exampleInputTime">时间选择器</label>
<input type="time" class="form-control" id="exampleInputTime">
</div>
<div class="form-group">
<label for="exampleInputSelect">选择框</label>
<select class="form-control" id="exampleInputSelect">
<option>请选择</option>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
</div>
9. Bootstrap进度条
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
10. Bootstrap媒体对象
<div class="media">
<a class="media-left" href="#">
<img class="media-object" src="..." alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">标题</h4>
<p>这里是媒体对象的描述。</p>
</div>
</div>
11. Bootstrap轮播图
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 轮播(Carousel)指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">标题 1</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">标题 2</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">标题 3</div>
</div>
</div>
<!-- 轮播(Carousel)控制按钮 -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">上一页</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">下一页</span>
</a>
</div>
12. Bootstrap模态框
<!-- 按钮触发模态框 -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
打开模态框
</button>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">模态框(Modal)标题</h4>
</div>
<div class="modal-body">
这里是模态框的内容。
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">提交</button>
</div>
</div>
</div>
</div>
13. Bootstrap下拉菜单
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">首页</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">关于我们</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">联系方式</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">更多</a></li>
</ul>
</div>
14. Bootstrap分页
<nav>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><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>
</nav>
15. Bootstrap标签页
<div id="myTab" class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">首页</a></li>
<li><a href="#profile" data-toggle="tab">个人资料</a></li>
<li><a href="#messages" data-toggle="tab">消息</a></li>
<li><a href="#settings" data-toggle="tab">设置</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<p>这里是首页内容。</p>
</div>
<div class="tab-pane" id="profile">
<p>这里是个人资料内容。</p>
</div>
<div class="tab-pane" id="messages">
<p>这里是消息内容。</p>
</div>
<div class="tab-pane" id="settings">
<p>这里是设置内容。</p>
</div>
</div>
</div>
16. Bootstrap缩略图
<div class="row">
<div class="col-md-4">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
<div class="col-md-4">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
<div class="col-md-4">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
</div>
17. Bootstrap警告框
<div class="alert alert-success" role="alert">
成功!很好地完成了操作。
</div>
<div class="alert alert-info" role="alert">
信息!请注意这个操作。
</div>
<div class="alert alert-warning" role="alert">
警告!有东西出了点问题。
</div>
<div class="alert alert-danger" role="alert">
错误!似乎发生了某个错误。
</div>
18. Bootstrap按钮组
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">左</button>
<button type="button" class="btn btn-default">中</button>
<button type="button" class="btn btn-default">右</button>
</div>
19. Bootstrap输入框组
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="用户名">
<span class="input-group-addon">.com</span>
</div>
20. Bootstrap下拉菜单组
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系方式</a></li>
<li class="divider"></li>
<li><a href="#">更多</a></li>
</ul>
</div>
21. Bootstrap轮播图指示器
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 轮播(Carousel)指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">标题 1</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">标题 2</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">标题 3</div>
</div>
</div>
<!-- 轮播(Carousel)控制按钮 -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">上一页</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">下一页</span>
</a>
</div>
22. Bootstrap轮播图控制按钮
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 轮播(Carousel)指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">标题 1</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">标题 2</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">标题 3</div>
</div>
</div>
<!-- 轮播(Carousel)控制按钮 -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">上一页</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">下一页</span>
</a>
</div>
23. Bootstrap轮播图自动播放
”`html
-- 展开阅读全文 --
