2021.7.8今日小结
今天继续学习了Bootstrap 表格
利用table样式类来定义基本表格样式
table-striped增加一条斑马线条纹。
table-bordered为表格的每个单元格添加边框。
table-hover指针悬停在表格的某一行上时会出现浅灰色背景，即对悬停状态给出响应。
Bootstrap为表格提供了五种状态的样式类，通过这些状态类可以改变表格的行或单元格的背景颜色。
active:表示当前活动信息，应用鼠标悬停背景颜色。
info:表示普通信息，应用背景为蓝色。
success:表示一个成功的或积极的动作，应用背景为绿色。
warning:表示一个需要注意的警告，应用背景为黄色。
danger:表示一个危险的或潜在的负面动作，应用背景为红色。
按钮
btn: 为按钮添加基本样式。
btn-default:默认/标准按钮。
btn-primary: 原始按钮样式。
btn-success: 表示成功的动作。
btn-info: 可用于要弹出信息的按钮。
btn-warning: 表示需要谨慎操作的按钮。
btn-danger: 表示-个危险 动作的按钮操作。
btn-link:让按钮看起来像个链接(仍然保留按钮行为)。
btn-lg:制作大按钮。
btn-sm:制作小按钮。
btn-xs:制作超小按钮。
btn-block:块级按钮(拉伸至父元素100%的宽度)。
active:按钮激活状态。当按钮处于激活状态时，将呈现为被按压的外观(深色的背景、深色的边框、阴影)。
disabled:按钮禁用状态。当按钮处于禁用状态时，颜色会变淡50%，失去按钮行为。
图片
img-rounded：添加border-radius:6px 来获得圆角图片
img-circle：添加border-radius：50% 来让整个图形变成圆形
img-thumbnail：添加一些内边距和灰色的边框
img-responsive：样式类来让图片支持响应式设计
工具类
1、情景文本颜色
<p class="text-info">...</p>
<p class="text-danger">...</p>
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-warning">...</p>
2、情景背景颜色
<p class="bg-danger">...</p>
<p class="bg-info">...</p>
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-warning">...</p>
表单布局
1、基本表单
fieldset、legend、label标签
form-control样式类：显示的宽度会变成100%，并且placeholder属性颜色都设置成#999999.
2、内联表单
<body>
<div class="container">
<form class="form-inline">
<div class="form-group">
<label class="sr-only">名称</label>
<input style="width: 200px" class="form-control" type="text" placeholder="请输入用户名">
</div>
</form>
</div>
</body>
3、水平表单
<div class="container">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10">
<input type="email" id="inputEmail3" class="form-control" placeholder="请输入你的邮箱地址">
</div>
</div>
表单验证样式
1、颜色提示
has-warning警告状态，黄色
has-error错误状态，红色
has-success成功状态，绿色
2、图标提示
has-feedback
form-control-feedback
3、文字提示
在input后面添加一个span标签，即可实现文字提示
输入框组
1.基本用法
要在输人框的前面或后面添加内容，首先创建一个带有"input-group" 样式类的<div>容 器，然后在这个<div>容器中把要前置或后置的内容放到"input- group-addon"或"input-group-btn"的<span>标签中，再把<span>标签放到<input>元素前面或者后面。
