标签：... group form 2021.7 样式 按钮 今日 btn 小结
今天继续学习了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>元素前面或者后面。
标签：...,group,form,2021.7,样式,按钮,今日,btn,小结 来源： https://www.cnblogs.com/Privatexaio/p/14987664.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。