Bootstarp中CSS的使用方法_javascript技巧
来源：懂视网
责编：小采
时间：2020-11-27 20:50:53
Bootstarp中CSS的使用方法_javascript技巧
Bootstarp中CSS的使用方法_javascript技巧:Bootstrap 使用了一些 HTML5 元素和 CSS 属性，所以需要使用 HTML5 文档类型。 ... 为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示： //禁止页
导读Bootstarp中CSS的使用方法_javascript技巧:Bootstrap 使用了一些 HTML5 元素和 CSS 属性，所以需要使用 HTML5 文档类型。 ... 为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示： //禁止页
list-unstyled用于未定义样式列表ul，list-inline用于水平列表ul
pre-scrollable使pre可滚动
内联显示代码，显示多行代码
关于表格
通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。
响应式表格布局
| 产品 |
付款日期 |
状态 |
| 产品1 |
23/11/2013 |
待发货 |
关于表单
在form上加上属性role="form"就会应用Bootstrap基本的表单结构，此时默认为垂直表单
把标签和控件放在一个带有 class .form-group 的 中。这是获取最佳间距所必需的。
向所有的文本元素 、
在form加上类calss=form-inline，那么表单元素就会变成内联的
在form加上类class=form-horizontal，那么表单元素就会变成水平的
1）设置表单控件padding和margin值
2）改变“form-group”的表现形式，类似于网格系统的“row”。
3）向标签添加 class .control-label。
复选框和单选框
1）对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。
当您需要在一个水平表单内的表单标签后放置纯文本时，请在 上使用 class .form-control-static。
禁用的输入框 input，如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性
对
Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。
.input-lg 和.input-sm可以改变输入框的高度样式
help-block Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在 后使用 .help-block。
关于按钮
按钮的大小
在a和input上使用按钮class也能弄成按钮的样子，但是考虑到跨浏览器的问题还是在button上比较好。
关于图片
关于图片的样式除了之前提到的img-responsive用于图片的自适应之外还有以下三个样式：
.img-rounded 圆角图片
.img-circle 圆形图片
.img-thumbnail 缩略图功能
关于其它样式类
.pull-left左浮动
.pull-right右浮动
center-block内容居中
.clearfix清除浮动
.caret显示下拉式
.close关闭图标
关于不同设备
