bootstrop常用类总结

bootstrap前端开发工具

栅格系统

• 版心 .container
• 栅格布局 (一行分为12格，响应式布局)
  .row
  .col-md-12
  .col-sm-12
  .col-xs-12
  

<div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
</div>

排版

• 文本对齐:
  .text-center;
  .text-left;
  .text-right;

• 块标签对齐:
  .center-block;
  .pull-left;
  .pull-right;

• 排版样式：
  h1 .page-header
  small
  p .lead
  

  <h1 class="page-header">你好，世界！<small>你好，世界！</small></h1>
  <p>百度网盘为您提供文件的网络备份、同步和分享服务。空间大、速度快、安全稳固,支持教育网加速,支持手机端。现在注册即有机会享受15G的免费存储空间</p>
  <p class="lead">百度网盘为您提供文件的网络备份、同步和分享服务。空间大、速度快、安全稳固,支持教育网加速,支持手机端。现在注册即有机会享受15G的免费存储空间</p>

• 文字颜色(带有样式滑动效果)
  .text-muted 灰色
  .text-primary 浅蓝色
  .text-success 绿色
  .text-info 深蓝色
  .text-warning 棕色
  .text-danger 红色

• 列表
  .list-style 无样式列表
  .list-inline 列表浮动到一行

• 描述
  

<dl>
  <dt>时间和教案课件课件啊</dt>
  <dd>爱十分慢慢你就开始去喝酒后即可汉口几个号北京奥股份</dd>
</dl>

.dl-horizontal 水平排列的描述

表格

• 表格样式
  .table
  .table-hover
  .table-bordered
  .table-striped

• 表格的颜色
  tr.active 灰色
  tr.danger 红色
  tr.warning 浅黄色
  tr.success 绿色

表单

• 表单样式
  div.from-grop
  

<div class="form-group">
  <label  for="nameid">name</label>
      <input class="form-control input-lg" id="nameid" type="text" placeholder="name">
</div>

• 表单元素
  input.form-control
  input.input-lg

• 表单颜色
  div.has-success
  div.has-error
  div.has-warning

• 多选框或单选框
  

<div class="checkbox">
  <label>
       <input type="checkbox" name="" value="">check me out
  </label>
</div>
<div class="radio">
  <label>
      <input type="radio" name="" value="">check me out
  </label>
</div>

• 水平多选框
  

<div class="checkbox-inline">
  <label>
      <input type="checkbox" name="" value="">check me out
  </label>
</div>

• 显示和隐藏
  .show
  .hidden
  .sr-only

• 表单尺寸
  .inuut-lg
  .input-sm

按钮

1. button
   
2. input type="submit"
3. input type=button
   
4. input type=reset
   
5. a

• 七种样式
  .btn btn-default
  .btn btn-primary
  .btn btn-success
  .btn btn-info
  .btn btn-warning
  .btn btn-danger
  .btn btn-link

• 按钮尺寸
  .btn-lg
  .btn-sm
  .btn-xs

• 按钮变成块元素
  .btn-block

• 按钮的活动状态
  .active

• 按钮的禁用状态
  .disabled

图片

• img图片
  .img-rounded
  .img-circle
  .img-thumbnail

• img响应式图片
  .img-responsive

• 关闭叉号
  .close (&times)

• 向下的小箭头
  .caset

组件

• 下拉菜单
  div.dropdown
  button[data-toggle=dropdown]
  ul.dropdown-menu
  li.dropdown-header
  li.disabled
  li.divider

• 按钮组
  div.btn-group

• 按钮工具栏
  div.btn-toolbar

• 按钮尺寸
  div.btn-group-lg

• 垂直排列
  div.btn-group-vertical

• 按钮组中的下拉菜单
  div.btn-group
  button
  button
  div.btn-group

转载于:https://www.cnblogs.com/a-ke/p/7502157.html