bootstrap 查缺补漏-CSDN博客

标题

Bootstrap标题样式进行了以下显著的优化重置：

重新设置了margin-top和margin-bottom的值， h1~h3重置后的值都是20px；h4~h6重置后的值都是10px。
所有标题的行高都是1.1（也就是font-size的1.1倍）,而且文本颜色和字体都继承父元素的颜色和字体。
固定不同级别标题字体大小：h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。small：font-size: 65%;

段落

强调

  .text-muted：提示，使用浅灰色（#999）
  .text-primary：主要，使用蓝色（#428bca）
  .text-success：成功，使用浅绿色(#3c763d)
  .text-info：通知信息，使用浅蓝色（#31708f）
  .text-warning：警告，使用黄色（#8a6d3b）
  .text-danger：危险，使用褐色（#a94442）
复制代码

文本对齐

  .text-left：左对齐
  .text-center：居中对齐
  .text-right：右对齐
  .text-justify：两端对齐
复制代码

代码

<code></code>//单行内联代码
<pre></pre>//多行块代码
# 注pre.pre-scrollable//控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条
<kbd></kbd>//用户输入代码
复制代码

表格

.table//基础表格
.table-striped//斑马线表格
.table-bordered//带边框的表格
.table-hover//鼠标悬停高亮的表格
.table-condensed//紧凑型表格
.table-responsive//响应式表格
复制代码

表单

在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：

1 在<form>元素是使用类名“form-horizontal”。

2 配合Bootstrap框架的网格系统。

form

form class="form-horizontal" role="form">
复制代码

form-group

<div class="form-group">
复制代码

col-sm-*

<label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10">
复制代码

form-control

<input type="email" class="form-control" placeholder="用户名">
复制代码

常用组合

form.form-inline>div.form-group>label.col-sm-xx>input.form-control
form[role='form']>div.form-group>select.form-control
form[role='form']>div.form-group>textarea.form-control
复制代码

表单按钮

input[type=“submit”]
input[type=“button”]
input[type=“reset”]
复制代码

按钮

.btn btn-primary
.btn btn-warning
.btn btn-success
.btn btn-danger
.btn btn-info
.btn btn-link
.btn btn-inverse
复制代码

网格系统

工作原理:div.container>div.row>div.col-md-x

Bootstrap框架的网格系统工作原理如下：

数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)

在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12。如：

  <div class="container">
      <div class="row">
          <div class="col-md-4"></div>
          <div class="col-md-8"></div>
      </div>
  </div>
复制代码

具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素
通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（margin）来抵消内距(padding)的影响

菜单按钮

<div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> 
        <li role="presentation" class="divider"></li> 
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    </ul>
</div>
复制代码

导航条

使用方法：第一步：首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”

大概这个样子 div.nav navbar-default>ul.nav navbar-nav>li.active>a

<div class="navbar navbar-default" role="navigation">
    <ul class="nav navbar-nav">
        <li class="active"><a href="##">网站首页</a></li>
    </ul>
</div>
复制代码