-
1/Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的，在相应的表单控件上添加属性“disabled”。 2/在Bootstrap框架中，如果fieldset设置了disabled属性，整个域都将处于被禁用状态。 3/如果legend中有输入框的话，这个输入框是无法被禁用的。查看全部
-
form-inline/form-horizontal有必要区分下 名称 类 描述 垂直式 (默认) .form-vertical (非必填，默认) 堆叠式的，所有控件的标签文字都左对齐 行式 .form-inline 标签文字左对齐，控件以inline-block紧凑形式存在 搜索式 .form-search 经典的搜索美化方案，对文本框进行圆化 水平式 .form-horizontal 左浮动，标签与其对应的控件居于同一行，标签文字右对齐 Bootstrap框架还提供了两个不同的类名，用来控制表单控件的高度。这两个类名是： 1、input-sm:让控件比正常大小更小 2、input-lg:让控件比正常大小更大查看全部
-
焦点状态是通过伪类“:focus”来实现。Bootstrap框架中表单控件的焦点状态删除了outline的默认样式，重新添加阴影效果。查看全部
-
default/primary/info/success/warning/danger/inverse查看全部
-
表单控件(复选框和单选按钮水平排列) 有时候，为了布局的需要，将复选框和单选按钮需要水平排列。Bootstrap框架也做了这方面的考虑： 1、如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline” 2、如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”查看全部
-
表单控件(复选框checkbox和单选择按钮radio) Bootstrap框架中checkbox和radio有点特殊，Bootstrap针对他们做了一些特殊化处理，主要是checkbox和radio与label标签配合使用会出现一些小问题（最头痛的是对齐问题）。使用Bootstrap框架，开发人员无需考虑太多，只需要按照下面的方法使用即可。 从上面的示例，我们可以得知： 1、不管是checkbox还是radio都使用label包起来了 2、checkbox连同label标签放置在一个名为“.checkbox”的容器内 3、radio连同label标签放置在一个名为“.radio”的容器内 在Bootstrap框架中，主要借助“.checkbox”和“.radio”样式，来处理复选框、单选按钮与标签的对齐方式。源码请查看bootstrap.css文件第1742行～第1762行查看全部
-
表单控件(文本域textarea) 文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。查看全部
-
表单控件(下拉选择框select) Bootstrap框架中的下拉选择框使用和原始的一致，多行选择设置multiple属性的值为multiple。Bootstrap框架会为这些元素提供统一的样式风格查看全部
-
<form role="form"> <div class="form-group"> <input type="email" class="form-control" placeholder="Enter email"> </div> </form> 为了让控件在各种表单风格中样式不出错，需要添加类名“form-control”查看全部
-
内联表单 <form class="form-inline" role="form"> label标签运用了一个类名“sr-only”，标签没显示就是这个样式将标签隐藏了。 如果没有为输入控件设置label标签，屏幕阅读器将无法正确识别。 这也是Bootstrap框架另一个优点之处，为残障人员进行了一定的考虑。查看全部
-
水平表单 Bootstrap框架默认的表单是垂直显示风格，但很多时候我们需要的水平表单风格（标签居左，表单控件居右） 在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件： 1、在<form>元素是使用类名“form-horizontal”。 2、配合Bootstrap框架的网格系统。（网格布局会在以后的章节中详细讲解） 在<form>元素上使用类名“form-horizontal”主要有以下几个作用： 1、设置表单控件padding和margin值。 2、改变“form-group”的表现形式，类似于网格系统的“row”。查看全部
-
表单源码查询 Bootstrap框架的表单，其源码占据了大量的代码，同样的，根据不同的Bootstrap版本，你可以轻松获取相应的源码： ☑ LESS版本：对应源文件 forms.less ☑ Sass版本：对应源文件 _forms.scss 编译后的Bootstrap版本，可以查阅bootstrap.css文件第1630行~第1991行 不过在样式表中，还对表单做了一些初始化，详细代码可以查阅bootstrap.css文件第110行~第178行。 对于基础表单，Bootstrap并未对其做太多的定制性效果设计，仅仅对表单内的fieldset、legend、label标签进行了定制。在Bootstrap框架中，通过定制了一个类名`form-control`，也就是说，如果这几个元素使用了类名“form-control”，将会实现一些设计上的定制效果。 1、宽度变成了100% 2、设置了一个浅灰色（#ccc）的边框 3、具有4px的圆角 4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化 5、设置了placeholder的颜色为#999查看全部
-
响应式表格需要在table外提供一个容器，此容器类名为table-responsive才能实现响应式表格； <div class="table-responsive"> <table class="table table-bordered"> … </table> </div>查看全部
-
Bootstrap提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式效果，然后将<table class="table">置于这个容器当中，这样表格也就具有响应式效果。 Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。查看全部
-
紧凑型表格的运用，也只是需要在<table class="table">基础上添加类名“table-condensed 千万注意，你的<table>元素中一定不能缺少类名“table”查看全部
举报
0/150
提交
取消