BootStrap简单使用
BootStrap
-
-
- 一、介绍
-
- 响应式布局
- 二、Bootstrap环境配置
-
- 布局容器
- 三、栅格系统
-
- 简述
- 栅格特点
- 屏幕尺寸设置
- 列
- 表格
- 表单
- 按钮
- 按钮组
- 图片
- 导航
- 进度条
- 轮播图
-
一、介绍
Bootstrap基于HTML、css、JavaScript的前端框架
此框架定义一套CSS样式和央视对应的JS代码。（对应的样式有对应的特效）
开发人员只需要编写HTML架构，添加Bootstrap固定的class样式，就可以完成效果的实现
作用：Bootstrap使得web开发更加便捷，高效
支持响应式开发，解决了移动互联网前端开发问题
响应式布局
一个网站的展示能够兼容多个终端（手机、ipad、PC）而不需要为每个 终端单独做一个展示版本
响应式布局，使得网站适用一套样式，就可以在不同分辨率下展示不同 的舒适效果。大大降低了网站开发维护成本，并且给用户带来更好的体 验
此概念专门解决移动互联网浏览而产生的
二、Bootstrap环境配置
下载地址：Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网 (bootcss.com)
下载之后的目录结构
css、js、fonts
有了这些结构把结构里的文件导入项目里，通过引入文件标签调用就可以 使用了
doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Templatetitle>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
head>
<body>
<h1>你好，世界！h1>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous">script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">script>
body>
html>
这是一个bootstrap的通用简洁模板，需要改成本地调用文件，就是src的值
模板中的
<meta name="viewport" content="width=device-width, initial-scale=1">
viewport:视口 浏览器上 网页内容 可视区域
视口作用：用于移动设备将大型页面进行比例缩放显示
以下的设置只在移动设备上生效
width=device-width 设置视口的宽度，device-width设备宽度
initial-scale=1 初始化缩放设置 移动设备打开网页时，缩放级别 100%
视口的常见设置
| width=device-width | 视口的宽度，大多手机浏览器视口的宽度是980 device-width表示采用设备的宽度 例如手机是5.5寸，那么视口也采用5.5寸宽度 |
|---|---|
| initial-scale=1 | 移动设备上，打开页面时的初始化缩放级别 取值：1-5 1表示100%，5表示500% |
| minmum-scale=1 | 移动设备页面最小的缩放级别 |
| maximum-scale=1 | 移动设备上，页面可以最大缩放级别 |
| user-scalable=no | 移动设备上，页面禁止缩放 如果设置”user-scalable=no",则"minimum-scale" 和"maximum-scale"无效 |
布局容器
Bootstrap至少需要一个布局容器，才能为页面内容进行封装和方便的样式控制 相当于一个画板
还是打开官方文档，全局css样式 》概述》 布局容器
任意元素使用了布局容器的样式，都会成为一个布局容器，建议使用div作为布局容器
| .container | 类用于固定宽度并支持响应式布局的容器 特点：居中、两端留白 /
…
/ |
|---|---|
| .container-fluid | 类用于100%宽度，占据全部视口(viewport)的容器 /
…
/ |
三、栅格系统
简述
为了方便在布局容器中进行网页的布局操作
BootStrap提供一套专门用于响应式开发布局的栅格系统
栅格系统将一行分为12列，通过设定元素占用的列数来，布局元 素在页面上的展示位置
栅格系统：一行自定分为12列 通过设定元素占用一行上多少列， 即可完成元素在页面上的实现
栅格特点
行（row）必须包含在更多操作.container或者.container-fluid容 器内
行使用的样式".row",列使用样式"col-* - *"元素内容应当放置列元 素上
基本的书写内容方式必须是，容器 — 行 —列 ----内容
HTML表格：定义表格 行 单元格
栅格参数：col-屏幕尺寸-占用列数 col - lg - 1-12
列元素的书写顺序，决定布局顺序，先写的列元素会被布局到行 上 列元素的占用列数，定义列元素的大小
屏幕尺寸设置
| 超小屏幕(手机 <768px) | 小屏幕 (平板 >= 768px) | 中等屏幕(桌面显示器>=992px) | 大屏幕 大桌面显示器（>=1200px） | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是在堆在一起 | 开始是堆在一起 | 的，当大于这些值时将变为水平排列C |
| .container最大宽度 | None(自动) | 750px | 970px | 1170px |
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列(column)数 | 12 | 12 | 12 | 12 |
| 最大列宽 | 自动 | -62px | -81px | -97px |
| 槽(gutter)宽 | 30px | 每列左右均有15px | ||
| 可嵌套 | 是 | |||
| 偏移 | 是 | |||
| 列排序 | 是 |
屏幕尺寸简述：
large：lg 大屏幕，一般pc尺寸
medium：md 中等屏幕 小pc尺寸
small:sm:sm 小屏幕，ipad尺寸
xsmall：xs 超小屏幕，智能手机尺寸
设置屏幕尺寸时 的注意事项
若设置某个屏幕尺寸的样式，那么比该尺寸的屏幕，会沿用该设置，比该尺寸小的屏幕，会默认一个元素占12列的设置
例如：设置了col-md-4，那么相当于也设置了col-lg-4
其他屏幕尺寸均默认为col-sm-12，col-xs-12
常用CSS样式类
| Class | 描述 |
|---|---|
| container | 容器样式类 |
| form-group | 表单组类 |
| form-control | 表单控制类 |
| btn btn-primary | 按钮类 |
列
| Class | 描述 |
|---|---|
| container-fluid | 将显示区域设为与屏幕等宽 |
| col-md-offset-X | 相对左边偏移X格 |
| col-md-push-X | 向右移动X格 |
| col-md-pull-X | 向左移动X格 |
列嵌套指的是可以在列插入一行，这行把这列再分成12份
表格
| Class | 描述 |
|---|---|
| .table-striped | 条纹状表格 |
| .table-bordered | 带边框的表格 |
| .table-hover | 鼠标悬停变色的表格 |
| .table-condensed | 紧缩型表格 |
| .table-responsive | 响应式表格 |
行样式
| Class | 描述 |
|---|---|
| info | 天空蓝 |
| warning | 黄色 |
| success | 绿色 |
| danger | 粉色 |
| active | 灰色 |
表单
用到的标签
| 字段标签 | |
|---|---|
| 登录 | 说明标签和标题类似，但是下面添加了一条分隔线 |
| placeholder | 标签的属性 用来输入框显示提示信息 |
css样式类
| form-group | 窗口表单控件(.class)之间添加15px的间距 |
|---|---|
| form-control | 控制的宽度设置为100% |
| btn btn-default | 设置按钮样式为默认样式 |
| has-feedback | 插入小图标 |
| 在span中插入指定的图标名 |
按钮
按钮的样式类
| class | 描述 |
|---|---|
| btn-default | 默认样式 |
| btn-primary | 蓝色 |
| btn-success | 绿色 |
| btn-info | 天空蓝 |
| btn-warning | 橙色 |
| btn-danger | 红色 |
| btn-link | 无样式 |
不同分辨率和按钮大小
| class | 描述 |
|---|---|
| btn-lg | 按钮大 |
| btn-sm | 按钮中 |
| btn-xs | 按钮小 |
| btn-block | 按钮与屏幕等宽 |
按钮组
| class | 描述 |
|---|---|
| btn-group | 按钮组 |
| btn-toolbar | 按钮组工具栏（即按钮组的按钮组） |
| btn-group-lg btn-group-sm btn-group-sx btn-lg btn-sm btn-sx |
成组指定大中小 单个指定大中小 |
| btn-group-vertical | 纵向排列 |
图片
| class | 描述 |
|---|---|
| img-rounded | 圆片加圆角 |
| img-circle | 图片截成圆形 |
| img-thunbnail | 图片加外边框 且为响应式 |
| img-responsive | 图片单纯为响应式 |
导航
| class | 描述 |
|---|---|
| class=” nav nav-tabs” | 选项卡式导航 |
| class=” nav nav-pills” | 胶囊式导航 |
| class=”nav nav-pills nav-stacked“ | 纵向堆叠式导航 |
| class=”nav nav-pills nav-justified” | 自适应导航 |
| 首页 | 二级导航 就是导航里的一个li嵌套着一个导航 |
| navbar navbar-default | 默认导航样式 |
| navbar-header | div元素为导航条组件 |
| navbar-brand | 导航条最开头的文字，相当于导航条的文字 |
| navbar-nav | 扁平化设计的导航栏 |
在导航加入搜索条
| navbar-form | 这个form 创建在了navbar导航栏 |
|---|---|
| navbar-right | navbar上的组件靠右对齐 |
响应式导航用到的class
| navbar-inverse | 指定导航条组件为黑色主题 |
|---|---|
| navbar-toggle | 设置button元素为导航条组件的切换钮； |
| collapse | 设置button元素为在分辨率小于768px时才显示 collapse折叠面板的意思 |
| .navbar-responsive-collapse | 注意前面的.点要有，不然无效 |
| sr-only | |
| icon-bar | |
| collapse navbar-collapse navbar-responsive-collapse | 导航响应折叠面板 |
| nav navbar-nav | 设置ul为导航条组件内的列表元素; |
进度条
| class | 描述 |
|---|---|
| progress | div型的进度条容器 |
| progress-bar | 进度条进度显示的div |
| progress-triped | 带条纹的进度条 |
| active | 动画进度条 |
轮播图
| class | 描述 |
|---|---|
| data-ride=”carousel” | 图片加载成功后马航可以使用 |
| carousel slide | 轮播 |
| carousel-inner | 图片不显示active在哪张上，哪张显示 |
| carousel-indicators |
小圆圈
| carousel-indicators | |
|---|---|
| data-slide-to=”0” | |
| data-target=”#carousel_container” |
左右按钮
| prev | 向前一个 |
|---|---|
| left carousel-control | 向左动 |
| right carousel-control | 向右动 |
| data-interval=’1000’ | 自动播放1秒一换 |