BootStrap

       前言

        有的网站还在使用固定宽度，期望给所有终端用户带来一致的浏览体验。固定宽度设计在笔记本上刚好，在部分高分辨率显示器上却或多出些空白。用户体验极差。使用弹性布局可以解决现状问题。

bootstrap - 响应式布局

       来自Twitter,是目前最受欢迎的前端框架。它即是由动态CSS语言Less写成。通过bootstrap设计的网站可以适用于各种设备而不会出现排版问题。用于构建响应式、移动设备优先的网站。基于HTML、CSS、JavaScript的一个简洁、灵活开源框架。

  • bootstrap安装

    bootstrap官网https://v3.bootcss.com/
1.可以在官网直接下载压缩包
2.通过nods，使用npm命令 npm install bootstrap

  • bootstrap核心文件

    bootstrap.min.css
jquery.min.js
bootstrap.min.js

  • bootstrap使用

    1. 启用bootstrap

      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    2. 嵌入依赖js、css

      <like href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" ref="stylesheet"/>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"></script>
<!--下拉框、弹出框等依赖-->
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

bootstrap.bundle.min.js中已经包含了popper.min.js使用了这个js可以不引用popper.min.js

注意：在使用bootstrap时在第一行需要写入<!doctype html><html lang="en"></html>，为保证bootstrap正常运行。

  • bootstrap整体架构

       大多数BootStrap的使用者都认为BootStrap值提供了CSS组件和JavaScript插件，其实CSS组件和JavaScript插件只是BootStrap框架的表现形式而已，它们都是构建在基础平台之上。

  • CSS 12栅格系统

栅格是以规则的网格列阵来指导和规范网页中的版面布局以及信息的分布。

BootStrap的12栅格系统也就是把网页的总宽度评分为12份，开发人员可以自由地按份组合，以便开发出简洁方便地程序。此外，BootStrap也提供了更为灵活的栅格系统，即栅格系统所使用的总宽度可以不固定，你可以针对一个div元素使用12等分的栅格，因为BootStrap是按照百分比进行12等分的。

12栅格系统是整个BootStrap的核心功能，也是响应式设计核心理念的一个实现形式。

  • 基础布局组件

在12栅格系统的基础上，BootStrap提供了多种基础布局组件，排版、代码、表单按钮等。这些基础组件可以随意应用在页面的任何元素上，包括其顶部的CSS组件也可以任意使用这些基础组件。

  • jQuery

    BootStrap所有的JavaScript插件都依赖jQuery1.10+，如果使用这些插件，就必须用到jQuery库。

  • 响应式布局

    页面的设计开发应当根据用户行为以及设备环境进行相应的相应和调整。

  • CSS组件

    最新的3.x版本里提供了20种CSS组件，分别是下拉菜单(Dropdown)、按钮组(Button group)、按钮下拉菜单(Button dropdown)、导航(Nav)、导航条(Navbar)、面包屑导航(Breadcrumb)、分页导航(Pagination)、标签(Label)、徽章(Badge)、缩略图(Thumbnail)、警告框(Alert)、进度条(Progress-bar)、媒体对象(Media-object)......

  • JavaScript插件
    JavaScript插件总共12种，分别是动画效果(Transition)、模态框(Modal)、下拉菜单(Dropdown)、滚动侦测(Scrollspy)、弹出框(Popover)、按钮(Button)……

栅格系统简介

       BootStrap提供了一套响应式、移动设备先行的流式栅格系统，随着屏幕或视口尺寸增加，系统会自动分为12列。栅格系统通过一系列行、列组合来创建页面的布局，设置的内容可以放在创建好的布局中。

  • 栅格系统的实现原理

       栅格系统的实现原理很简单，通过定义容器的大小，评分为12份，调整内外边距，最后结合媒体查询。

  • 工作原理：
    • 一行数据(row)必须包含在.container(固定宽度)或.container-fluid(100%宽度)中，以便为其赋予合适的对齐方式和内边距(padding)
    • 使用(row)在水平方向创建一组列(column)
    • 具体内容应当放置于列(column)内，而且只有列可以作为行(row)的直接子元素
    • 内置一大堆样式，可以使用如.row和.col-xs-4(占4列宽度)这样的样式来快速创建栅格布局。
    • 通过设置padding创建列(column)之间的间隙。然后通过为第一列和最后一列设置负值的margin从而抵消padding的影响。
    • 栅格系统中的列式通过指定1~12的值来表示其跨越范围。
CSS全局样式

       CSS全局样式又称为CSS布局，它是BootStrap三大核心内容的基础，即基础的布局语法，其中包括基础排版(Typography)、表单(Forms)、按钮(Buttons)、图片(Images)等。都是CSS最基础简单的语法。

  • 基础排版

    1. 标题

      <span class="h1">我是h1</span>
<span class="h2">我是h2</span>
<span class="h3">我是h3</span>

    2. 页面主体

    3. 强调文本

      <p class="text-left">左对齐</p>
<p class="text-center">中间对齐</p>
<p class="text-right">右对齐</p>
<p class="text-justify">两端对齐</p>

    4. 列表

      表单

      1.内联表单
2.横向表单
3.验证提示状态
4.控件大小

    5. 按钮

      1.按钮样式

      <input type="button" class="btn btn-default" value="按钮"/>
<input type="button" class="btn btn-primary" value="按钮"/>
<input type="button" class="btn btn-success" value="按钮"/>
<input type="button" class="btn btn-info" value="按钮"/>
<input type="button" class="btn btn-warning" value="按钮"/>
<input type="button" class="btn btn-danger" value="按钮"/>
<input type="button" class="btn btn-link" value="按钮"/>

      2.按钮大小

      <input type="button" class="btn btn-default btn-lg" value="按钮"/>
<input type="button" class="btn btn-primary" value="按钮"/>
<input type="button" class="btn btn-success btn-sm" value="按钮"/>
<input type="button" class="btn btn-info btn-xs" value="按钮"/>

      图片

      1.响应式图片

      <img src="image/1.jpg" class="img-responsive"/>

      2.图片形状

      <img src="image/1.jpg" class="img-rounded"/>
<img src="image/1.jpg" class="img-circle"/>
<img src="image/1.jpg" class="img-thumbnail"/>