本文详细介绍了Bootstrap，包括其简介、环境配置、全局CSS样式和栅格系统。Bootstrap是一个用于开发响应式布局和移动设备优先的web项目的框架，由HTML、CSS和JavaScript构成。文章覆盖了Bootstrap的浏览器兼容性、视口概念、SVG的使用，以及如何配置Bootstrap的本地文件和CDN加速。同时，讲解了Bootstrap的布局容器、文本样式、表单、按钮等全局CSS样式，以及强大的栅格系统，帮助开发者快速构建前端页面。
目录
6.可缩放矢量图形（Scalable Vector Graphics SVG）
一、bootstrap
1.简介
是一个基于HTML、CSS和JavaScript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件。常用来开发响应式布局和移动设备优先的web项目，能够帮助开发者快速搭建前端页面
2.组成
（1）基本结构：栅格系统（网格系统）
（2）丰富的CSS样式库：只需要改变标签的class属性值，就可以给标签应用不同的样式
（3）布局组件：有丰富的组件库
（4）插件：基于jQuery的插件，功能强大
3.浏览器
（1）内核：Blink、WebKit和Trident
4.视口（Viewport）
能将大分辨率尺寸网页缩小显示在手机浏览器
（1）布局视口（layout viewport）：是指网页的宽度
（2）视觉视口（visual viewport）：是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度
（3）理想视口（ideal viewport）：是指对设备来讲最理想的视口尺寸
（4）视口的设置：在<meta>标签中，将name属性设为viewport，即可设置视口。在终端中以理想视口打开网页
5.分辨率
6.可缩放矢量图形（Scalable Vector Graphics SVG）
是一种开放标准的描述矢量图形的语言，它基于XML（可扩展标记语言）
（1）SVG使用标签的方式定义各种图形，外层标签是<svg>
（2）它的属性主要包括x、y、width、height，用数字表示，每个数字之间用空格或逗号隔开，表示定义一个在左上角（x，y）坐标位置，宽度为width，高度为height的矩形
二、bootstrap的环境配置
1.在页面中引入本地文件
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/bootstrap.min.js"></script>
2.使用CDN加速器
（1）CDN全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定
（2）用法（前提必须联网）
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>三、bootstrap的全局的CSS样式
1.布局容器
（1）container：用于固定宽度并支持响应式布局的容器
（2）container-fluid：类用于100%宽度，占据全部视口（viewport）的容器
2.文本排版样式
| 文本左对齐 | class=“text-left” |
| 文本右对齐 | class=“text-right” |
| 文本居中对齐 | class=“text-center” |
| 文本两端对齐 | class=“text-justify” |
| 文本 | class=“text-nowrap” |
3.改变大小写
| 转成小写 | class = "text-lowercase" |
| 转成大写 | class = "text-uppercase" |
| 首字母大写 | class = "text-capitalize" |
4.列表样式
（1）无样式列表 class=“list-unstyled”
（2）内联列表 class=“list-inline”
5.表格样式
（1）表格的全局样式 class=“table”
（2）带边框的表格 class=“table table-bordered”
（3）表格隔行变色 class=“table table-striped”
（4）鼠标悬停效果 class=“table table-hover”
（5）紧缩表格 class=“table table-condensed”
（6）状态类：通过这些状态类可以为行或单元格设置颜色
鼠标悬停在行或单元格上时所设置的颜色 active
标识成功或积极的动作 success
标识普通的提升信息或动作 info
标识警告或需要用户注意 warning
标识危险或潜在的带来负面影响的动作 danger
6.表单
（1）html中的表单：<form action=“远程服务器地址” method=“请求方式”></form>
（2）bootstrap应用到form的样式属性
a、form-control：应用该样式，则表单控件<input>\<textarea>\<select>的宽度默认为100%（即占容器宽度的100%）
<input class=“form-control”/>
<textarea class= “form-control”></textarea>
<select class= “form-control”></select>
b、内联表单 <form class="form-inline"></form>
c、水平排列的表单 <form class= “form-horizontal”></form>
7.按钮
<a>、<button>、<input type= “button”/>
（1）样式
默认样式 class=“btn btn-default”
首选项 class=“btn btn-primary”
成功 class=“btn btn-success”
一般信息 class=“btn btn-info”
警告 class=“btn btn-warning”
危险 class=“btn btn-danger”
链接 class=“btn btn-link”
激活状态 class=“btn btn-default active”
禁用状态 <button class=“btn btn-default” disabled>
（2）尺寸
大按钮 btn-l
小按钮 btn-sm
超小按钮 btn-xs
8.图片
（1）圆角图片 class=“img-rounded”
（2）圆形图片 class=“img-circle”
（3）边框圆角 class=“img-thumbnail”
9.辅助类
（1）文本颜色
柔和的 <p class=“text-muted”></p>
首选项 <p class=“text-primary”></p>
成功 <p class=“text-success”></p>
信息 <p class=“text-info”></p>
警告 <p class=“text-warning”></p>
危险 <p class=“text-danger”></p>
（2）背景色
<p class=“bg-primary”></p>
<p class=“bg-success”></p>
<p class=“bg-info”></p>
<p class=“bg-warning”></p>
<p class=“bg-danger”></p>
（3）三角符号 <p class=“caret”></p>
（4）显示和隐藏内容
显示 class=“show”
隐藏 class=“hide”
四、bootstrap栅格系统
1.将屏幕和视口自动分为最多12列
2.通过一系列的行（row）和列（column）的组合来创建页面布局
3.行（row）必须包含在.container（固定宽度）或.containerfluid（100%宽度）中
4.通过行（row）在水平方向上创建一组列（column）内容应当放置在列（column）内，并且，只有列可以作为行（row）的直接子元素
5.如果一行（row）中包含了的列（column）大于12，多余的列（column）所在的元素将被作为一个整体另起一行排列
6.栅格参数（*表示1-12的数字）
| 样式名称 | 含义 | 分辨率 | .container最大宽度 | 列间隔 |
| col-xs-* | 超小屏幕、手机 | <768px | 自动 | 30px |
| col-xm-* | 小屏幕、平板 | >=768px | 750px | 30px |
| col-md-* | 中等屏幕、桌面显示器 | >=992px | 970px | 30px |
| col-lg-* | 大屏幕、大桌面显示器 | >=1200px | 1170px | 30px |
7.栅格系统的列偏移 col-md-offset-*
例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
8.字体图标
（1）定义容器（容器的class为：dropdown）
（2）在容器中添加菜单触发器和菜单项
<div class="dropdown">
<button class="btn btn-dafault" data-toggle="dropdown">
关于我们
<span class="caret"></span>
<ul class="dropdown-menu">
<li><a href="#">公司简介</a></li>
<li><a href="#">公司荣誉</a></li>
<li><a href="#">发展历程</a></li>
<li><a href="#">组织结构</a></li>
</ul>
</button>
</div>（3）分割线 <li role="separator" class="divider"></li>
（4）禁用的菜单项:<li class=“disabled”><a href=“#”></a></li>
10.按钮组：将按钮放在btn-group的容器中
（1）按钮工具栏 <div class="btn-toolbar">按钮</div>
（2）按钮组的尺寸
.btn-group-lg 应用于大型按钮
.btn-group 应用于普通按钮
.btn-group-sm 应用于小型按钮
.btn-group-xs 应用于超小型按钮
11.输入框组：使用input-group
<div class="input-group col-md-2">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="username">
</div>
扫一扫
180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
