Bootstrap概述、使用及栅格系统

Bootstrap概述

什么是Bootstrap

Bootstrap是一个基于HTML、CSS和JavaScript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件。
Bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。

框架：一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件，使用者要按照框架所规定的某种规范进行开发

Bootstrap特点

• 移动设备优先，自 Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式
• 浏览器支持，所有的主流浏览器都支持Bootstrap
• 容易上手
• 响应式设计，Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机
• 包含功能强大的内置组件

Bootstrap的组成

• 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构
• CSS：Bootstrap 自带特性有全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的class，以及一个先进的网格系统
• 组件：Bootstrap包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等
• JavaScript插件：Bootstrap 包含了十几个自定义的 jQuery 插件

Bootstrap的使用

下载编译包,在页面中导入其核心的css文件和JavaScript文件。

<link href="bootstrap.min.css" ref="stylesheet"/>
<script src="../js/jquery-3.4.1.js"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>

使用CDN提供的文件地址（必须联网）。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>

Bootstrap布局容器

Bootstrap需要为页面内容和栅格系统包裹一个.container容器，Bootstrap 预先定义好了这个类，叫.container，它提供了两个作此用处的类。
这两种容器不能互相嵌套。

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

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

• .container-fluid :类用于 100% 宽度，占据全部视口（viewport）的容器

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

Bootstrap的全局css样式

在移动设备上禁止缩放功能

<meta user-scalable=no  /> 

标题标签

h1 - h6都有对应的class属性：.h1 ~ .h6 。

页面主体（body）

字号(font-size)：14px
行高(line-height): 1.428

表格

.table：表格的基本样式

.table-striped：斑马线效果(隔行变色)

.table-bordered：边框

.table-hover：鼠标悬停效果(对鼠标悬停做出响应)

.table-condensed：表格紧缩样式			

• 状态类样式：设置行或单元格的样式

.table-active
			
.table-success: 成功的
			
.table-info：普通的
			
.table-primary：主要的
			
.table-warning: 警告的
			
.table-danger：危险的

表单

.form-group：可以让表单控件之间有更好的位置排列
		   
.form-control：可以让使用该样式的input、textarea、select的宽度为100%

按钮

• 按钮的样式

<button type="button" class="btn btn-primary">大学</button>
				
<button type="button" class="btn btn-success">大学</button>
				
<button type="button" class="btn btn-warning">大学</button>
				
<button type="button" class="btn btn-danger">大学</button>
				
<button type="button" class="btn btn-info">大学</button>

• 按钮的尺寸

.btn-lg：大按钮
			   
.btn-sm：小按钮
			   
.btn-xs：超小按钮
			   
.btn-block：按钮的宽度为父容器的100%

图片样式

.img-rounded：圆角图片
			
.img-circle：圆形图片
			
.img-thumbnail：边框圆角
			
.img-responsive：响应式图片
			
.center-block：图片水平居中

辅助类

• 文本的颜色

.text-success
			
.text-primary
			
.text-warning
			
.text-info
			
.text-danger

• 背景颜色

.bg-success
			
.bg-primary
			
.bg-warning
			
.bg-info
			
.bg-danger

• 三角符号

<span class="caret"></span>

• 清除浮动

<div class="clearfix"></div>

• 显示和隐藏内容

 <div class="hidden"></div>		   
			 
 <div class="show"></div>

Bootstrap栅格系统

栅格系统：grid systems，也叫网格系统，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列。
将屏幕或视口划分成最多12列，通过一系列的行列组合来创建页面布局，可以将我们的内容放在列中。
Bootstrap里面container宽度是固定的，但是不同屏幕下，container的宽度不同，我们再把container划分为12等份。

• 行(row)必须放在容器(.container 或 .container-fluid)中，这样才会有合适的排列和内补白
• 每一行可以划分为若干列(col)，列只能作为行的直接子元素
• 栅格系统中的列是通过指定1到12的值来表示其跨越的范围
• 如果一行（row）中包含了的列（column）大于 12，多余的列（column）所在的元素将被作为一个整体另起一行排列
• 每一列默认有左右15像素的padding
• 可以同时为一列指定多个设备的类名，以便划分不同份数，例如"col-md-4 col-sm-6"
• 实现列的平均划分，需要给列添加类前缀

类前缀	设备
col-xs-*	超小屏幕、手机(<768px)
col-sm-*	小屏幕、平板(>=768px)
col-md-*	中等屏幕 桌面显示器 (>=992px)
col-lg-*	大屏幕、大桌面显示器 (>=1200px)

列嵌套

栅格系统内置的栅格系统将内容再次嵌套。
就是一个列内再分成若干份小列，我们可以通过添加一个新的.row元素和一系列.col-sm-* 元素到已经存在的.col-sm-*元素内。
我们列嵌套最好加一个行row这样可以取消父元素的padding值，并且高度自动和父级高度一样高。

列偏移（向右偏移）

使用.col-md-offset-*类可以将列向右偏移，这些实际是通过使用选择器为当前元素添加了左侧的边距（margin）。

.col-md-offset- * ：表示偏移的列数。

列排序

通过使用.col-md-push-* 和 col-md-pull-* 类就可以很容易的改变列的顺序。

删除网格间距

使用.row-no-gutters删除网格间距。

流式容器下的网格

流式容器下的网格(container-fluid)：栅格的宽度为100%。

字体图标

• 在css文件的同级目录中包含字体文件目录–fonts
• 使用标签加入字体图标

 <span class="glyphicon glyphicon-ok"></span>

下拉菜单

<div class="dropdown">
     <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
           主题
           <span class="caret"></span>
     </button>
     <ul class="dropdown-menu" >
          <li>
               <a  href="#">Java</a>
          </li>
          <li>
               <a href="#">数据挖掘</a>
          </li>
          <li>
                <a  href="#">数据通信/网络</a>
          </li>
          <li  class="divider"></li>
          <li>
                <a  href="#">分离的链接</a>
          </li>
      </ul>
</div>

按钮组

• 在容器中加入btn-group,可以将一组按钮放在同一行
• 在按钮组中除了第一个和最后一个按钮之外，其他按钮都不是圆角

<div class="btn-group">
     <button type="button" class="btn btn-default">
         <span class="glyphicon glyphicon-step-backward"></span>
     </button>
     <button type="button" class="btn btn-default">
         <span class="glyphicon glyphicon-chevron-left"></span>
     </button>
     <button type="button" class="btn btn-default">
         <span class="glyphicon glyphicon-chevron-right"></span>
     </button>
     <button type="button" class="btn btn-default">
         <span class="glyphicon glyphicon-pause"></span>
     </button>
</div>

按钮工具栏

在容器的class属性中加入btn-toolbar,然后和按钮组结合使用。

输入组框

• 设置容器的class属性为input-group
• 在容器中添加,设置class属性为input-group-addon

响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

与之相反的是visible-xs visible-sm visible-md visible-lg显示某个页面内容。

折叠菜单

<!--data-toggle自定义属性 属性值与div的class属性值相同 点击超链接跳转到给的div上(id属性)-->
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">
    遥岑
</a>
<div class="collapse" id="collapseExample">
    <div class="card card-body">
        谨以遥岑敬钱塘
    </div>
    <div class="card card-body">
        谨以遥岑
    </div>
</div>

轮播图

  <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <!-- 轮播图指示器 -->
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="images/slide1.webp" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="images/slide2.webp" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="images/slide3.webp" class="d-block w-100" alt="...">
      </div>
    </div>
    <!-- 查看上一张 -->
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    </a>
    <!-- 查看下一张 -->
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
      <span class="carousel-control-next-icon"></span>
    </a>
  </div>