-
如果你要在input前面添加一个label标签时，会导致input换行显示。如果你必须添加这样的一个label标签，并且不想让input换行，你需要将label标签也放在容器“form-group”中 如果没有为输入控件设置label标签，屏幕阅读器将无法正确识别查看全部
-
表单控件状态(焦点状态) 表单主要用来与用户沟通，好的表单就能更好的与用户进行沟通，而好的表单一定离不开表单的控件状态。 表单状态的作用： 每一种状态都能给用户传递不同的信息，比如表单有焦点的状态可以告诉用户可以输入或选择东西，禁用状态可以告诉用户不可以输入或选择东西，还有就是表单控件验证状态，可以告诉用户的操作是否正确等。那么在Bootstrap框架中的表单控件也具备这些状态。 焦点状态是通过伪类“:focus”来实现。Bootstrap框架中表单控件的焦点状态删除了outline的默认样式，重新添加阴影效果。 源码请查阅bootstrap.css文件第1707行～第1712行： .form-control:focus { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); } 从源码中我们可以看出，要让控件在焦点状态下有上面样式效果，需要给控件添加类名“form-control”： <form role="form" class="form-horizontal"> <div class="form-group"> <div class="col-xs-6"> <input class="form-control input-lg" type="text" placeholder="不是焦点状态下效果"> </div> <div class="col-xs-6"> <input class="form-control input-lg" type="text" placeholder="焦点点状态下效果"> </div> </div> </form> 运行效果如下或查看右侧结果窗口：查看全部
-
在Bootstrap框架中，要禁用按钮有两种实现方式： 方法1：在标签中添加disabled属性 方法2：在元素标签中添加类名“disabled” 两者的主要区别是： “.disabled”样式不会禁止按钮的默认行为，比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为，则需要通过JavaScript这样的语言来处理。对于<a>标签也存在类似问题，如果通过类名“.disable”来禁用按钮，其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。查看全部
-
列排序： 假设，col-md-9在左边，col-md-3在右边，如果要互换位置，需要将col-md-9列向右移动3个列的距离，也就是推3个列的offset，样式用col-md-push-3；而col-md-3则需要向左移动，也就是拉9个列的offset，样式用col-md-pull-9。读者可能会问，为什么不能用左右浮动呢？这是因为所有的列默认情况下都是左浮动，如果要使用左右浮动，那就不知道得修改多少列的左右浮动样式了。所以，作者在统一左浮动的基础上，通过设置left和right的值来实现定位显示。查看全部
-
Bootstrap栅格系统 http://www.cnblogs.com/linjiqin/p/3559800.html查看全部
-
html 里面的 role 本质上是增强语义性，当现有的HTML标签不能充分表达语义性的时候，就可以借助role来说明。通常这种情况出现在一些自定义的组件上，这样可增强组件的可访问性、可用性和可交互性。 role的作用是描述一个非标准的tag的实际作用。比如用div做button，那么设置div 的 role=“button”，辅助工具就可以认出这实际上是个button 比如， <div role="checkbox" aria-checked="checked"></div> 辅助工具就会知道，这个div实际上是个checkbox的角色，为选中状态。查看全部
-
如果我们不想让两个相邻的列挨在一起，这时候利用栅格系统的列偏移（offset）功能来实现，而不必再定义margin值。使用.col-md-offset-*形式的样式就可以将列偏移到右侧查看全部
-
在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件： 1、在<form>元素是使用类名“form-horizontal”。 2、配合Bootstrap框架的网格系统。（网格布局会在以后的章节中详细讲解）查看全部
-
在Bootstrap中也为表格提供了响应式的效果，将其称为响应式表格。 Bootstrap提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式效果，然后将<table class="table">置于这个容器当中，这样表格也就具有响应式效果。 Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。查看全部
-
<table>元素中一定不能缺少类名“table”查看全部
-
何谓紧凑型表格，简单理解，就是单元格没内距或者内距较其他表格的内距更小。换句话说，要实现紧凑型表格只需要重置表格单元格的内距padding的值。那么在Bootstrap中，通过类名“table-condensed”重置了单元格内距值。查看全部
-
“.table”主要有三个作用： ☑ 给表格设置了margin-bottom:20px以及设置单元内距 ☑ 在thead底部设置了一个2px的浅灰实线 ☑ 每个单元格顶部设置了一个1px的浅灰实线查看全部
-
特别提示：除了”.active”之外，其他四个类名和”.table-hover”配合使用时，Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置，所以如果需要给tr元素添加其他颜色样式时，在”.table-hover”表格中也要做相应的调整。 注意要实现悬浮状态，需要在<table>标签上加入table-hover类。 .active 表示当前活动的信息。（浅蓝） .success 表示成功或者正确的行为（浅绿） .info 表示中立的信息和行为（天蓝） .warning 表示警告，需要特别注意（浅黄色） .danger 表示危险或者可能错误的行为（浅红色）查看全部
-
Bootstrap为表格不同的样式风格提供了不同的类名，主要包括： ☑ .table：基础表格 ☑ .table-striped：斑马线表格 ☑ .table-bordered：带边框的表格 ☑ .table-hover：鼠标悬停高亮的表格 ☑ .table-condensed：紧凑型表格 ☑ .table-responsive：响应式表格查看全部
-
<pre>元素一般用于显示大块的代码，并保证原有格式不变。但有时候代码太多，而且不想让其占有太大的页面篇幅，就想控制代码块的大小。Bootstrap也考虑到这一点，你只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。查看全部
举报
0/150
提交
取消