Bootstrap学习
文章目录
一、Bootstrap介绍
1.Bootstrap官网
https://www.bootcss.com/
2.Bootstrap官网(入门)下载
https://v3.bootcss.com/getting-started/
3.Bootstrap全局CSS样式
https://v3.bootcss.com/css/
二、Bootstrap使用(https://v3.bootcss.com/getting-started/)
1.bootstrap框架具体内容
bootstrap具体框架模板使用去官网查看学习使用
2.bootstrap基于
bootstrap必须基于jquery,所以在引用bootstrap.min.js之前，先引用jquery.min.js。
3.jquery下载
https://jquery.com/download/
可以不用下载jquery文件，直接引用网页版的jquery-3.5.1.min.js文本
4.bootstrap引入使用模板
移动端重要标签：
<!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">
<!-- 上述3个Meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> 官网地址引入 -->
<!-- 本地引入 -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<!-- <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> 官网地址引入 -->
<!-- 本地引入 -->
<script src="jquery/jquery-3.5.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> 官网地址引入 -->
<!-- 本地引入 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
5.补充
CSS重置样式： 为了增强跨浏览器渲染的一致性，我们使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。
三、Bootstrap框架
将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。
1.流体容器
<div class="container-fluid">
...
</div>
2.固定容器
<div class="container">
...
</div>
3.固定容器
| /固定值/ | 范围 | width | |
|---|---|---|---|
| 大屏PC（lg） | $>=1200 | 1170 | 1140+槽宽 |
| 中屏PC（md） | 992<=$<1200 | 970 | 970+槽宽 |
| 平板（sm） | 768<=$<992 | 750 | 720+槽宽 |
| 移动手机（xs） | $<768 | auto |
4.栅格系统
a.媒体查询
在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
b.栅格参数
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 | None （自动） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列（column）数 | 12 | |||
| 最大列（column）宽 | 自动 | ~62px | ~81px | ~97px |
| 槽（gutter）宽 | 30px （每列左右均有 15px） | |||
| 可嵌套 | 是 | |||
| 偏移（Offsets） | 是 | |||
| 列排序 | 是 |
c.实例
<div class="container">
<div class="row"> <!-- 行 -->
<div class="col-lg-a"></div> <!-- 列 -->
...
<div class="col-lg-l"></div> <!-- 列 -->
<!-- 注意默认把每行分为12份，按数值比例分配给每列，a+b+...+l=12 -->
</div>
</div>
d.栅格系统源代码分析
i.流体容器和固定容器公共样式
margin-right:auto;
margin-left:auto;
padding-left:floor((@gutter/2)); //15px
padding-right:ceil((@gutter/2)); //15px
ii.固定容器：特定样式
！顺序不可变：
@media(min-width:@screen-sm-min){
width:@container-sm;
}
@media(min-width:@screen-md-min){
width:@container-md;
}
@media(min-width:@screen-lg-min){
width:@container-lg;
}
iii.行
margin-left:ceil((@gutter/-2)) //-15px
margin-right:floor((@gutter/-2)) //-15px
iv.列
-
公共样式
.make-grid-columns() //混合 /* *.col-xs-1,.col-sm-1,.col-md-1,.col-lg-1, *... *.col-xs-12,.col-sm-12,.col-md-12,.col-lg-12{ * position:relative; * min-height:1px; * padding-left:15px; * padding-right:15px; *} */ -
浮动
.make-grid(xs) /* *.float-grid-columns(@class); * /*.col-xs-1,.col-xs-2,...,.col-xs-12{ * *float:lelft; * *} * */ *.loop-grid-columns(@grid-clumns,@class,width) * /*.col-xs-12{ * *width:12/12; * *} * *... * *.col-xs-1{ * *width:1/12; * *} * */ *.loop-grid-columns(@grid-clumns,@class,pull) //列排序 *.loop-grid-columns(@grid-clumns,@class,push) //列排序 * //push: * /*.col-xs-push-12{ * *left:12/12; * *} * *... * *.col-xs-push-0{ * *left:auto; * *} * */ * //pull: * /*.col-xs-pull-12{ * *right:12/12; * *} * *... * *.col-xs-pull-0{ * *right:auto; * *} * */ *.loop-grid-columns(@grid-columns,@class,offset); //列偏移 * /* * *.col-xs-offset-12{ * * margin-left:12/12; * *} * *... * *.col-xs-offset-0{ * * margin-left:0; * *} * */ * //<sm,md,lg与之相似> */ -
混合组合：将xs,sm,md,lg要用的格式写入class=“*”中，将会在不同PC情况下执行不同选项：xs、sm、md、lg，用列排序时每个PC选项都要写，不能跳跃。
e.自定义栅格系统
将源代码中的变量名改为自己定义的变量名。
f.栅格盒模型的精妙
#容器两边具有15px的padding
#行两边具有-15px的margin
#列两边具有15px的padding
#为了维护槽宽的规则：
*列两边必须要有15px的padding
#为了使列嵌套行：
*行两边必须要有-15px的margin
#为了让容器可以包裹住行：
*容器两边必须要有15px的padding
5.响应式工具
为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。另外还包含了针对打印机显示或隐藏内容的工具类。
a.可用的类
通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。
| 超小屏幕手机 (<768px) | 小屏幕平板 (≥768px) | 中等屏幕桌面 (≥992px) | 大屏幕桌面 (≥1200px) | |
|---|---|---|---|---|
.visible-xs-* | 可见 | 隐藏 | 隐藏 | 隐藏 |
.visible-sm-* | 隐藏 | 可见 | 隐藏 | 隐藏 |
.visible-md-* | 隐藏 | 隐藏 | 可见 | 隐藏 |
.visible-lg-* | 隐藏 | 隐藏 | 隐藏 | 可见 |
.hidden-xs | 隐藏 | 可见 | 可见 | 可见 |
.hidden-sm | 可见 | 隐藏 | 可见 | 可见 |
.hidden-md | 可见 | 可见 | 隐藏 | 可见 |
.hidden-lg | 可见 | 可见 | 可见 | 隐藏 |
