Bootstrap学习总结

目录

  • Bootstrap学习总结

    • Bootstrap介绍

      • 什么是bootstrap？
      • 为什么要用bootstrap?
    • 如何使用bootstrap
      • 视口
      • 栅格系统

Bootstrap学习总结

@(目录)

Bootstrap介绍

什么是bootstrap？

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

为什么要用bootstrap?

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

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

  5. 响应式布局
  6. 提供了一套风格统一的界面组件
  7. 减轻维护成本（统一了代码风格）
    目录结构
    |——css // 自己定义的css文件
    |——js // 自己写的js文件
    |——font // 自己制作的字体文件
    |——img // 项目中用到的图片目录
    |——lib // 引入的第三方代码
    index.html // 入口文件

    编码约定

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

如何使用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/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

视口

视口的介绍

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

视口的参数

  1. 视口的宽度可以通过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列。

    栅格系统解决什么问题？

  • 栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。

    栅格系统怎么用？

  • 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。注意row需要放在一个版心中。

    栅格系统怎么实现？

  • 通过浮动实现的。row会进行浮动的清除。

    怎么去修改bootstrap的样式？

  1. 扩展bootstrap的样式

    • 复制bootstrap的按钮样式，修改成我们自己的主题名称

      • 优点：
        复用性高
      • 缺点：
        实现复杂
    • 覆盖bootstrap的样式
      • 使用我们自定义的样式覆盖bootstrap的样式，注意加作用域防止污染

        • 优点：
          实现方便
        • 缺点：
          缺乏复用性

          轮播图的响应式

  2. 大屏幕下怎么展示？
  • 将容器的高度固定（410px），将轮播图改为背景显示，由于可能图片的高度不一定是410px，所以需要设置css3中的background-size。
  1. 为什么这么展示？
  • 美工为了在不同屏幕下更好地展示将图片两边做的非常宽，但是我们大多数情况的页面宽度都无法满足这样的图片宽度，而且Bootstrap的样式中默认将图片的max-width设置为100%，造成界面图片缩放。
  1. 有几种实现方案？
    想在一个较小屏幕下展示一个超宽的图片，并让图片居中显示

    • 换用背景图的方式，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月*）

原文地址：https://www.cnblogs.com/iamzhiyudong/p/11454962.html

时间： 2024-10-06 18:24:51

Bootstrap学习总结的相关文章

HTML5+Bootstrap 学习笔记 4

HTML5 <map> <area> 标签 <map> 标签定义客户端的图像映射.图像映射是带有可点击区域的图像. <area> 标签定义图像映射内部的区域(图像映射指的是带有可点击区域的图像). area 元素始终嵌套在 <map> 标签内部. 1 <img src ="planets.gif" alt="Planets" usemap ="#planetmap" /> 2

Bootstrap学习 按钮组

把一系列的.btn按钮放入.btn-group中即可... <div class="btn-group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button>

Bootstrap学习笔记(二) 表单

在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名"form-control",将会实现一些设计上的定制效果. 1.宽度变成了100% 2.设置了一个浅灰色(#ccc)的边框 3.具有4px的圆角 4.设置阴影效果

Bootstrap 学习笔记 之表单（4 day）

Bootstrap学习到这里,理解了为什么它是一个框架,所谓的框架,目前看来就是它本身提供了一套完整的HTML结构和样式. 我们在使用的时候,只要按照这套规则来搭建HTML结构和加上相应的样式名后就可以了. 今天学习的是表单, Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 需要一提的就是表单的状态: 表单控件状态 除了 :focus 状态(即,用户点击 input 或使用 tab 键聚焦到 input 上),Bootstrap 还为禁用的输入框定义了样式,

bootstrap学习笔记一： bootstrap初认识，hello bootstrap（下）

这一篇主要是补上源码,开始之前请先回顾:bootstrap学习笔记一: bootstrap初认识,hello bootstrap(上) 首先,我们的页面要求, lang,charset等就不用说了,老html属性, viewport是h5的属性,目的是 width=device-width 铺满设备宽度, initial-scale=1正常比较 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c

Bootstrap学习（3）

Bootstrap 图片  Bootstrap 对图片的支持.Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来获得图片圆角. .img-circle:添加 border-radius:500px 来让整个图片变成圆形. .img-thumbnail:添加一些内边距(padding)和一个灰色的边框. 请看下面的实例演示: <!DOCTYPE html> <html> <head>

Bootstrap学习 下拉列表

如下可能是最简单的下拉列表了: <div class="dropdown"> <button class="btn btn-lg"data-toggle="dropdown"> DropDown <span class="caret"></span> </button> <ul class="dropdown-menu"> <li

Bootstrap学习 Base

Tapestry的学习不得不停一下了.因为Bootstrap再一次引起了我的注意,并且我不得不再系统地学习它一次. 1 bootstrap需要一个HTML5的环境,也就是说必须是: <!DOCTYPE html> <html> ... </html> 2 bootstrap3是移动设备优先的,需要指定一个meta信息,viewport,视角: <meta name="viewport" content="width=device-wi

BootStrap学习之先导篇——响应式网页

Bootstrap学习之前,要知道响应式网页的原理. 1.什么是响应式网页? 一个页面,可以根据浏览设备的不同,以及特性的不同,而自动改变布局.大小等.使得在不同的设备上上都可以呈现优秀的界面. 优点:可以自动适配PC.PAD.PHONE浏览器屏幕 不足:代码变复杂,需要考虑更多兼容性,并不适合内容非常多网页 2.需要掌握的是viewport的概念 早期的网页都是比较大,用于在手机屏幕中浏览,只能进行缩小,导致用户的浏览体验不好.iOS中提出了Viewport(视口)的概念,可以任意的指定大小,

Bootstrap学习 Form

总觉得Form这个东西怎么弄都行,弄弄就知道越弄越难弄了.老实儿地学学bootstrap的做法吧,-.-! 如下html表现为label在上,input在下的样式. form-group设置了margin, form-control控制的input等输入控件设置了其width为100%, 这就导致了和label不在一条线上. <div class="form-group"> <label for="exampleInputEmail1">Em