风吟资源网 - 免费提供正版软件、活动线报、优质教程以及其他网络资源,欢迎大家踊跃投稿

Bootstrap表单和列表详解

风吟资源网 学习笔记

Bootstrap提供了对表单布局和列表的支持。垂直表单(默认)、内联表单、水平表单,如果您不想显示有着重号的列表,您可以使用class. list-unstyled 来移除样式。您也可以通过使用class. list-inline 把所有的列表项放在同一行中,可以使用class. dl-horizontal 把<dl>行中的属于与描述并排显示。

Bootstrap表单

1、如果需要创建一个表单,它的所有元素是内联的,向左对齐的,标签是并排的,请向 <form> 标签添加 class . form-inline 。

2、默认情况下,Bootstrap中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时,您需要在表单控件上设置一个宽度。

3、使用 class . sr-only ,您可以隐藏内联表单的标签。

4、水平表单与其他表单不仅标记的数量上不同,而且表单的呈现形式也不同。如需创建一个水平布局的表单,向父 <form> 元素添加 class . form-horizontal, 把标签和控件放在一个带有 class. form-group 的 <div> 中,向标签添加 class. control-label的<label> 。

5、表单的大小可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。

6、Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块,请在 <input> 后使用 .help-block。

Bootstrap列表

描述 实例
.list-unstyled 移除默认的列表样式,列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式)
.list-inline 将所有列表项放置同一行
.dl-horizontal 该类设置了浮动和偏移,应用于 <dl> 元素和 <dt> 元素中,具体实现可以查看实例
.pre-scrollable 使 <pre> 元素可滚动 scrollable
 

 

免责声明

本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权请邮件与我们处理。敬请谅解!

我要评论0条评论
禁止发布淫秽、反动、广告评论、乱填写QQ,发现永封IP!
  • 全部评论(0
    还没有评论,快来抢沙发吧!