bootstrap框架

来源：互联网发布：此情惟有落花知编辑：程序博客网时间：2024/06/16 03:42

Bootstrap基础知识

1.1基本概念

bootstrap是什么？
bootstrap是一个HTML、CSS和JavaScript的一个前端框架，应用非常广泛。用于响应式、移动设备优先的web项目。

1.2 安装——http://www.bootcss.com/

1.3 基本模板

由于bootstrap是基于jQuery，所以引用bootstrap.js之前一定要引用jQuery.js.

<head lang="en">    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>模拟对话框</title>    <!-- Bootstrap -->    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">    <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>    <!-- IE9以下版本使用HTML5需要使用两个文件：html5shiv.min.js和respond.min.js -->    <!--[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>

2 Bootstrap CSS

2.1概述

前端开发人员习惯使用全局css文件，bootstrap也是如此。
body

body {  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  font-size: 14px;  line-height: 1.42857143;  color: #333;  background-color: #fff;}

a {  color: #337ab7;  text-decoration: none;}a:hover,a:focus {  color: #23527c;  text-decoration: underline;}a:focus {  outline: 5px auto -webkit-focus-ring-color;  outline-offset: -2px;}

2.2栅格系统

bootstrap的响应式页面解决方案重点就是栅格系统。所谓的栅格就是将整个屏幕划分成若干个（一般是12）等宽的列。Bootstrap中定义了一系列的预定义类用于实现栅格系统。
案例：

    <style>        div{            background: aqua;            border: 1px solid pink;        }    </style></head><body>    <div class="container">        <div class="row">            <div class="col-md-2">                .col-md-2            </div>            <div class="col-md-2">                .col-md-2            </div>            <div class="col-md-2">                .col-md-2            </div>            <div class="col-md-2">                .col-md-2            </div>            <div class="col-md-2">                .col-md-2            </div>            <div class="col-md-2">                .col-md-2            </div>        </div>        <div class="row">            <div class="col-md-6">                .col-md-6            </div>            <div class="col-md-6">                .col-md-6            </div>        </div>    </div></body>

显示结果随着浏览器尺寸（实际中是根据设备不同）在自动调整布局，当屏幕尺寸小于992时纵向排列，
这里写图片描述
而当屏幕尺寸超过992时横向布局。

这里写图片描述
查看一下相关类的定义
（1）container

.container {  padding-right: 15px;  padding-left: 15px;  margin-right: auto;  margin-left: auto;}@media (min-width: 768px) {  .container {    width: 750px;  }}@media (min-width: 992px) {  .container {    width: 970px;  }}@media (min-width: 1200px) {  .container {    width: 1170px;  }}

在bootstrap中定义了容器的内外边距，同时根据屏幕尺寸的不同设置不同的宽度。

.row {  margin-right: -15px;  margin-left: -15px;}

通过设置负值的外边距，抵消了容器的内边距

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {  position: relative;  min-height: 1px;  padding-right: 15px;  padding-left: 15px;}@media (min-width: 992px) {  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {    float: left;  }  .col-md-12 {    width: 100%;  }  .col-md-11 {    width: 91.66666667%;  }  .col-md-10 {    width: 83.33333333%;  }  .col-md-9 {    width: 75%;  }  .col-md-8 {    width: 66.66666667%;  }  .col-md-7 {    width: 58.33333333%;  }  .col-md-6 {    width: 50%;  }  .col-md-5 {    width: 41.66666667%;  }  .col-md-4 {    width: 33.33333333%;  }  .col-md-3 {    width: 25%;  }  .col-md-2 {    width: 16.66666667%;  }  .col-md-1 {    width: 8.33333333%;  }}

列预定义类的命名规则：
（1）col表示列的含义
（2）sm是表示屏幕尺寸类型的一种
这里写图片描述
（3）最后数字表示占整个容器宽度的十二分之一的倍数。
总结一下响应式布局的原理：
（1）容器的宽度是和屏幕尺寸相关，通过媒体查询来实现
（2）当屏幕尺寸达到大小要求时，可以使用特定的列的预定义类（如col-md-2）。
（3）列定义成靠左浮动，且宽度是利用百分比来设置的。

案例：

<div class="container">    <div class="row">        <div class="col-xs-6 col-sm-8">col1</div>        <div class="col-xs-6 col-sm-4">col2</div>    </div></div>

给列添加了多个类，可以控制在不同的尺寸下比例的自适应。
当尺寸屏幕小于768时，两列的宽度是1:1，实际上是col-xs-6在起作用，
而当尺寸大于768时，列宽比为2:1，也就是col-sm-8和col-sm-4在起作用。
案例：

<div class="container">    <div class="row">        <div class="col-sm-5">col1</div>        <div class="col-sm-5">col2</div>        <div class="col-sm-5">col3</div>    </div></div>

当一行的各列超过总宽度时，bootstrap会将超过的部分放在下一行，

案例：偏移

<div class="container-fluid">    <div class="row">        <div class="col-xs-6">col1</div>        <div class="col-xs-6">col2</div>    </div></div>

container-fluid和container类的区别是container是定义了固定的宽度，所以会随着父容器的变换而变化。

案例：

<div class="container">    <div class="row">        <div class="col-xs-6">col1</div>        <div class="col-xs-3 col-xs-offset-3">col2</div>    </div></div>

col-xs-offset-3是表示偏移3个单位

案例：嵌套

<div class="container">    <div class="row">        <div class="col-xs-6">            col1            <div class="row">                <div class="col-xs-8">col1-1</div>                <div class="col-xs-4">col1-2</div>            </div>            <div class="row">                <div class="col-xs-8">col2-1</div>                <div class="col-xs-4">col2-2</div>            </div>        </div>        <div class="col-xs-6">col2</div>    </div></div>

所谓的嵌套，是在某个栅格中在安排一个或多个row

案例：

<div class="container">    <div class="row">        <div class="col-xs-6 col-xs-push-6">col1</div>        <div class="col-xs-3 col-xs-pull-6">col2</div>    </div></div>

col-xs-push-6表示后推6个单元
col-xs-pull-6表示前拉6个单元

案例：禁用状态

<div class="checkbox">    <label>        <input type="checkbox" value="">        Option one is this and that&mdash;be sure to include why it's great    </label></div><div class="checkbox disabled">    <label>        <input type="checkbox" value="" disabled>        Option two is disabled    </label></div>

disabled的加input后面，表示这个多选按钮选不了，但是放在div后面表示只要一移动到这块元素上，这块都是禁用状态

2.3表格

表格类
下表样式可用于表格中：
这里写图片描述
下表的类可用于表格的行或者单元格：

这里写图片描述

上下文类
下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。
这里写图片描述

这些类可被应用到 tr、td>或 th。

2.4按钮

任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示：
以下样式可用于, , 或元素上：

2.5辅助类

3 Bootstrap组件

4 Bootstrap插件

1、模拟对话框

<body>    <!--调用对话框：属性控制-->    <button class="btn btn-warning" data-toggle="modal" data-target="#dialog1">删除</button>    <!--调用对话框：JS控制-->    <button class="btn btn-warning" id="btn_delete">删除</button>    <!--创建对话框-->    <div class="modal" id="dialog1">        <div class="modal-dialog">            <div class="modal-content">                <div class="modal-header">                    <h4 class="modal-title">数据删除提示</h4>                </div>                <div class="modal-body">确定要删除吗？</div>                <div class="modal-footer">                    <button class="btn btn-default">确定</button>                </div>            </div>        </div>    </div></body><script>    $("#btn_delete").click(function(){        $("#dialog1").modal("show");    })</script>

2、下拉菜单
3、滚动监听

<body data-spy="scroll" data-target="#nav" data-offset="30"><nav class="navbar navbar-default navbar-fixed-top" id="nav">    <div class="container-fluid">        <div>            <ul class="nav navbar-nav">                <li><a href="#sector1">第一节</a></li>                <li><a href="#sector2">第二节</a></li>            </ul>        </div>    </div></nav>

4、

阅读全文

1 0