Bootstrap中CSS的使用方法

关于表单

• 在form上加上属性role="form"就会应用Bootstrap基本的表单结构，此时默认为垂直表单
• 把标签和控件放在一个带有 class .form-group 的
  中。这是获取最佳间距所必需的。
• 向所有的文本元素 、 和 <select> 添加 class .form-control。</h3> </li> </ul> <div class="jb51code"> <pre class="brush:xhtml;"> <input type="text" class="form-control" placeholder="文本输入"/> <textarea class="form-control" rows="3"> 1 2 3 4 5
  • 在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 属性
  • 对
    添加 disabled 属性来禁用

    内的所有控件。
  • Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。
  • .input-lg 和.input-sm可以改变输入框的高度样式
  • help-block Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在 后使用 .help-block。

  关于按钮

  <button type="button" class="btn btn-primary">原始按钮

  <button type="button" class="btn btn-success">成功按钮

  <button type="button" class="btn btn-info">信息按钮

  <button type="button" class="btn btn-warning">警告按钮

  <button type="button" class="btn btn-danger">危险按钮

  <button type="button" class="btn btn-link">链接按钮

  按钮的大小

  • class为active表示激活按钮
  • class为disabled表示禁用按钮

  在a和input上使用按钮class也能弄成按钮的样子，但是考虑到跨浏览器的问题还是在button上比较好。

  关于图片

  关于图片的样式除了之前提到的img-responsive用于图片的自适应之外还有以下三个样式：

  • .img-rounded 圆角图片
  • .img-circle 圆形图片
  • .img-thumbnail 缩略图功能

  关于其它样式类

  • .pull-left左浮动
  • .pull-right右浮动
  • center-block内容居中
  • .clearfix清除浮动
  • .caret显示下拉式
  • .close关闭图标

  关于不同设备

  

  

  如果大家还想深入学习，可以点击进行学习，再为大家附两个精彩的专题：

  以上就是Bootstrap中CSS的使用方法，希望大家会喜欢。

  （编辑：李大同）

  【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!