01_Bootstrap

2017-09-10 本文已影响0人对方不想理你并向你抛出一个异常

简介

什么是Bootstrap？

框架：库 lib library
jQuery作为一个框架来讲，提供一套比较便捷的操作DOM的方式
把大家都需要的功能预先写好到一些文件这就是一个框架
Bootstrap 让我们的 Web 开发更简单，更快捷；
注意是 Bootstrap 不是 BootStrap！这是一个词，不是合成词，其含义为：n. 引导指令,引导程序
Bootstrap 是当下最流行的前端框架（界面工具集）；
特点就是灵活简洁，代码优雅，美观大方；
其目的是为了让 Web 开发更敏捷；
是 Twitter 公司的两名前端工程师 Mark Otto 和 Jacob Thornton 在 2011 - 年发起的，并利用业余时间完成第一个版本的开发；

为什么使用Bootstarp？

生态圈火，不断地更新迭代；
提供一套美观大方地界面组件；
提供一套优雅的 HTML+CSS 编码规范；
让我们的 Web 开发更简单，更快捷；

注意：

使用 Bootstrap 并不代表不用写 CSS 样式，而是不用写绝大多数大家都会用到的样式

准备

下载Bootstrap

Compatible

设置IE浏览器的兼容模式版本

<meta http-equiv="X-UA-Compatible" content="IE=7">

element快捷语法：meta:compat

<meta http-equiv="X-UA-Compatible" content="IE=7">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

viewport视口

声明当前网页在移动端浏览器中展示的相关设置
element快捷语法:meta:vp

<meta name="viewport" content="width=device-width, initial-scale=1">

视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示
目前大多数手机浏览器的视口（承载页面的容器）宽度都是980；
视口的宽度可以通过meta标签设置
此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1）
- width:视口的宽度
- initial-scale：初始化缩放
- user-scalable:是否允许用户自行缩放（值：yes/no; 1/0）
- minimum-scale:最小缩放，一般设置了用户不允许缩放，就没必要设置最小和最大缩放
- maximum-scale:最大缩放

条件注释

条件注释的作用就是当判断条件满足时，就会执行注释中的HTML代码，不满足时会当做注释忽略掉

<!--[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]-->

html5shiv.js让浏览器可以识别HTML5的新标签
respond.js让低版本浏览器可以使用CSS3的媒体查询
通过file://的形式访问页面， respond.js不生效

基础的Bootstrap模板

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <!-- 默认用IE最新浏览器引擎渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 声明当前网页在移动端浏览器中展示的相关设置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Document</title>

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

    <!--[if lt IE 9]>
      <script src="lib/html5shiv/html5shiv.min.js"></script>
      <script src="lib/respond/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

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

第三方依赖

jQuery
Bootstrap框架中的所有JS组件都依赖于jQuery实现
html5shiv
让低版本浏览器可以识别HTML5的新标签，如header、footer、section等
respond
让低版本浏览器可以支持CSS媒体查询功能

注：建议以后在HTML中将脚步的引入放到页面最底下

.container

Bootstrap中响应式容器
　　会根据屏幕宽度改变宽度，有三个等级：1140px>970px>740px。当屏幕小于740px时，屏幕宽度多大.container盒子宽度就有多大。

mediaquery

@media (判断条件（针对于当前窗口的判断）){
    /*这里的代码只有当判断条件满足时才会执行*/
}

@media (min-width: 768px) and (max-width: 992px) {
  /*这里的代码只有当(min-width: 1280px)满足时才会执行*/
  .container {
    width: 750px;
  }
}

当使用min-width作为判断条件一定要从小到大，其原因是CSS从上往下执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体查询</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            height: 1000px;
            background-color: red;
        }
        .container{
            width: 100%;
            margin: 0 auto;
        }
        /*媒体查询  当使用min-width作为判断条件的时候，一定要从小到大的来写，原因是CSS是从上往下执行*/
        @media (min-width: 768px) {
            .container{
                width: 750px;
            }
        }
        @media (min-width: 992px) {
            .container{
                width: 970px;
            }
        }
        @media (min-width: 1200px) {
            .container{
                width: 1170px;
            }
        }
        @media (min-width: 1280px) {
            .container{
                width: 1280px;
            }
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>

栅格系统

Bootstrap中定义了一套响应式的网格系统，
其使用方式就是将一个容器划分成12列，
然后通过col-xx-xx的类名控制每一列的占比

.row类

因为每一个列默认有一个15px的左右外边距
row类的一个作用就是通过左右-15px屏蔽掉这个边距

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

.col-**-*类

col-xs-[列数]：在超小屏幕下展示几份
col-sm-[列数]：在小屏幕下展示几份
col-md-[列数]：在中等屏幕下展示几份
col-lg-[列数]：在大屏幕下展示几份
xs : 超小屏幕手机 (<768px)
sm : 小屏幕平板 (≥768px)
md : 中等屏幕桌面显示器 (≥992px)
lg : 大屏幕大桌面显示器 (≥1200px)

<div class="row">
  <div class="col-md-2 text-center"></div>
  <div class="col-md-5 text-center"></div>
  <div class="col-md-2 text-center"></div>
  <div class="col-md-3 text-center"></div>
</div>

此处顶部通栏已经被划分成四列
text-center的作用就是让内部内容居中显示

hover图片展示

.mobile-link:hover > img {
  display: block;
}

按钮样式生成

http://blog.koalite.com/bbg/
可以通过界面生成一个新的按钮样式

.btn-itcast {
  color: #ffffff;
  background-color: #E92322;
  border-color: #DB3B43;
}

.btn-itcast:hover,
.btn-itcast:focus,
.btn-itcast:active,
.btn-itcast.active,
.open .dropdown-toggle.btn-itcast {
  color: #ffffff;
  background-color: #E92322;
  border-color: #DB3B43;
}

.btn-itcast:active,
.btn-itcast.active,
.open .dropdown-toggle.btn-itcast {
  background-image: none;
}

.btn-itcast.disabled,
.btn-itcast[disabled],
fieldset[disabled] .btn-itcast,
.btn-itcast.disabled:hover,
.btn-itcast[disabled]:hover,
fieldset[disabled] .btn-itcast:hover,
.btn-itcast.disabled:focus,
.btn-itcast[disabled]:focus,
fieldset[disabled] .btn-itcast:focus,
.btn-itcast.disabled:active,
.btn-itcast[disabled]:active,
fieldset[disabled] .btn-itcast:active,
.btn-itcast.disabled.active,
.btn-itcast[disabled].active,
fieldset[disabled] .btn-itcast.active {
  background-color: #E92322;
  border-color: #DB3B43;
}

.btn-itcast .badge {
  color: #E92322;
  background-color: #ffffff;
}

小屏幕隐藏

<div class="topbar hidden-xs hidden-sm"></div>

或者

<div class="topbar visible-md visible-lg"></div>

hidden-xx : 在某种屏幕下隐藏
visible-xx : 在某种屏幕尺寸下显示
- visible-xx-xx：最后一个xx是决定显示时的display到底是啥