写在前面的乱七八糟的前言：当当当，现在是早上9:06，emmm是我是我还是我，(*╹▽╹*)今天讲讲BT这个磨人的小妖精，为什么说磨人呢，因为用的好就不磨人了啊~咳咳就跟我女盆友一样┓( ´∀` )┏。秉承万物皆对象，对象有空间的原则，BT框架提供了很多模块化的东西，写了一堆的CSS，如果要搭建一个个性化又复杂的网站，我劝你从良，少年~那怎么搞？不学吗，辣是不可能滴这么好用的框架，不学太可惜了，一个小小建议，先学怎么应用，再学怎么使用，哦吼？应用和使用不是一回事吗？少年你又水我！no no no，简单讲，应用就是cv大法，拿来即用，你无需知道原理跟内部到底有什么牛逼的东西生成这样的部件，而使用，是你知道并弄懂源码，还能随需而动~话不多说，盘她就是了~

目录

1、bootstrap的由来

2、bootstrap的优缺

3、bootstrap的构成

3.1引用

3.2CSS样式

3.3组件

3.4JS插件

内容

1、bootstrap的由来

1.1BT简介

来自Twitter，由其设计师Mark Otto和Jacob Thornton合作开发，由Less写成，是一个UI框架，开源免费。

1.2BT官网

英文版：https://getbootstrap.com/

中文版：https://getbootstrap.com/

我是乱入的旁白：emm不知道有没有小伙伴去研究过这俩个网站的设计，今早猫了一眼，我发现个不得了的事情，我滴天，BT中文居然是用BT框架写的耶，一堆的浮动~，然鹅，BT英文导航却是flex布局的，┓( ´∀` )┏；目前，BT英文已更新到4.3，而BT中文的4还在慢慢被接受中，目前主流还是3.3.7，所以？BT4将迎来box-flex时代喵？这再次警醒着我们，要好好盘英语？？？少年，你怕不是有点虎。作为一个爱国人士，爱国就好了嘛，BT中文盘起~

1.3BT中文网

创于2012年，与众多项目关联，React中文、jQuery中文、Next.JS中文、Node.js中文等。

2、bootstrap的优缺

2.1不足:

2.1.1↑学习成本：盘她用她，要学她

2.1.2代码冗余：对于小型项目而言，大量不需要使用到的CSS样式，会造成臃肿

2.1.3个性化定制较差：若设计稿的style跟BT自身的style差个十万八千里，便需要重写n多CSS样式去覆盖原有的，那么BT我要你何用。

2.1.4兼容问题：BT将所有的元素盒模型都设置为border-box，很难兼容IE，即使目前存在许多兼容IE的方法，但仍需引入其他文件，势必导致加载速度变慢，影响用户体验。

2.1.5js插件仍需丰富内容：如导航页面是锚点而没有滚动动画

2.1.6不利于扩展、重用、维护

2.2优势：

2.2.1栅格系统与CSS模块化：↑开发效率

2.2.2规范名称定义，易维护，如CSS声明顺序：相关属性声明应归为一组，并按照下面的顺序书写

2.2.2.1定位：Position

2.2.2.2盒模型：Box Model

2.2.2.3格式排版：Typographic

2.2.2.4视觉：Visual

2.2.2.5杂项：Misc

更多参考：CSS编码规范by@mdo

2.2.3规范项目开发流程

3、bootstrap的构成

3.1引用

3.1.1直接下载：上线的最好使用这一方式，一是安全，二是稳定，三是运行反应较快

3.1.2使用BootCDN：测试练习demo使用这一方式，主要是方便，但运行反应稍差

3.1.3使用Bower/npm/Composer：小白的我从来未使用过~

3.2CSS样式

3.2.1基本模板

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.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="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

  </body>

</html>

CV大法好，一点点慢慢盘她，不捉急~

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

更多的写法：<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />

X-UA-Compatible：针对IE8设置的，用于为IE8指定不同的页面渲染模式，即可锁定IE8使用什么标准进行渲染。

Edge 模式：通知 Windows Internet Explorer 以最高级别的可用模式显示内容，这实际上破坏了“锁定”模式，即如果你有IE9的话，说明你有IE789，那么就调用高版本的那个也就是IE9

chrome=1：如果IE有安装Google Chrome Frame，那么就走安装的组件，如果没有就和<meta http-equiv="X-UA-Compatible" content="edge" />一样。

说明：针对IE 6，7，8等版本的浏览器插件Google Chrome Frame，可以让用户的浏览器外观依然是IE的菜单和界面，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核

<meta name="viewport" content="width=device-width,initial-scale=1"/>

更多的写法：<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1,user-scalable=no"/>

meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题

width:设置layout viewport的宽度，正整数/"device-width"

initial-scale：设置页面初始缩放值，数字，可浮点可整数

minimum-scale/maximum-scale:允许用户的最小/最大缩放值，数字，可浮点可整数

height：很少用

user-scalable：是否允许用户进行缩放，yes：允许，no：不允许

@layout viewport

PPK的关于viewport的理论：第一篇|第二篇|第三篇

在PPK大佬的理论中，浏览器有三种视口：Layout viewport、visiual viewport、ideal viewport

更多拓展：PPK的三个viewport

在移动端浏览器当中，存在着两种视口：可见视口（设备大小），视窗视口（网页宽度）

若我们的屏幕是320像素*480像素的大小（iPhone4），假设在浏览器中，320像素的屏幕宽度，能够展示980像素宽度的内容

320像素的宽度就是可见视口的宽度，而能够显示的980像素的宽度就是视窗视口的宽度

参考文献：

https://blog.csdn.net/u012402190/article/details/70172371

@device-width

一般，width=phys.width：物理宽度，获取时使用：document.documentElement.clientWidth

而device-width=css.width，获取时使用：window.screen.width

更多拓展：JS中各种宽度距离

参考文献：

https://www.cnblogs.com/tenWood/p/7934942.html

https://www.cnblogs.com/wbxjiayou/p/5176815.html

我是乱入的旁白：现在是12:06，不知不觉已三小时过去了，又给自己挖了俩个坑~宽度获取与三个视口TAT

3.2.2全局样式

3.2.2.1重置css：Normalize.css

3.2.2.2布局容器：.container与.container-fluid

.container{padding：0 15px，margin：auto}（min-width：768px=750px；min-width：992px=970px；min-width：1200px=1170px）

.container-fluid{padding: 0 15px}类似于width：100%

由于使用padding，故俩类容器不能嵌套

3.2.2.3栅格系统

类似表格，系统分为12列，通过行（row）与列（column）组合布局

.row{margin:0 -15px}可看为用于抵消容器自带的padding,可嵌套

.col-*-x:{position:relative;min-height:1px;padding:0 15px}相对定位声明，用以下面的列排序

3.2.2.3.1媒体查询

3.2.2.3.2列偏移.col-*-offset-x

.col-*-offset-x{margin-left:0:0% / 1：8.3333% / 2：16.66667% / 3:25% / 4:33.33333%}

3.2.2.3.3列排序.col-*-push-x与.col-*-pull-x

.col-*-push-x{left:0:auto / 1：8.3333% / 2：16.66667% / 3:25% / 4:33.33333%}

.col-*-pull-x{right:0:auto / 1：8.3333% / 2：16.66667% / 3:25% / 4:33.33333%}

3.2.2.4排版

3.2.2.4.1标题h1-h6副标题small

h1-h3/.h1-.h3{margin：20px 0 10px 0；line-height：1.1 }h4-h6/.h4-.h6{margin：10px 0；line-height：1.1}

small/.small{font-size:75%；line-height：1；color：#777}

3.2.2.4.2页面主体

font-size：14px；line-height：1.428，line-height使用相对单位，即font-size一改动，line-height会随之变动

p段落{margin： 0 0 10px 0}

3.2.2.5内联文本

mark标亮

del删除

ins插入

u下划线文本

strong强调

em斜体

text-left/center/right/justify/nowrap：文本对齐

text-lowercase/uppercase/capitalize：英文大小写切换

3.2.2.6缩略语

3.2.2.7地址

3.2.2.8引用

blockquote{padding: 10px 20px;margin: 0 0 20px;font-size: 17.5px;border-left: 5px solid #eee;}制造一个左边框，.blockquote-reverse，倒置右引用

footer标明引用来源，cite标明来源名称

3.2.2.9列表：无序、有序、无样式、内联、描述

3.2.2.0代码

内联：<code><code/>{

padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;

}

用户输入:<kbd><kbd/>{

padding: 2px 4px;
font-size: 90%;
color: #fff;
background-color: #333;
border-radius: 3px;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);

}

3.2.2.11表格

table/.table

条纹状表格：.table-striped/.table-condensed

状态类：

.active：鼠标悬停在行或单元格上时所设置的颜色

.success：标识成功或积极的动作

.info：标识普通的提示信息或动作

.warning：标识警告或需要用户注意

.danger：标识危险或潜在的带来负面影响的动作

响应式表格：.table-responsive

3.2.2.12表单

内联表单：.form-inline

水平排列的表单：.form-horizontal

控件：输入框、文本域、多选和单选框、下拉列表.form-control

3.2.2.13按钮

预定义样式：.btn/.btn-default

尺寸：.btn-lg/.btn-sm/.btn-xs

点击：active

禁用：disabled

3.2.2.14图片

响应式图片：.img-responsive{

max-width：100%；

height：auto；

display：block；

}

使其居中使用：.center-block{

display：block；

margin：0 auto；

}

图片形状：.img-rounded不带边框方形；.img-circle圆形；.img-thumbnail带边框的方形

3.2.2.15辅助类

情境文本颜色：text-muted/primary/sucess/info/warning/danger

情境背景色：bg-

三角符号：caret

清除浮动：.clearfix{

&:before,

  &:after {

    content: " ";

    display: table;

  }

  &:after {

    clear: both;

  }

}

3.3CSS组件

3.4JS插件

我是无处安放的小结：emmm，总的来说，应用的比较多的还是栅格系统、表单、下拉菜单、响应式图片等，重头戏部分还是在组件跟JS插件，所以还是打算将CSS组件与JS插件另外开成各一篇，我是不会承认我就是懒滴~

20190430-Bootstrap之旅的更多相关文章

  1. Bootstrap环境安装加使用---开启Bootstrap 之旅

    1.首先去Bootstrap官网https://getbootstrap.com/上下载Bootstrap 的最新版本 对应的中文页面如下: 下载自己所需要的版本(目前我自己下载的是编译的css和js ...

  2. Bootstrap响应式布局(1)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  3. Failed to find a valid digest in the 'integrity' attribute for resource

    一.Bootstrap  引入报错 在使用bootstrap过程中发现无法使用下拉导航栏,或者是显示不出效果. Failed to find a valid digest in the 'integr ...

  4. 【SSM之旅】Spring+SpringMVC+MyBatis+Bootstrap整合基础篇（一）项目简介及技术选型相关介绍

    试水 一直想去搭建个自己的个人博客,苦于自己的技术有限,然后也个人也比较懒散.想动而不能动,想动而懒得动,就这么一直拖到了现在.总觉得应该把这几年来的所学总结一番,这样才能有所成长. 不知在何时,那就 ...

  5. Python之旅Day15 Bootstrap与Django初识

    Bootstrap初识 Bootstrap简介 Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.(官网http://www.boo ...

  6. 基于Metronic的Bootstrap开发框架经验总结（5）--Bootstrap文件上传插件File Input的使用

    Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...

  7. “英雄之旅”见闻和小结----angular2系列（三)

    前言: 本系列在前面两篇文章,介绍了Zone.js和angular2的基础概念.而后对于ng2的学习,还是由官方的 Tour of Heroes 开始. 以下内容经过提炼和个人理解,当然也会有不正确的 ...

  8. JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  9. Entity Framework 实体框架的形成之旅--实体数据模型 (EDM)的处理（4）

    在前面几篇关于Entity Framework 实体框架的介绍里面,已经逐步对整个框架进行了一步步的演化,以期达到统一.高效.可重用性等目的,本文继续探讨基于泛型的仓储模式实体框架方面的改进优化,使我 ...

  10. bootstrap-table填坑之旅<一>认识bootstrap-table

    应公司需求,改版公司ERP的数据显示样式.由于前期开发的样式是bootstrap,所以选bootstrap-table理所当然(也是因为看了bootstrap-table官网的example功能强大, ...

随机推荐

  1. 001 KNN分类 最邻近算法

    1.文件5.0,3.5,1.6,0.6,apple5.1,3.8,1.9,0.4,apple4.8,3.0,1.4,0.3,apple5.1,3.8,1.6,0.2,apple4.6,3.2,1.4, ...

  2. [GO]方法集

    指针变量的方法集 package main import "fmt" type Person struct { name string sex byte age int } fun ...

  3. 【转载】mysql中timestamp,datetime,int类型的区别与优劣

    转载来自souldak,微博:@evagle以下内容整合筛选自互联网: int1. 占用4个字节2. 建立索引之后,查询速度快3. 条件范围搜索可以使用使用between4. 不能使用mysql提供的 ...

  4. CodeForces 289B Polo the Penguin and Matrix （数学，中位数）

    题意:给定 n * m 个数,然后每次只能把其中一个数减少d, 问你能不能最后所有的数相等. 析:很简单么,首先这个矩阵没什么用,用一维的存,然后找那个中位数即可,如果所有的数减去中位数,都能整除d, ...

  5. HttpUploader2-queue版本

    1.1 2016版本 目标: 1.大幅度优化JS代码,面向开发人员更加友好,逻辑清晰,代码简洁,便于阅读,定制开发,扩展,更加符合企业级应用需求. 2.大幅度使用并发技术来提高上传速度,与HttpUp ...

  6. js对象 1字符串对象2时间日期对象3数字对象

    1字符串对象  直接对字符操作 var str = "这,是,不,是,字,符,串";        //字符串转数组  字符串.split(分隔符)        var arr ...

  7. delphi edit边框成为下划线

    设置它的几个属性:BevelEdges    |_ beLeft = False;    |_ beTop   = False;    |_ beRight = False;    |_ beBott ...

  8. Android-获取网络图片设置壁纸

    下载图片,设置壁纸 的代码: package liudeli.async; import android.app.Activity; import android.app.ProgressDialog ...

  9. [Erlang06]在Erlang shell怎么在目录A下编译目录B下的文件，并把生成文件统一放置目录C？

    问题描述: 我们想快速测试一个小功能,第一个反应就是打开Erl shell 直接输入,但是当想测试一个复杂的函数时,一般会写成一个*.erl文件,然后在shell下: cd(FileDir). c(F ...

  10. SSMS查询快捷方式设置

    打开SQL Server Mangement Studio,然后依次打开:工具->选项->环境->键盘->查询快捷方式,大家可以看到,SSMS已经自带了12个快捷键,其中3个已 ...