搞快点

bootstrap 框架

bootstrap 框架

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷

bootstrap 中文网

特点:

  • 组件简洁大方、代码规范精简、界面自定义性强
  • Bootstrap 是基于 HTML5 和 CSS3 开发的,它在 jQuery 的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分 jQuery 插件
  • Bootstrap 中包含了丰富的 Web 组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站

优点:

  • 有自己的生态圈,不断的更新迭代
  • 提供了一套简洁、直观、强悍的组件
  • 标准化的 HTML+CSS 编码规范
  • 让开发更简单,提高了开发效率
  • 扩展性强,虽然界面组件样式已经定义好了,我们还可以自定义,修改默认样式

版本:

  • 2.x.x 停止维护
    • 优点:兼容性好 IE678
    • 缺点:代码不够简洁、功能不够完善
  • 3.x.x 目前使用最多(H5C3 很多东西)
    • 优点:稳定,偏向于开发响应式布局,移动设备优先的 WEB 项目
    • 缺点:放弃了 IE67,对 IE8 支持但是界面效果不友好
  • 4.x.x 测试阶段

基本模板

!> 但凡看到 role属性 aria-*的属性 class='sr-only'的标签 都可以直接删除,因为是给屏幕阅读器用的

<head>
  <meta charset="utf-8" />
  <title>bootstrap基本模板</title>
  <!-- 引入 bootstrap 的核心样式文件 -->
  <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

  <!-- html5shiv 是用来解决 IE8 以下浏览器不支持 HTML5 语义化标签的问题 -->
  <!-- respond 是用来解决 IE8 以下浏览器不支持媒体查询的问题,注意:respond 不支持 file 协议打开 -->
  <!-- 条件注释:IE浏览器专属 -->
  <!--[if lt IE 9]>
    <script src="html5shiv.min.js"></script>
    <script src="respond.min.js"></script>
  <![endif]-->
</head>
<body>
  <h1>你好,世界!</h1>
  <!-- bootstrap 依赖于 jquery,因此需要在 bootstrap 之前引入jquery文件 -->
  <script src="lib/jquery/jquery-1.12.4.js"></script>
  <!-- 引入 bootstrap 的核心js文件 -->
  <script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>

全局样式

normalize.css

Normalize.css 是一种 CSS reset 的替代方案。经过@necolas 和@jon_neal 花了几百个小时来努力研究不同浏览器的默认样式的差异,这个项目终于变成了现在这样

官网 github 网址

normalize 的特点:

  • 保护有用的浏览器默认样式而不是完全去掉它们
  • 一般化的样式:为大部分 HTML 元素提供
  • 修复浏览器自身的 bug并保证各浏览器的一致性
  • 优化 CSS 可用性:用一些小技巧

Normalize.css 支持包括手机浏览器在内的超多浏览器,同时对 HTML5 元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。尽管这个项目基于一般化的原则,但我们还是在合适的地方使用了更实用的默认值。

Normalize.css 与 CSS reset 区别

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。默认带了 15px 的 padding 值

.container 类用于固定宽度并支持响应式布局的容器

<div class="container">
  ...
</div>

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器

<div class="container-fluid">
  ...
</div>

这两种容器类不能互相嵌套

栅格系统

栅格系统,也叫网格系统,bootstrap 栅格系统把一个盒子分成 12 格

  • 栅格参数:col-xx-yy

    xx:lg 大屏(≥1200px)、md 中屏(≥992px)、sm 小屏(≥768px)、xs 超小屏(<768px)

    yy:取值范围为 1 – 12 表示占几格

    col-xx-12:可以省略不写

  • 列偏移:col-xx-offset-yy

    xx :lg、md、sm、xs

    yy:取值范围为 1 – 12 表示往右偏移几格

    列偏移:实际上是给当前元素增加了左侧的边距(margin)

  • 多余列(column)的元素将作为一个整体单元被另起一行排列

  • .row用于抵消 .container容器的 15px 的 padding 值,实际上是给元素添加了 margin: -15px

  • 可以在.row中嵌套column

  • 列排序:.col-md-push-*.col-md-pull-*

栅格系统常用类(总共 12 列)

类名 例子 解释
.col-xs-xx .col-xs-6 在超小屏幕(及以上)生效
.col-sm-xx .col-sm-6 在小屏幕(及以上)生效
.col-md-xx .col-md-6 在中屏幕(及以上)生效
.col-lg-xx .col-lg-3 在大屏幕及生效,占 1/4
.col-lg-xx .col-lg-4 在大屏幕及生效,占 1/3
.col-lg-xx .col-lg-5 在大屏幕及生效,占 1/2

【案例:列嵌套.html】

<div class="col-lg-4">
  <!-- 栅格系统无处不在,只要父盒子有宽度,就可以使用栅格系统 -->
  <div class="row">
    <div class="col-lg-6"></div>
    <div class="col-lg-6"></div>
  </div>
</div>

【案例:列偏移.html】

<!-- 使用 .col-md-offset-* 类可以将列向右侧偏移-->
<div class="row">
  <div class="col-lg-3"></div>
  <!-- col-lg-offset-3:在大屏下,这个div将向右侧偏移3个单位 -->
  <div class="col-lg-6 col-lg-offset-3"></div>
</div>

排版

标题:h1 到 h6 标签、.h1.h6 类、 <small> 标签或 .small 类用来标记副标题

文本:<mark>标记、<del>删除、<s>无用文本、<ins>插入文本、<u>下划线文本、 .small 类或<small> 小号文本、<strong>着重

对齐:text-lefttext-centertext-righttext-justifytext-nowrap

按钮

<a><button><input>

预定义样式:btn、btn-default、btn-primary(蓝)、btn-success(绿)、btn-info(浅蓝)、btn-warning(橙)、btn-danger(红)、btn-link(链接)

尺寸:btn-lg(大)、(默认)、btn-sm(小)、btn-xs(超小)
btn-block (块元素 100%宽度)

激活状态:active

禁用状态:button 元素 添加 disabled 属性、链接<a>元素添加 .disabled 类(建议通过 JavaScript 代码来禁止链接的原始功能)

图片

响应式图片:img-responsive

实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性

图片形状:img-roundedimg-circleimg-thumbnail

辅助类

文本颜色:text-mutedtext-mutedtext-primarytext-successtext-infotext-warningtext-danger

背景颜色:bg-primarybg-successbg-infobg-warningbg-danger

关闭按钮:<button type="button" class="close"><span>×</span></button>

三角符号:<span class="caret"></span>

快速浮动:pull-leftpull-right

让内容块居中:<div class="center-block">...</div>

清除浮动:clearfix

显示隐藏内容:showhiddeninvisible

响应式工具

                超小屏 小屏幕 中等屏幕 大屏幕桌面
.visible-xs-*   可见   隐藏   隐藏      隐藏
.visible-sm-*   隐藏   可见   隐藏      隐藏
.visible-md-*   隐藏   隐藏   可见      隐藏
.visible-lg-*   隐藏   隐藏   隐藏      可见

.hidden-xs    隐藏     可见   可见      可见
.hidden-sm    可见     隐藏   可见      可见
.hidden-md    可见     可见   隐藏      可见
.hidden-lg    可见     可见   可见      隐藏

* -> block inline inline-block

推荐使用 hidden 相关的属性

bootstrap-validator 插件

基于 bootstrap 的前端校验插件

http://bootstrapvalidator.votintsev.ru/api

引包

引入 css 文件

<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="lib/bootstrap-validator/css/bootstrapValidator.css" />

引入 js 文件

<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="lib/bootstrap-validator/js/bootstrapValidator.js"></script>

初始化表单校验插件

bootstrap-validator 插件会在表单提交的时候进行校验,如果校验成功了,表单会继续提交,但是如果校验失败了,就会阻止表单的提交

// 使用表单校验插件
$(formSelector).bootstrapValidator({
  // 1. 指定不校验的类型,默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
  excluded: [], // 全部校验

  // 2. 指定校验时的图标显示,默认是bootstrap风格
  feedbackIcons: {
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
  },

  // 3. 指定校验字段
  fields: {
    username: {
      // 设置校验规则
      validators: {
        // 不能为空
        notEmpty: {
          message: ''
        },
        stringLength: {
          min: 6,
          max: 12,
          message: ''
        },
        // 正则校验
        regexp: {
          regexp: /^[a-zA-Z0-9_\.]+$/,
          message: '用户名由数字字母下划线和.组成'
        },

        callback: {}
      }
    },

    password: {}
  }
})

注册表单校验成功的事件

当表单校验成功时,会触发success.form.bv事件,此时会提交表单,通常我们需要禁止表单的自动提交,使用 ajax 进行表单的提交

$('#form').on('success.form.bv', function(e) {
  e.preventDefault()
  // 使用ajax提交逻辑
  $.ajax({})
})

获取 validator 实例(对象)

当我们初始化好表单校验插件时,我们可以通过以下方法来获取表单校验的 validator 实例,通过 validator 实例调用一些方法来完成某些功能

// 获取表单校验实例
var validator = $('#form').data('bootstrapValidator')

// 使用表单校验实例可以调用一些常用的方法
validator.methodName(params)

常用方法

重置表单

重置表单中设置过校验的内容,将隐藏所有错误提示和图标

// 重置表单,隐藏所有的错误提示和图标 传入参数 true 会将内容也清空
validator.resetForm()

更新字段的状态

BootstrapValidator 在用户输入内容的时候,会做校验,当调用 bootstrap 的插件的方法可以手动会改变字段值的状态

validator.updateStatus(field*, status*, validator)

Parameter Type Description
field String|jQuery The field name or field element
status String Can be NOT_VALIDATED, VALIDATING, INVALID or VALID
validator String The validator name. If null, the method updates validity result for all validators
赞(0) 打赏
未经允许不得转载:稻草人 » bootstrap 框架

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址