bootstrap知识点

2017-09-17 本文已影响91人 jia林

之前一直喜欢自己码网页，从不使用框架，认为框架不受自己的掌控，出了bug不知道问题在哪，直到最近需要重新构建一个项目，网页特别多，为了提高效率，必须得使用框架了

生产环境

下载bootstrap的包，引入基本的css、js（在这之前引用jquery,因为bootstrap的js文件是基于jquery的）
引入一下代码，基本页面就出来了

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

boorstrap的排版

标题

1、标题(h1~ h6/.h1~.h6)

h1 36px
h2 30px
h3 24px
h4 18px
h5 14px
h6 12px

2、副标题(small)

文本

1、p段落(默认14px，行高20px，底部有10px的外边距)；

mark 标签提示
del 标签样式
ins 标签下划线
-strong 标签文字加粗
2、对齐方式
text-left 文字靠左
text-center 文字居中
text-right 文字靠右
text-lowercase 大写
text-uppercase 小写
text-capitalize 首字母大写

表格(table)

1、带边框的表格

table-bordered
2、条纹状表格（一行有颜色，一行没颜色）
table-striped
3、悬停变色
table-hover
4、紧凑风格
table-condensed
5、表格里的几种颜色
success、active、info、waring、danger

表单

-不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。

表单由from包裹

<form>
  <div class="form-group"> //from-group有底边距的
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>

form-inline 水平排列
input-lg 输入框变大
按钮有激活（active）、禁用（disable）、宽度（btn-block）

bootstrap中的图片

形状

img-rounded 圆角
img-circle 圆形
img-thumbnail 带有边框的圆角圆形

响应式

屏幕像素
1、1px对应苹果屏幕可能是多个像素点，所以border在苹果手机上很粗，解决方案检测是否是视网膜屏

var metaEl = doc.createElement('meta');
var scale =isRetina?0.5:1
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

1px解决方案.png

2、pc像素大小

屏幕尺寸.png

栅格

.col-lg- 大屏幕大桌面显示器 (≥1200px)
.col-md- 中等屏幕桌面显示器 (≥992px)
.col-sm- 小屏幕平板 (≥768px)
.col-xs- 超小屏幕手机 (<768px)
.col-md-offset-* 类可以将列向右侧偏移

单位

单位.png

bootstrap组件

怪异属性
1、role
2、aria-label
3、tablndex
4、data-
图标
1、直接应用图标类名
下拉菜单
1、.dropdown 控制组件下拉
2、.dropdown-menu-right 代替.pull-right右对齐
3、divider分割线

<div class="dropdown">
  <button class="btn -btn-default dropdown-toggle" data-toggle="dropdown"> //data-自定义事件 绑定一个效果
    this is button
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li>
      <a href="www.baidu.com">baidu</a>
    </li>
    <li>
      <a href="www.baidu.com">baidu</a>
    </li>
    <li>
      <a href="www.baidu.com">baidu</a>
    </li>
  </ul>
</div>

控件组
1、.input-group 表示控件组
2、.input-group-addon 可放置额外内容及图标

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control">
</div>

导航
1、以一个带有class.nav的无序列表开始
2、.nav-tabs代表可切换的导航
3、.nav-pills代表胶囊导航
4、.nav-justified使导航垂直

<ul class="nav nav-tabs">
  <li class="active">
    <a href="www.baidu.com">baidu</a>
  </li>
  <li>
    <a href="www.baidu.com">baidu</a>
  </li>
</ul>

分页
1、.pagination 在父元素中添加表示分页
2、.pager放置在翻页区域
3、.previous 把链接向左对齐，.next把链接向右对齐
进度条
1、.progress 表示进度条
2、通过状态类改变进度条的颜色
3、.progress-bar-striped使得进度条颜色渐变
列表
1、.list-group 代表列表组
2、.badge代表状态数
3、.active代表选中的状态

<ul class="list-group">
  <li class="list-group-item">
    list
    <span class="badge">14</span>
  </li>
  <li class="list-group-item">
    list
    <span class="badge">14</span>
  </li>
</ul>

面板(弹窗及提示信息）
1、.panal代表面板
2、.panel-body代表面板内容
3、.panel-footer 代表面板的注脚

bootstrap插件

不同版本的bootstrap.js需要引入相对应的jquery.js
通过data属性控制页面交互
$(document).off('.data-api')解绑属性绑定

水电费水电费
水电费
水电费
是的f是的