- Bootstrap来自 Twitter，是目前最受欢迎的响应式前端框架，是基于 HTML、CSS、JavaScript的，它简洁灵活，使得 Web 开发更加快捷
- 优点：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<Meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Document</title>
</head>
<body style="padding:100px;">
<h1>hello, bootstrap</h1>
<button class="btn btn-primary">欢迎进入</button>
</body>
</html>
@H_502_16@1.表格
标签含义
- <table> 为表格添加基础样式<thead> 表格标题行的容器元素（<tr>）
- <tbody> 表格主体中的表格行的容器元素（<tr>）
- <tr> 表格行
- <td> 默认的表格单元格。
- <th> 特殊的表格单元格，（居中和加粗的效果）。必须在<thead> 内使用。
- <caption> 关于表格存储内容的描述或总结。
样式
- table 为任意 <table> 添加基本样式 (只有横向分隔线).
- table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) ，隔行变色
- table-bordered 为所有表格的单元格添加边框
- .table-hover 在 <tbody> 内的任一行启用鼠标悬停状态，鼠标悬停高亮突出显示
- .table-condensed 让表格更加紧凑
情景样式
- 适合应用在<th>、<tr>，<td>
- .active 激活效果（悬停颜色）
- .success 表示成功或积极的动作
- .info 表示普通的提示信息或动作
- .warning 表示警告或需要用户注意
- .danger 表示危险或潜在的带来的负面影响的动作
- .table-responsive 响应式边框
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<Meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Document</title>
</head>
<body style="padding:50px;">
<!--<table class="table table-hover table-striped table-bordered table-condensed">-->
<table class="table table-responsive">
<caption style="text-align:center">三国人物信息</caption>
<!--描述-->
<thead>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</thead>
<!--表头-->
<tbody>
<tr class="active">
<td>1</td>
<td>吕布</td>
<td>24</td>
<td>男</td>
</tr>
<tr class="success">
<td>2</td>
<td>董卓</td>
<td>54</td>
<td>男</td>
</tr>
<tr class="info">
<td>3</td>
<td>貂蝉</td>
<td>20</td>
<td>女</td>
</tr>
<tr class="warning">
<td>4</td>
<td>袁绍</td>
<td>44</td>
<td>男</td>
</tr>
<tr class="danger">
<td>5</td>
<td>贾诩</td>
<td>26</td>
<td>男</td>
</tr>
</tbody>
</table>
</body>
</html>
@H_502_16@2.表单
- 内联布局，小于768px时,会自动还原成移动端样式
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<Meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Document</title>
</head>
<body style="padding: 100px;">
<form class="form-inline">
<div class="form-group">
<p>邮箱</p>
<input type="email" placeholder="请输入邮箱" class="form-control">
</div>
<div class="form-group">
<p>密码</p>
<input type="password" placeholder="请输入邮箱" class="form-control">
</div>
<div class="form-group">
<button class="btn btn-primary">提交</button>
</div>
</form>
</body>
</html>
- 表单控件：输入框，文本框，复选框，复选按钮，单选，单选按钮
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Document</title>
</head>
<body style="padding:100px;">
<!--输入框，文本框，复选框，复选按钮，单选，单选按钮-->
<form>
<!--输入框-->
<div class="form-group">
<label for="">输入框</label>
<input type="text" class="form-control" placeholder="文本输入">
</div>
<hr>
<!--文本框-->
<div class="form-group">
<label for="">文本框</label>
<textarea class="form-control" cols="30" rows="5"></textarea>
</div>
<hr>
<!--复选框-->
<div class="checkBox-inline">
<label for="">
<input type="checkBox">选项1
</label>
</div>
<div class="checkBox-inline">
<label for="">
<input type="checkBox">选项2
</label>
</div>
<div class="checkBox-inline">
<label for="">
<input type="checkBox">选项3
</label>
</div>
<hr>
<!--复选按钮-->
<form>
<div class="btn-group" data-toggle='buttons'>
<label class="btn btn-primary">
<input type="checkBox" >体育
</label>
<label class="btn btn-primary">
<input type="checkBox" >美术
</label>
<label class="btn btn-primary">
<input type="checkBox" >音乐
</label>
<label class="btn btn-primary">
<input type="checkBox" >舞蹈
</label>
</div>
</form>
<!--单选-->
<form>
<div class="radio-group">
<label class="radio">
<input type="radio" name="sex">男
</label>
<label class="radio">
<input type="radio" name="sex">女
</label>
</div>
</form>
<!--单选按钮-->
<form>
<div>
<label class="radio-inline">
<input type="radio" name="gender">男
</label>
<label class="radio-inline">
<input type="radio" name="gender">女
</label>
</div>
</form>
</form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</html>
@H_502_16@3.按钮
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Document</title>
</head>
<body style="padding: 100px;">
<!--按钮类型-->
<button class="btn btn-default">默认按钮</button>
<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-info">信息按钮</button>
<button class="btn btn-success">成功按钮</button>
<button class="btn btn-warning">警告按钮</button>
<button class="btn btn-danger">危险按钮</button>
<button class="btn btn-link">连接按钮</button>
<hr>
<!--按钮大小-->
<button class="btn btn-default btn-lg">默认按钮</button>
<button class="btn btn-default">默认按钮</button>
<button class="btn btn-default btn-sm">默认按钮</button>
<button class="btn btn-default btn-xs">默认按钮</button>
<hr>
<!--按钮状态-->
<button class="btn btn-default">默认按钮</button>
<button class="btn btn-default active">默认按钮</button>
<button class="btn btn-default" disabled>默认按钮</button>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</html>
@H_502_16@4.图片
- 图片形状
.img-responsive 响应式图片随屏幕大小改变
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Document</title>
</head>
<body style="padding: 100px;">
<!--图片类型-->
<img src="img/1.jpg" class="img-rounded" width="33%">
<img src="img/1.jpg" class="img-circle" width="33%">
<img src="img/1.jpg" class="img-thumbnail" width="33%">
<hr>
<img src="img/1.jpg" class="img-responsive">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</html>
@H_502_16@5.下拉菜单组件
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Document</title>
</head>
<body style="padding: 100px;">
<div class="dropdown">
<button class="btn btn-primary" data-toggle="dropdown">拉钩教育 <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">前沿技术</a></li>
<li><a href="#">名师制作</a></li>
<li><a href="#">24小时导师</a></li>
</ul>
</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</html>
@H_502_16@6. 分页组件
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Document</title>
</head>
<body style="padding: 100px;">
<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="#">»</a></li>
</ul>
<hr>
<ul class="pager">
<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="#">»</a></li>
</ul>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</html>
@H_502_16@7.栅格系统
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Document</title>
</head>
<style>
.x {
height: 50px;
border: 1px solid black;
background-color: #eeeeee;
}
</style>
<body style="padding: 100px;">
<!-- col-lg-3 当大屏幕时，一个div占3份，一行显示4个div -->
<!-- col-md-4 当中屏幕时，一个div占4份，一行显示3个div -->
<!-- col-sm-6 当小屏幕时，一个div占6份，一行显示2个div -->
<!-- 超小屏幕时，一个div占12份，一行显示1个div，默认 -->
<div class="container">
<div class="rows">
<div class="col-lg-3 col-md-4 col-sm-6 x">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 x">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 x">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 x">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 x">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 x">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 x">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 x">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 x">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 x">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 x">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 x">x</div>
</div>
</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</html>
@H_502_16@8.缩略图
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Document</title>
</head>
<style>
</style>
<body style="padding: 100px;">
<!-- col-lg-3 当大屏幕时，一个div占3份，一行显示4个div -->
<!-- col-md-4 当中屏幕时，一个div占4份，一行显示3个div -->
<!-- col-sm-6 当小屏幕时，一个div占6份，一行显示2个div -->
<!-- 超小屏幕时，一个div占12份，一行显示1个div，默认 -->
<div class="container">
<div class="rows">
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="img/2.jpg">
<div class="caption">
<h3>图文并茂</h3>
<p>这是一个图片结合文字的缩略图</p>
<a href="#" class="btn btn-primary">观看</a>
<a href="#" class="btn btn-warning">购买</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="img/2.jpg">
<div class="caption">
<h3>图文并茂</h3>
<p>这是一个图片结合文字的缩略图</p>
<a href="#" class="btn btn-primary">观看</a>
<a href="#" class="btn btn-warning">购买</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="img/2.jpg">
<div class="caption">
<h3>图文并茂</h3>
<p>这是一个图片结合文字的缩略图</p>
<a href="#" class="btn btn-primary">观看</a>
<a href="#" class="btn btn-warning">购买</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="img/2.jpg">
<div class="caption">
<h3>图文并茂</h3>
<p>这是一个图片结合文字的缩略图</p>
<a href="#" class="btn btn-primary">观看</a>
<a href="#" class="btn btn-warning">购买</a>
</div>
</div>
</div>
</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</html>
@H_502_16@9.模态框
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Document</title>
</head>
<body style="padding: 100px;">
<button class="btn btn-warning" data-toggle="modal" data-target="#modal">弹框</button>
<!-- 声明定义模态框组件-->
<div class="modal" id='modal' data-backdrop="static">
<!-- 窗口声明 -->
<div class="modal-dialog">
<!-- 内容声明 -->
<div class="modal-content">
<!-- 1.框的标题 -->
<div class="modal-header">
<button class="close" data-dismiss="modal">
<span>×</span></button>
<h3 class="modal-title">友情提示</h3>
</div>
<!-- 2.框内信息 -->
<div class="modal-body">
服务器错误，请稍后再试！
<hr>
<img src="img/2.jpg" width="200px">
</div>
<!-- 3.框的按钮 -->
<div class="modal-footer">
<button class="btn btn-info">确定</button>
<button class="btn btn-info" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</html>
- data-toggle="modal" 触发类型:模态框modal
- data-target="#modal" 触发的节点
- data-backdrop="static" 点击黑灰色背景，不会关闭模态框
- data-dismiss="modal" 关闭模态框
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Document</title>
</head>
<body style="padding: 100px;">
<div class="carousel slide" id="carousel" data-ride="carousel">
<!--圆点-->
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#carousel"></li>
<li data-slide-to="1" data-target="#carousel"></li>
<li data-slide-to="2" data-target="#carousel"></li>
<li data-slide-to="3" data-target="#carousel"></li>
<li data-slide-to="4" data-target="#carousel"></li>
</ol>
<!--图片-->
<div class="carousel-inner">
<div class="item active">
<img src="img/1.jpg">
</div>
<div class="item">
<img src="img/2.jpg">
</div>
<div class="item">
<img src="img/3.jpg">
</div>
<div class="item">
<img src="img/4.jpg">
</div>
<div class="item">
<img src="img/5.jpg">
</div>
</div>
<!--左右切换图标-->
<a href="#carousel" class="carousel-control left" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#carousel" class="carousel-control right" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</html>
- 响应式导航栏
- data-toggle="collapse" 数据切换的事件，特效是折叠
- data-target="#nav" 折叠效果的目标是下面的#nav容器
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Document</title>
</head>
<body>
<!-- 默认的导航条样式 -->
<div class="nav navbar-default">
<!-- 响应式的容器 -->
<div class="container">
<!-- 导航条的头部 -->
<div class="navbar-header">
<a href="#" class="navbar-brand">rf科技有限公司</a>
<!-- data-toggle="collapse" 数据切换的事件，特效是折叠-->
<!-- data-target="#nav" 折叠效果的目标是下面的#nav容器-->
<button class="navbar-toggle" data-toggle="collapse" data-target="#nav">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- 导航项 -->
<div id="nav" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a href="#">
<span class="glyphicon glyphicon-home">主页</span>
</a>
</li>
<li>
<a href="#"> <span class="glyphicon glyphicon-camera">
</span> 产品</a>
</li>
<li>
<a href="#"> <span class="glyphicon glyphicon-tint"></span> 竞争
</a>
</li>
<li>
<a href="#"> <span class="glyphicon glyphicon-earphone">
</span> 联系我们</a>
</li>
</ul>
</div>
</div>
</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
