|
上一篇《ES6基本语法》：https://mp.csdn.net/mp_blog/creation/editor/118636796
一、表格
? ? ? ? 1、丰富的标签
????????????????<table> 为表格添加基础样式
????????????????<thead> 表格标题行的容器元素（<tr>）
????????????????<tbody> 表格主体中的表格行的容器元素（<tr>）
????????????????<tr> 表格行
????????????????<td> 默认的表格单元格。
????????????????<th> 特殊的表格单元格，（居中和加粗的效果）。必须在<thead> 内使用。
????????????????<caption> 关于表格存储内容的描述或总结。
? ? ? ? 2、好看的类样式
????????????????.table 为任意 <table> 添加基本样式 (只有横向分隔线)
????????????????.table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) ，隔行变色
????????????????.table-bordered 为所有表格的单元格添加边框
????????????????.table-hover 在 <tbody> 内的任一行启用鼠标悬停状态，鼠标悬停高亮突出显示
????????????????.table-condensed 让表格更加紧凑
? ? ? ? 3、情景色类样式
? ? ? ? ?适合应用在<th>、<tr>，<td>
????????????????.active 激活效果（悬停颜色）
????????????????.success 表示成功或积极的动作
????????????????.info 表示普通的提示信息或动作
????????????????.warning 表示警告或需要用户注意
????????????????.danger 表示危险或潜在的带来的负面影响的动作
? ? ? ? 4、响应式表格
<table class="table table-responsive">
<caption>经营产品大全</caption>
<thead>
<tr>
<th>产品</th>
<th>付款日期</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr class="info">
<td>产品1</td>
<td>2020-1-1</td>
<td>待发货</td>
</tr>
<tr class="active">
<td>产品2</td>
<td>2020-1-2</td>
<td>已发货</td>
</tr>
<tr class="success">
<td>产品3</td>
<td>2020-1-3</td>
<td>未付款</td>
</tr>
<tr class="warning">
<td>产品4</td>
<td>2020-1-4</td>
<td>已退货</td>
</tr>
<tr class="danger">
<td>产品5</td>
<td>2020-1-5</td>
<td>已退款</td>
</tr>
</tbody>
</table>
二、表单
? ? ? ? 1、表单布局
? ? ? ? ? ? ? ? ①、默认布局
<body style="padding:100px;">
<form>
<div class="form-group">
<label>邮箱</label>
<input type="email" class="form-control" placeholder="请输入邮箱">
</div>
<div class="form-group">
<label>密码</label>
<input type="passowd" class="form-control" placeholder="请输入密码">
</div>
<div class="form-group">
<button class="btn btn-primary">提交</button>
</div>
</form>
</body>
? ? ? ? ? ? ? ? ②、内联布局
<body style="padding:100px;">
<form>
<div class="form-inline">
<label>邮箱</label>
<input type="email" class="form-control" placeholder="请输入邮箱">
</div>
<div class="form-inline">
<label>密码</label>
<input type="passowd" class="form-control" placeholder="请输入密码">
</div>
<div class="form-inline">
<button class="btn btn-primary">提交</button>
</div>
</form>
</body>
? ? ? ? 2、表单控件
? ? ? ? ? ? ? ? ①、输入框
<form>
<div class="form-group">
<label for="">输入框</label>
<input type="text" class="form-control" placeholder="请输入文本...">
</div>
</form>
? ? ? ? ? ? ? ? ②、文本框
<div class="form-group">
<label for="">文本框</label>
<textarea class="form-control" cols="30" rows="5"></textarea>
</div>
? ? ? ? ? ? ? ? ③、复选框
????????????????checkbox 默认
????????????????checkbox-inline 内联
<div class="checkbox">
<label>
<input type="checkbox"> 抽烟
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 喝酒
</label>
</div>
<hr>
<div class="checkbox-inline">
<label>
<input type="checkbox"> 洗澡
</label>
</div>
<div class="checkbox-inline">
<label>
<input type="checkbox"> 烫头
</label>
</div>
? ? ? ? ? ? ? ? ④、复选按钮
<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>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
? ? ? ? ? ? ? ? ⑤、单选按钮
<label class="radio">
<input type="radio" name="sex"> 男
</label>
<label class="radio">
<input type="radio" name="sex"> 女
</label>
<hr>
<label class="radio-inline">
<input type="radio" name="gender"> 耕
</label>
<label class="radio-inline">
<input type="radio" name="gender"> 织
</label>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
三、按钮
? ? ? ? 1、常用按钮
<button class="btn btn-default">默认按钮</button>
<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-success">成功按钮</button>
<button class="btn btn-info">信息按钮</button>
<button class="btn btn-warning">警告按钮</button>
<button class="btn btn-danger">危险按钮</button>
<button class="btn btn-link">连接按钮</button>
? ? ? ? 2、按钮大小
<button class="btn btn-primary btn-lg">超大按钮（高清大屏台式机）</button>
<button class="btn btn-primary">大按钮（笔记本屏幕）</button>
<button class="btn btn-primary btn-sm">小按钮（平板电脑）</button>
<button class="btn btn-primary btn-xs">超小按钮（手机）</button>
? ? ? ? 3、按钮状态
<button class="btn btn-default">默认按钮</button>
<button class="btn btn-default active">激活按钮</button>
<button class="btn btn-default" disabled>禁用按钮</button>
四、图片
????????
.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框
<img src="img/book-01.jpg" class="img-rounded" width="33%">
<img src="img/book-01.jpg" class="img-circle" width="33%">
<img src="img/book-01.jpg" class="img-thumbnail" width="33%">
响应式图片
<img src="img/book-01.jpg" class="img-responsive">
五、下拉菜单组件
<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>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
六、分页组件
<ul class="pagination">
<li class="previous"> <a href="#"> « </a> </li>
<li class="active"> <a href="#">1</a> </li>
<li> <a href="#">2</a> </li>
<li> <a href="#">3</a> </li>
<li class="next"> <a href="#">»</a> </li>
</ul>
七、栅格系统
<style>
.a{
height: 50px;
border: 1px solid black;
background-color: #eeeeee;
}
</style>
<body>
<div class="container">
<div class="row">
<!-- 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="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
<div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
</div>
</div>
</body>
八、缩略图组件
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="img/book-01.jpg">
</div>
</div>
<!-- 其余3张图片 -->
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="img/book-01.jpg">
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="img/book-01.jpg">
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="img/book-01.jpg">
</div>
</div>
</div>
</div>
? ? ? ? 自定义缩略图：
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="img/26.png">
<div class="caption">
<h3>视频标题</h3>
<p>视频介绍，美女众多...</p>
<p>
<a href="#" class="btn btn-primary">试看</a>
<a href="#" class="btn btn-warning">购买</a>
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="img/26.png">
<div class="caption">
<h3>视频标题</h3>
<p>视频介绍，美女众多...</p>
<p>
<a href="#" class="btn btn-primary">试看</a>
<a href="#" class="btn btn-warning">购买</a>
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="img/26.png">
<div class="caption">
<h3>视频标题</h3>
<p>视频介绍，美女众多...</p>
<p>
<a href="#" class="btn btn-primary">试看</a>
<a href="#" class="btn btn-warning">购买</a>
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="img/26.png">
<div class="caption">
<h3>视频标题</h3>
<p>视频介绍，美女众多...</p>
<p>
<a href="#" class="btn btn-primary">试看</a>
<a href="#" class="btn btn-warning">购买</a>
</p>
</div>
</div>
</div>
</div>
</div>
九、模态框组件
????????data-toggle="modal" 触发类型:模态框modal
????????data-target="#myModal" 触发的节点
????????data-backdrop="static" 点击黑灰色背景，不会关闭模态
<body>
<button class="btn btn-warning" data-toggle="modal" data-target="#myModal">弹框</button>
<!-- 声明定义模态框组件 -->
<div class="modal" id="myModal" 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>
<h4 class="modal-title">友情提示</h4>
</div>
<!-- 2.框内信息 -->
<div class="modal-body">
服务器错误，请稍后再试！
<hr>
<img src="img/26.png" width="200px">
<hr>
<input type="text">
</div>
<!-- 3.框的按钮 -->
<div class="modal-footer">
<button class="btn btn-info">确定</button>
<button class="btn btn-default" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
|