Bootstrap学习总结

时间 2019-11-17

标签 bootstrap 学习总结栏目 Bootstarp 繁體版

原文原文链接

目录css

Bootstrap学习总结
- Bootstrap介绍
  - 什么是bootstrap？
  - 为何要用bootstrap?
- 如何使用bootstrap
  - 视口
  - 栅格系统

Bootstrap学习总结

@(目录)html

Bootstrap介绍

什么是bootstrap？

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
特色就是灵活简洁，代码优雅，美观大方；
其目的是为了让Web开发更敏捷；
是Twitter公司的两名前端工程师Mark Otto和Jacob Thornton在2011年发起的，并利用业余时间完成第一个版本的开发；

为何要用bootstrap?

生态圈火，不断地更新迭代；
提供一套美观大方地界面组件；
提供一套优雅的HTML+CSS编码规范；
让咱们的 Web 开发更简单，更快捷；前端

bootstrap能帮咱们解决什么问题？
响应式布局
提供了一套风格统一的界面组件
减轻维护成本（统一了代码风格）
目录结构
|——css // 本身定义的css文件
|——js // 本身写的js文件
|——font // 本身制做的字体文件
|——img // 项目中用到的图片目录
|——lib // 引入的第三方代码
index.html // 入口文件html5

编码约定
html
在head中引入必要的CSS文件，优先引用第三方的CSS，方便咱们本身的样式覆盖。
在body末尾引入必要的JS文件，优先引用第三方的JS，注意JS文件之间的依赖关系，好比bootstrap.js依赖jQuery，那就应该先引用jquery.js 而后引用bootstrap.js。
css
除了公共级别样式，其他样式所有加上做用域。避免出现样式冲突的问题。
尽可能使用直接子代选择器，少用间接子代避免错杀。
咱们约定全部的分割线使用下边框的方式实现。jquery

如何使用bootstrap

<!DOCTYPE html>
<!-- 指定了咱们的页面语言 -->
<html lang="zh-CN">
  <head>
    <!-- 界面的字符编码 -->
    <meta charset="utf-8">
    <!-- 指定了IE的编译版本，edge用最新的ie解释器 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 在移动端开发中，当界面宽度大于设备容器，会生成一个虚拟的容器，这个容器就是视口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其余内容都*必须*跟随其后！ -->
    <title>demo</title>
    <!--图标-->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- Bootstrap -->
    <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">

    <!-- 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>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依赖 jQuery，因此必须放在前边) -->
    <script src="lib/jquery/jquery.js"></script>
    <!-- 加载 Bootstrap 的全部 JavaScript 插件。你也能够根据须要只加载单个插件。 -->
    <script src="lib/bootstrap/js/bootstrap.js"></script>
  </body>
</html>

视口

视口的介绍

在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，而后展现
解决了：移动端适配pc的问题。

视口的参数

视口的宽度能够经过meta标签设置，此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，而且不缩放（缩放级别为1）

width:视口的宽度
initial-scale：初始化缩放
user-scalable:是否容许用户自行缩放（值：yes/no; 1/0）
minimum-scale:最小缩放，通常设置了用户不容许缩放，就不必设置最小和最大缩放
maximum-scale:最大缩放

如何配置视口

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

栅格系统

栅格系统是什么？

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增长，系统会自动分为最多12列。css3

栅格系统解决什么问题？
栅格系统的使用，不只可让网页的信息呈现更加美观易读，更具可用性。并且，对于前端开发来讲，网页将更加的灵活与规范。npm

栅格系统怎么用？
栅格系统用于经过一系列的行（row）与列（column）的组合来建立页面布局，你的内容就能够放入这些建立好的布局中。注意row须要放在一个版心中。bootstrap

栅格系统怎么实现？
经过浮动实现的。row会进行浮动的清除。浏览器

怎么去修改bootstrap的样式？

扩展bootstrap的样式
- 复制bootstrap的按钮样式，修改为咱们本身的主题名称
  - 优势：
    复用性高
  - 缺点：
    实现复杂
- 覆盖bootstrap的样式
  - 使用咱们自定义的样式覆盖bootstrap的样式，注意加做用域防止污染
    - 优势：
      实现方便
    - 缺点：
      缺少复用性服务器
      
      轮播图的响应式
大屏幕下怎么展现？

将容器的高度固定（410px），将轮播图改成背景显示，因为可能图片的高度不必定是410px，因此须要设置css3中的background-size。

为何这么展现？

美工为了在不一样屏幕下更好地展现将图片两边作的很是宽，可是咱们大多数状况的页面宽度都没法知足这样的图片宽度，并且Bootstrap的样式中默认将图片的max-width设置为100%，形成界面图片缩放。

有几种实现方案？
想在一个较小屏幕下展现一个超宽的图片，并让图片居中显示
- 换用背景图的方式，background-position: center center;
  使img元素绝对定位，left:50%，margin-left:
  -width/2
- 小屏幕下怎么展现？
  图片宽度100%，高度自适应
- 为何这个展现？
  手机端屏幕比较小，若是使用背景图的方式可能会致使可视区域展现不全。

选择器

nth-child和nth-of-type的区别
- -nth-child:他会选择父级元素下面按照全部的元素进行排序，选择第n个，若是第n个没有匹配到就会选择失败
- nth-of-type: 他会选择父级元素下指定类型的元素，选择第n个
  +号选择器（相邻兄弟选择器）
做用
若是选择紧接在另外一个元素后的元素，并且两者有相同的父元素，可使用相邻兄弟选择器。
+号前面的内容就是咱们的选择条件
咱们选择的是知足+号前面那写条件的后一个元素，这个元素的类型就是咱们+号后面定义的
^=选择器和=选择器
^=选择器
[attribute^=value] 选择器匹配属性值以指定值开头的每一个元素。
例子：*
- [class^="icon-"]选择 class 属性值以 "icon-" 的元素
  *=选择器
- [attribute*=value] 选择器匹配属性值包含指定值的每一个元素。
  例子：
- [class*=" icon-"]选择 class 属性值包含 " icon-" 的元素
  data-
  
  data-的做用？
使用 data-* 属性来嵌入自定义数据：
data-如何取值？

字体图标

定义
字体图标简单的说，就是一种特殊的字体，经过这种字体，显示给用户的就像一个个图片同样。
优点
字体图标最大的好处，在于它不会变形和加载速度快。
字体图标能够像文字同样，随意经过CSS来控制它的大小和颜色，对于建网站来讲，很是方便。
不足
自已创做图标字体费时费力，后期维护成本偏高。
图表字体只能被渲染为单色的，或者CSS3的渐变色。

雪碧图

定义
官方定义： CSS雪碧图即CSS Sprite（精灵），在国内不少人叫css精灵，是一种网页图片应用处理方式。它容许你将一个页面涉及到的全部零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像之前那样一幅一幅地慢慢显示出来了。（对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差很少的，因此无需顾忌这个问题）
简单理解：所谓的雪碧图是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，而后利用css的背景定位来显示须要显示的图片部分;简单说就是在一整张图片中分割出本身想要的部分，也可理解为图片截取显示（坐标的移动)
优点
减小对服务器的请求次数（好比页面有五个图标，把他们放到一张背景图上，只须要加载一次。而后用css定位从这张图片来取就能够了）
提升页面的加载速度（减小了页面的请求次数，天然会提升了页面的加载度）
不足
维护麻烦，若是修改其中的一张图，你须要修改整张图。
高清失真，为了适应不一样的分辨率，可能要准备多个规格的图片。
滚动条
子元素宽度/高度超过父元素宽度/高度，而且父元素设置overflow:scroll的时候出现滚动条。
注意检查咱们的条件。

单侧固定另外一侧自适应（自适应布局）
单侧浮动并设置宽度，另外一侧设置margin大小为浮动元素宽度。注意浮动元素须要放在自适应元素的右边。
使用flex布局实现。
能够都设置为浮动经过calc()函数进行计算。
使用bootstrap的思想设计样式
封装通用样式。对特殊的面板增长特殊样式，经过样式选择器，进行内部样式的修改。
为何这么设计？
对通用的样式进行封装，同时对不一样的主题增长一些拓展的样式。可让咱们的样式设计更加灵活，减小咱们的维护成本。设计的时候注意下降耦合度，保证咱们样式的独立性

阴影
box-shadow: h-shadow v-shadow blur spread color inset;
css计算宽度的方法
使用calc()函数，注意两个参数与符号之间存在空格

移动端的触摸事件

touchstart

触摸开始事件

touchmove

触摸移动事件

touchend

触摸结束事件

css3新的单位
vw、vh、vmin、vmax 的含义
vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，表明相似于 1%。
视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。

具体描述以下：
vw：视窗宽度的百分比（1vw 表明视窗的宽度为 1%）
vh：视窗高度的百分比
vmin：当前 vw 和 vh 中较小的一个值
vmax：当前 vw 和 vh 中较大的一个值
vw、vh 与 % 百分比的区别
% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。
vw、vh 优点在于可以直接获取高度，而用 % 在没有设置 body 高度的状况下，是没法正确得到可视区域的高度的，因此这是挺不错的优点。

vmin、vmax 用处
作移动页面开发时，若是使用 vw、wh 设置字体大小（好比 5vw），在竖屏和横屏状态下显示的字体大小是不同的。
因为 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就能够用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。

浏览器兼容性
桌面 PC
Chrome：自 26 版起就完美支持（2013年2月）
Firefox：自 19 版起就完美支持（2013年1月）
Safari：自 6.1 版起就完美支持（2013年10月）
Opera：自 15 版起就完美支持（2013年7月）
IE：自 IE10 起（包括 Edge）到如今还只是部分支持（不支持 vmax，同时 vm 代替 vmin）
移动设备 Android：自 4.4 版起就完美支持（2013年12月） iOS：自 iOS8 版起就完美支持（2014年9月*）

Bootstrap学习总结

Bootstrap学习总结

Bootstrap介绍

什么是bootstrap？

为何要用bootstrap?

bootstrap能帮咱们解决什么问题？

编码约定

如何使用bootstrap

视口

视口的介绍

视口的参数

如何配置视口

栅格系统

栅格系统是什么？

栅格系统解决什么问题？

栅格系统怎么用？

栅格系统怎么实现？

怎么去修改bootstrap的样式？

轮播图的响应式

选择器

data-的做用？

字体图标

定义

雪碧图

定义

单侧固定另外一侧自适应（自适应布局）

阴影

移动端的触摸事件

touchstart

touchmove

touchend

css3新的单位

具体描述以下：

vmin、vmax 用处

浏览器兼容性