HTML5技术

bootstrop常用类总结 - 阿轲

字号+ 作者:H5之家 来源:H5之家 2017-09-11 09:03 我要评论( )

bootstrap前端开发工具栅格系统 版心 .container 栅格布局 (一行分为12格,响应式布局) .row .col-md-12 .col-sm-12 .col-xs-12 排版 文本对齐: .text-center; .text-left; .text-right; 块标签对齐: .center-block; .pull-left; .pull-right; 排版样式: h1

bootstrap前端开发工具 栅格系统

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

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

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

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

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

    排版样式示例

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

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

  • 描述

    描述

    爱十分慢慢你就开始去喝酒后即可汉口几个号北京奥股份</dd> </dl>

    .dl-horizontal 水平排列的描述

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

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

  • 表单
  • 表单样式
    div.from-grop

    name

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

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

  • 多选框或单选框

    check me out check me out </label> </div>

  • 水平多选框

    check me out </label> </div>

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

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

  • 按钮
  • button
  • input type="submit"
  • input type=button
  • input type=reset
  • 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

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • canvas学习总结六:绘制矩形 - beevesnoodles

      canvas学习总结六:绘制矩形 - beevesnoodles

      2017-08-01 08:00

    • 基于cordova开发的基本事项和常用总结 - 你猜猜看

      基于cordova开发的基本事项和常用总结 - 你猜猜看

      2017-07-28 10:01

    • 【干货】移动端基础知识技巧总结 - 丿Kiss丶小波

      【干货】移动端基础知识技巧总结 - 丿Kiss丶小波

      2017-07-12 18:00

    • java后端程序员1年工作经验总结 - 木公松

      java后端程序员1年工作经验总结 - 木公松

      2017-07-09 15:03

    网友点评
    c