前端开发 ·

Bootstrap进阶

调试内外边距 对齐方式...

  • row 默认12列
  • 具体内容放在列元素之内,列元素能成为row元素的直接子元素****
  • 2、布局基础

    • col-md-x 占据几列
    • offset-x 偏移x个列 相当于 margin-left
    • 嵌套 row元素只能嵌套在 col中 把父row 划分成12列

    • 列的顺序问题
      • col-md-push-7 元素从左向右移动7个栅格
      • col-md-pull-7 元素从右向左移动7个栅格

    3、响应式
    原理就是在class里面针对不同分辨率做不同的col- 布局
    Demo

    0x2 基础排版

    • 标题 h1-h6 36 30 24 18 14 12px
    • 内联列表 class="list-inline" 列表水平排列
    • 表格 class = table
      • table-striped 隔行变色
      • table-bordered 表格边框
      • table-hover 鼠标悬停变色
    • 按钮 class = btn
      • btn-block 父元素宽度的100%
      • active 激活状态
      • disabled 禁用
    • 常用类
      • .pull-right/left 右左浮动
      • .content-block 块元素
      • clearfix:befor after 清除浮动

    二、常用组件

    0x1 图标

    必须是内联元素,分为基本类、图标类
    需要内联元素span,使用时文字前面加空格

    0x2 下拉菜单

    • 依赖于jQuery和bootstrap.js
    • 必须要有dropdown的容器将下拉菜单包裹
    • 下拉项必须要有class="dropdown-toggle" data-toggle="dropdown"
    • 下拉小三角 <@b class="caret">
    • 子菜单 <@ul class="dropdown-menu">
    • 分割线 <@li class="divider">

    Demo

    0x3 按钮组

    • 按钮组 btn-group
    • 两端圆角中间没有
    • button和a标签的效果一样
    • btn-group-justified 两端对齐

    Demo

    0x4 按钮组

    • 和下拉菜单相似
    • 调整大小btn-lg/sm/xs

    0x5 输入框

    • span.nput-group-addon 可以添加输入框附加内容
    • input.form-control 使之对齐

    0x6 导航

    • 横向排列 nav nav-tabs
    • 胶囊导航 nav-pills
    • 导航全屏自适应 nav-justified
    • 添加下拉菜单 dropdown

    0x7 分页

    • aria-label 标签字符串
    • aria-hidden 屏幕识读设备 = true
    • 第一个最后一个有圆角

    0x7 标签

    0x8 徽章

    • 提示没有读取
    • active 激活状态
    • badge 多少未读取

    0x9 进度条

    三、常用插件

    0x1 模态框

    通过data属性来调用,子窗体覆盖父窗体。

    • data-toggle="modal" 用于打开modal窗口
    • data-target="#idName" 打开的目标
    • modal: 把div元素识别成模态框
    • fade 当窗口切换,淡入淡出
    • modal-dialog 对话框
    • modal-content 内容
    • modal-header 框内部的头
    • close 关闭按钮的样式
    • data-dismiss="modal" 关闭窗口
    • modal-body 窗口主要内容
    • modal-footer 窗口底部区域

    参与评论