• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > bootstrap3.0教程之表单(form)使用详解

bootstrap3.0教程之表单(form)使用详解

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含bootstrap3.0教程,表单,form使用等相关知识,佚名 希望在学习及工作中可以帮助到您

本文主要讲解的是表单,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的提交数据的Form表单。本文主要来讲解一下内容:

1.基本案例

2.内联表单

3.水平排列的表单

4.被支持的控件

5.静态控件

6.控件状态

7.控件尺寸

8.帮助文本

9.总结

基本案例
单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control的<input>、<textarea>和<select>元素都将被默认设置为width: 100%;。将label和前面提到的这些控件包裹在.form-group中可以获得最好的排列。


两个文本框的宽度的确为100%。并且有三个form-group。

内联表单

为左对齐和inline-block级别的控件设置.form-inline,可以将其排布的更紧凑。

需要设置宽度:在Bootstrap中,input、select和textarea默认被设置为100%宽度。为了使用内联表单,你需要专门为使用到的表单控件设置宽度。

一定要设置label:如果你没有为每个输入控件设置label,屏幕阅读器将无法正确识读。对于这些内联表单,你可以通过为label设置.sr-only已将其隐藏。

水平排列的表单

 通过为表单添加.form-horizontal,并使用Bootstrap预置的栅格class可以将label和控件组水平并排布局。这样做将改变.form-group的行为,使其表现为栅格系统中的行(row),因此就无需再使用.row了。



被支持的控件

在表单布局案例中展示了其所支持的标准表单控件。

Input
大部分表单控件、文本输入域控件。包括HTML5支持的所有类型:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。

注意:有正确设置了type的input控件才能被赋予正确的样式。

文本框示例

Textarea

支持多行文本的表单控件。可根据需要改变rows属性。

Checkbox 和 radio

Checkbox用于选择列表中的一个或多个选项,而radio用于从多个选项中只选择一个。

默认外观(堆叠在一起)

</div></p> <p><div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>

Inline checkboxes

通过将.checkbox-inline 或 .radio-inline应用到一系列的checkbox或radio控件上,可以使这些控件排列在一行。


<label class="checkbox-inline

您可能想查找下面的文章:

  • bootstrap3.0教程之表单(form)使用详解
  • bootstrap3.0教程之多种表格效果(条纹状表格、条纹状表格、鼠标悬停等)
  • bootstrap3.0教程之排版详细使用教程(标题、页面主体、强调、缩略语等用法)
  • bootstrap3.0教程之栅格系统案例(包括栅格选项、从堆叠到水平排列、移动设备和桌面等
  • bootstrap3.0教程之栅格系统原理(布局)

相关文章

  • 2017-08-06将页脚固定在页面底部的CSS实战
  • 2017-08-06简明CSS定位属性position
  • 2017-08-06DIV+CSS垂直居中一个浮动元素
  • 2017-08-06关于多行文字水平垂直居中的一点心得分享
  • 2017-08-06移动Web—CSS为Retina屏幕替换更高质量的图片
  • 2017-08-06css中position:fixed实现div在窗口上下左右居中
  • 2017-08-06使用css打造自定义select(非模拟)实现原理及样式
  • 2017-08-06CSS选择器的权重与优先规则分享
  • 2017-08-06CSS实现大小相同、颜色深浅不一的粒子旋转加载动画
  • 2017-08-06CSS中值得记住的一些技巧

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • css 单图片按钮实例(css 图片变换)
    • CSS常用代码小集
    • css 相对浏览器动态居中永远保持在屏幕正中
    • CSS实现表格细边框的两种方法
    • 使用div+css布局过程中在什么时候使用table呢
    • 深入解析CSS中z-index属性对层叠顺序的处理
    • 很漂亮很有个性的CSS水平下拉菜单
    • css样式显示省略号自定义宽度超过隐藏显示省略标记
    • ie6中li插入图片后下方有空隙(经典bug)多种解决方法
    • CSS 网页制作 提高CSS可阅读性

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有