【基础知识】_前端三大件

前端三大件

HTML

web概念

C/S:Client/Server 客户端/服务器端

本地有一个客户端程序，远程有一个服务器端程序，开发、安装、部署、维护麻烦。
B/S:Browser/Server 浏览器/服务器端

用户只需要一个浏览器，通过不同的网址(URL)，访问不同的远程服务器端，开发、安装、部署、维护简单。
静态资源：HTML,css,JavaScript，浏览器请求静态资源时，服务器直接发送，浏览器都内置了静态资源的解析引擎，可以展示静态资源。
动态资源：jsp/servlet,php,asp，浏览器请求动态资源时，服务器会执行动态资源，转化为静态资源，然后再发送给浏览器。

HTML标签

文件标签
1. html:根标签
2. head:头标签，用于指定html文档的一些属性，引入外部的资源
3. title:标题标签
4. body:体标签
5. :html5中定义该文档是html文档
文本标签(与文本有关的标签)
1. <!– 注释内容–> :注释
2. <h1>~<h6>:标题标签
3. <p>:段落标签
4. <br>:换行标签（自闭和）
5. <hr>:展示一条水平线（自闭和，自带换行功能）
6. <b>:字体加粗
7. <i>:字体斜体
8. <font>:字体标签
9. <center>:文本居中标签（只能用于文本）
- html文件文本中一个&nbsp；就表示一个空格，一般单个空格不用改符号，多个连续空格才需要用到该符号
- html文件文本中一个&yen；就表示一个人名币标志
图片标签
1. <img src=”相对路径”>:展示图片（自闭和）
列表标签
1. <ol>:有序列表
2. <ul>:无序列表
3. <li>:列表内的一行（与上两个标签同时使用，带换行功能）
链接标签
1. <a href=”指定访问资源的URL”>
  
  属性：
  - href
  - target：指定打开资源的方式
    - _self：在当前页面打开，即链接地址页面替代当前页面
    - _blank：在空白页面打开，即保留当前页面
  e.g. <a href=”https://space.bilibili.com/29623500">点我
与css结合才有作用的
1. div:块级标签，有换行功能
2. span:行内标签，没有换行功能
3. header:页眉标签
4. footer:页脚标签
表格标签
1. table:定义表格
2. tr:定义行
3. th:定义单元格，单元格内容自动居中、加粗
4. td:定义单元格

表单标签

form:定义表单

属性：
- action:指定提交数据的URL，也就是表单数据要提交到的服务器资源的地址
- method:指定提交方式
  - get:请求参数会在地址栏中显示，会封装到请求行中。
  - post:请求参数不会在地址栏中显示，会封装到请求体中。
input:表单项

属性：
- name:表单提交的请求参数一般是以键值对的形式封装到请求数据中，name属性值就是该键值对中的key，没有该属性，表单中的数据无法被提交。
- type:决定表单项展示的样式
  1. text:表单为文本输入框（默认值）
  2. password:表单为密码输入框
    
    e.g. <input type=”password” name=”password” placeholder=”请输入密码”>
  3. radio:表单为单选框，要让多个单选框实现单选效果，则这些单选框的name属性值要相同
    
    e.g. <input type=”radio” name=”gender1” value=”male” checked=”checked”>男
  4. checkbox:表单为复选框
    
    e.g. <input type=”checkbox” name=”hobby” value=”sing”>唱
    1. file:表单为文件选择框
    2. hidden:表单为隐藏域
    3. date:日期选择框
      
      e.g. <input type=”date” name=”birthday” >
    4. submit:表单为提交按钮，可以提交表单数据到action指定资源地址。提交的数据类型都是每个框中的name值=value值，比如下方下拉列表中选择了北京，则提交province=1。
    5. button:普通按钮，与javascript结合使用
    6. image:图片提交按钮，作用与submit按钮一样，只不过按键改成了地址为src的图片
      
      e.g. <input type=”image” src=”image/hot_tel.jpg”>
- placeholder:指定输入框中的提示信息，一般与text和password结合使用
- checked:一般与两个选择框结合使用，可以用于指定选择框的默认值，也可以用于表示或者改变选择框的状态。初始创建时给该属性赋值为”checked”，即标识该框默认被选中；通过代码获取checked属性的属性值时，当该属性值为true时表示该框当前被选中，属性值为false时表示该框当前没有被选中；也可以直接通过代码给该属性赋值true或false来改变选择框的状态
- lable:指定输入表单的文字描述信息（类似于markdown中图片插入符中的[]）

select:下拉列表

属性：

option:子元素，用来指定列表的各项

e.g.

<select name="province">    
    <option value="">--请选择--</option>    
    <option value="1">北京</option>    
    <option value="2">上海</option>    
    <option value="3" selected>陕西</option>
</select>

textarea:文本域

属性：
- cols:指定列数，也就是每一行有多少个字符
- rows:默认多少行

CSS

CSS的使用样式

内联样式：在标签内使用style属性指定css代码

e.g. <div style=”color:red;font-size:20px;”>Hello CSS!</div>
- 每次编写的css代码只能作用于一个标签的标签体内容上
内部样式：在head标签内，定义style标签，style标签的标签体内容就是css代码

e.g.
1
2
3
4
5
6
<style>
div{
color:red;
font-size:20px;
}
</style>
1
<div>Hello CSS!</div>
- 内部样式css代码内作用在整个html文件里所有div标签的标签体内容上
外部样式：在外部编写一个.css格式的资源文件，然后再head标签内，定义link标签，引入外部的资源文件

e.g. a.css文件：
1
2
3
4
div{
color:red;
font-size:20px;
}
1
<link rel="stylesheet" href="css/a.css">
1
<div>Hello CSS!</div>

CSS的语法

主要用于内部样式和外部样式两种使用方式，格式：

选择器{
	属性名1:属性值1;
	属性名2:属性值2;
	· · ·
}

选择器

基础选择器
- id选择器：选择具体的id属性值对应的标签，html文档中标签的id属性的属性值应该唯一
  
  #id属性值{}
- 元素选择器：选择具有某个标签名称的标签，就是直接把标签名当作选择器
  
  标签名称{}
- 类选择器：选择class属性的属性值相同的所有标签
  
  .class属性值{}
- 当这三个选择器冲突时，优先级顺序为：id>类>元素
扩展选择器：在以上三个基础选择器的基础之上添加一些运算符，定义出具有特殊意义的选择器
- 选择所有标签
  
  *{}
- 并集选择器
  
  选择器1,选择器2{}
- 子选择器：选择在选择器1对应标签包围下的选择器2对应标签
  
  选择器1 选择器2{}
- 父选择器：选择包围了选择器2对应标签的选择器1对应标签
  
  选择器1>选择器2{}
- 属性选择器：选择具有某个标签名称中，指定了属性属性值的标签
  
  标签名称[属性名=”属性值”]{}
- 伪类选择器：选择一些标签具有的状态
  
  标签名称:状态{}
  
  状态列表：
  - link：初始化状态
  - visited：左键点击后的状态
  - active：左键点击时的状态
  - hover：鼠标悬浮，没点击时的状态

style中的属性

style中的属性主要用于设置对应标签中的标签体内容的属性和属性值

文本
- /*css代码内注释内容*/：css内代码注释方法

font-size：字体大小
color：文本颜色
text-align：对齐方式
line-height：行高

e.g.

/*颜色的属性值用这两种写法都可以*/
color: #FF0000;
color:yellow;

/*CSS属性中普遍使用像素px作为长度单位*/
font-size: 30px;

text-align: center;

/*将文本高度与标签体尺寸设置为一样可以是文本高度居中*/
line-height: 200px;

背景

background

e.g.

1 2	/设置背景图片、不重复、居中显示/ background: url("./img/jingxuan_2.jpg") no-repeat center;

给整个界面添加背景时，则直接以body标签为选择器，编写css代码

边框

border：设置边框
border-radius：设置边框圆角

e.g.

/*设置边框粗细、实线、颜色（包含整个标签体内容的边框，而不是文本）*/
border: 1px solid red;

/*设置边框圆角*/
border-radius: 5px;

尺寸
- width：宽度
- height：高度
- 以上字体大小、行高、标签尺寸属性的属性值单位一般都设置为像素px；也可以时百分比，这个百分比数值就是该标签盒子在父标签盒子中所占的比例。
e.g.
1
2
3
/*尺寸:指的是标签体内容总体尺寸，不是文本尺寸。所以该尺寸一般与border边框对应*/
height: 200px;
width: 200px;
盒子模型：用于控制布局

其实每一个围堵标签都可以看作一个盒子，里面嵌套的标签可以看作它的子盒子
- margin：外边距，被选中标签盒子与父盒子或者兄弟盒子边框的距离，可以按margin-left等四个方向分开设置。具体是与父盒子还是兄弟盒子的距离要自己试出来。
- padding：内边距，被选中标签盒子与子盒子边框的距离
- float：浮动
  - left：浮动到同一行中最左边
  - right：浮动到同一行中最右边

JavaScript

ECMAScript客户端脚本语言的标准

JavaScript是一门客户端脚本编程语言，每个浏览器都有JavaScript的解析引擎，可以直接被浏览器执行。所以JavaScript使得用户可以在不与服务器端交流的情况下，实现某些由JavaScript来执行的动态操作，比如校验表单输入格式。

JavaScript=ECMAScript+BOM+DOM
与html的结合方式
- 内部JS：定义<script>围堵标签，其中的标签体内容就是js代码，其中定义<script>标签的位置决定了js代码的执行顺序，就是按照从前往后的顺序执行。
- 外部JS：定义<script>围堵标签，通过该标签的src属性引入外部编写好的js代码文件。
js代码中的注释方式
- //注释内容：单行注释
- /*多行注释*/：多行注释
数据类型
- number：数字，包括整数、小数、NaN(not a number 一个不是数字的数字类型)
- string：字符串
- boolean：布尔型
- null：一个为空的占位符
- undefined：未定义，比如一个没有初始化赋值的变量的值
- 引用数据类型：对象
变量
- 创建变量：var 变量名=初始化值
- 获取变量的数据类型：typeof 变量名
  - null类型的变量的运算结果为object
运算符
- /：除，JavaScript中的/是直接得到小数结果
- ===：全等于，先判断类型，在判断数值，比如在JavaScript中的”123”==123结果为true，”123”===123结果为false。
常见对象
- Function：方法对象，与java中不同，JavaScript中方法可以单独作为对象
  - 创建1：function 方法名称(形参列表){方法体}
  - 创建2：var 方法名称=function(形参列表){方法体}
- Array：数组对象
  - 创建1：var array = new Array(元素列表);
  - 创建2：var array = [元素列表];
- Date：日期对象
  - 创建：var date new Date();
  - 方法toLocaleString()：返回当前date对象对应的时间本地字符串格式
  - 方法getTime()：获取毫秒值
- Math：数学对象
  - 不用创建，直接使用：Math.方法名();
  - 方法random()：返回0~1之间的随机数，含0不含1
  - 方法ceil()：向上取整
  - 方法floor()：向下取整
  - 方法round()：四舍五入取整
  - 属性PI：圆周率
- RegExp：正则表达式对象
  - 创建1：var reg = new RegExp(“正则表达式”);
  - 创建2：var reg = /正则表达式/;
  - 方法test(输入参数)：验证输入参数是否符合对象中的正则表达式，返回布尔值
  - 正则表达式：一种定义字符串的组成规则
    - []：单个字符，e.g.[a]表示字符a，[ab]表示字符a或者字符b，[a-z]表示26个字符中的某一个
    - \d：任意单个数字字符[0-9]
    - \w：任意单个单词字符[a-zA-Z0-9_]
    - ?：接在某个字符后面，表示该字符出现0次或1次
    - *：接在某个字符后面，表示该字符出现0~无限次
    - +：接在某个字符后面，表示该字符出现1~无限次
    - {m,n}：接在某个字符后面，表示该字符出现m~n次
    - ^：正则表达式开始符号
    - $：正则表达式结束符号
  e.g.
  1
  2
  3
  4
  var username = document.getElementById("username").value;
  var reg_username = /^\w{6,12}$/;
  var flag = reg_username.test(username);
  //校验username输入框中数据是否符合正则表达式。
- Global：全局对象
  - 不用创建，直接使用，且Global引用可以省略：方法名();
  - 方法parseInt()：将字符串转为数字
  - 方法eval()：将字符串参数直接转化成JavaScript代码来执行
    
    e.g.
    1
    2
    var jscode = "alert(456);";
    eval(jscode);
  - 方法encodeURI()：url编码方法，用于把字符串按照特定的编码方式(gbk或utf8)进行编码
  - 方法decodeURI()：url编码方法，用于把url码还原成字符串
    
    e.g.
    1
    2
    3
    var str = "许佳琪宋昕冉";
    var encode = encodeURI(str);
    var s = decodeURI(encode);
  - URL编码：utf8编码中，一个汉字被编码后占三个字节；gbk编码中，一个汉字占两个字节。一个字节占8个二进制位。
    
    e.g. 传智播客 = %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
    
    一个十六进制数占四个二进制位，以上一个百分号%加两个十六进制数就代表一个字节，所以可以判断出此处为utf8编码

BOM浏览器对象模型

JavaScript已经将浏览器的各个组成部分封装成了对象，并定义了一些方法可以进行某些操作，这些特殊的对象统称为BOM

window：窗口对象
- 不用创建，直接使用，且window引用可以省略：方法名();
- 方法alert()：显示带有一段消息和一个确认按钮的警告框
  
  弹出窗口一样有顺序，在程序中在前的弹窗方法先弹出，所有弹窗完毕再显示主页面。
  
  弹窗方法的执行顺序就是在html标签中的顺序，程序中方法执行或者变量赋值都是按照编写顺序来的。但是弹窗在显示时和程序执行顺序不一样，在页面显示时都是要先显示出弹窗，在弹窗上点击确定之后再显示主页面上的东西。一定要注意这个显示顺序与程序执行顺序是无关的。
- 方法confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框，如果用户点击确认按钮，则该方法返回布尔值true；如果用户点击取消按钮，则该方法返回布尔值false
- 方法prompt()：显示可提供用户输入的对话框，该方法的返回值即为用户输入的值
- 方法close()：关闭浏览器窗口，哪个窗口对象调用该方法就关闭哪个窗口，所以使用这个方法时，最好不要省略Window引用
- 方法open()：打开一个新的浏览器窗口，该方法的返回值为一个新的Window对象
- 方法setTimeout(方法对象或js代码，毫秒值)：在指定的毫秒数后调用指定函数方法，该方法的返回值为一个唯一标识，用来取消该定时器
- 方法clearTimeout(定时器唯一标识)：取消由setTimeout()方法设置的定时器
- 方法setInterval(方法对象或js代码，毫秒值)：按照指定的毫秒值为周期来调用指定函数方法
- 一定不要把一次性定时器和循环语句结合使用，因为JavaScript中的定时器语句并不像java中的sleep方法。每个定时器会自己开辟一个计时，定时器与循环语句结合使用相当于多个计时线程同时开始计时。所以想要达到每过一段时间执行一个操作的效果，就是用周期定时器就好了，通过设定停止条件就可以达到循环语句的效果。
- 方法clearInterval(定时器唯一标识)：取消由setInterval()方法设置的循环定时器
- 属性history：历史记录对象
- 属性location：地址栏对象
- 属性Navigator：浏览器对象
- 属性Screen：显示屏屏幕对象
- 属性document：文档对象
location：地址栏对象
- 创建1：window.location
- 创建2：location
- 方法reload()：重新加载当前文档，刷新
- 属性href：当前页面的完整URL。可以通过修改该属性来进行页面跳转
history：历史记录对象
- 创建1：window.history
- 创建2：history
- 方法back()：加载history列表中的前一个URL
- 方法forword()：加载history列表中的下一个URL
- 方法go(参数)：加载history列表中的下参数个URL，该参数可以为正数也可以为负数
- 属性length：当前窗口的历史记录列表中URL的数量

DOM文档对象模型

JavaScript已经将标记语言文档（html）的各个组成部分（各个标签）封装成了对象，并定义了一些方法可以对标记语言文档进行CRUD的动态操作，这些特殊的对象统称为DOM

document：文档对象

创建1：window.document
创建2：document
方法getElementById()：根据html标签的id属性值来获取标签对象
方法getElementsByTagName()：根据html标签的标签名称来获取标签对象，该方法的返回值为一个标签对象数组
方法getElementsByClassName()：根据html标签的Class属性值来获取标签对象，该方法的返回值为一个标签对象数组
方法getElementsByName()：根据html标签的name属性值来获取标签对象，该方法的返回值为一个标签对象数组
方法createAttribute(name)：创建属性对象
方法createComment()：创建注释对象
方法createElement()：创建标签对象
方法createTextNode() ：创建文本对象

方法write()：将字符串参数转化为html语句，插入到所在位置的html文档中

e.g.

1
2
3

var num = 1;
document.write(num+"---"+typeof(num)+"<br>");
//通过JavaScript中的方法将字符串参数转化为html语句,""号表示字符串，数字类型数据与字符串相加自动转换类型为字符串类型。

element：标签对象
- 创建：通过document来获取或者创建
- 方法removeAttribute(属性名)：删除属性，实参要加双引号
- 方法setAttribute(属性名，属性值)：设置属性，属性名实参要加双引号
- 方法appendChild()：向标签对象的子标签列表的结尾添加新的标签对象
- 方法removeChild() ：删除（并返回）当前标签对象的指定子标签对象
- 方法replaceChild()：用新标签对象替换一个子标签对象
- 属性parentNode：该标签对象的父标签对象
- 属性innerHTML：标签体内容，可以通过直接通过标签对象来更改标签体内容
  
  e.g.
  1
  2
  var xu = document.getElementById("xu");
  xu.innerHTML = "许佳琪美啊！";
- 其他属性：标签对象的属性，可以直接通过标签对象来添加或更改标签属性的属性值
  
  e.g.
  1
  2
  var light = document.getElementById("light");
  light.src="./img/on.gif";

事件监听机制

某些标签对应的组件（按钮、文本输入框等）被执行了某些操作（单机、双击等）后，触发某些代码方法的执行。编写方法：将操作事件作为组件标签的属性，要执行的代码方法作为该属性的属性值。

常见事件列表

onclick：单击事件

e.g.

<img id="light" src="./img/off.gif" onclick="fun1();">
<!-- onclick为单机事件属性 -->
<!-- 非常重要：这里调用fun1()对象一定要加()，不然会出错，与后面在script标签中通过标签对象调用不一样。 -->

<img id="light2" src="./img/off.gif">

<script>
    function fun1() {
        alert("我被点了");
    }

    var light2 = document.getElementById("light2");
    light2.onclick = fun1;
    //操作标签对象时，还可以给标签加上原来没有的属性。
    //非常重要：这里调用fun1对象一定不能加()，不然会出错，与前面直接在标签属性中调用不一样。

</script>

JavaScript中被调用方法不一定要在被调用之前就定义好
操作标签对象时，可以直接给标签加上原来没有的属性和属性值

e.g.

var nwd = document.getElementById("nwd");
var nwindow;
function fun() {
    nwindow = open("http://www.baidu.com");//open()打开新窗口方法的返回值为新窗口的窗口对象。
}
nwd.onclick = fun;
//非常重要：此处一定不能直接写nwd.onclick=open("http://www.baidu.com");，也不能把fun写成fun()。
//和之前一样，如果照上述两种方式写会出错，不会起到单机弹出的效果，而是打开网页直接弹出，再单机按钮无任何反应。
//（也可以像下面两种方法一样直接在给onclick赋值时定义函数对象，这样也可以正确执行。）

var dwd = document.getElementById("dwd");
dwd.onclick = function () {
    window.close();//关闭本窗口。
}

var dnwd = document.getElementById("dnwd");
dnwd.onclick = function () {
    nwindow.close();//关闭新打开的窗口。
}

setTimeout("fun1();",3000);
//一次性定时器。
//或者写成 setTimeout(fun1,3000); 也可以。
//非常重要：所以学到此处应该能搞懂一些了：fun1和"fun1();"的作用效果是一样的，
//只不过前者的含义是调用function对象fun1，而后者的含义是执行脚本代码中的fun1()方法。

function fun1() {
    alert("boom~~~");
}

以上两个例子中共有三种给onclick事件添加监视器的方式
fun1和”fun1();”的作用效果是一样的，只不过前者的含义是调用function对象fun1，而后者的含义是执行脚本代码中的fun1()方法；一般在html代码中用后种写法，JavaScript代码种用签中写法。而fun1()则表示方法的返回值。

e.g.

1 2	<a href="javascript:void(0);" onclick="delTr(this);">删除</a> <!-- html语句中的标签属性中的this指的就是该标签对象 -->

html语句中的标签属性中delTr方法的实参this，指的就是当前所在标签对象
如果超链接标签<a>有两个功能：1.可以被点击、2.点击后跳转到href指定的url。现在想：保留1功能，去掉2功能，那么实现方法就是设置href=”javascript:void(0);”，可以使超链接不跳转

ondblclick：双击事件
onblur：失去焦点，就比如一个文本输入框中本来有光标在闪，然后点击框外，使框中失去闪动光标。该事件一般用于绑定文本输入框标签，用来进行输入结束后的校验操作
onfocus：元素获得焦点，就比如点击一个文本输入框，使框中有光标在闪
onload：一张页面或一幅图像完成加载
onmousedown：鼠标按钮被按下
onmouseup：鼠标按键被松开
onmousemove：鼠标被移动
onmouseover：鼠标移到某元素之上
onmouseout：鼠标从某元素移开
onkeydown：某个键盘按键被按下
onkeyup：某个键盘按键被松开
onkeypress：某个键盘按键被按下并松开
onchange：域的内容被改变，一般用于绑定下拉列表标签
onselect：文本被选中

onsubmit：确认按钮被点击，一般用于绑定表单标签，在表单真正提交之前通过监听器（代码方法）校验表单格式是否都正确，如果不通过则不会真正提交

e.g.

document.getElementById("form").onsubmit = function () {
    var flag = false;

    //这里写校验用户名格式是否正确代码，如果正确就会返回ture，真正提交表单。
    //如果校验出格式不正确，就会返回false，表单会被阻止提交，直到格式修改正确。

    return flag;
}

JavaScript中创建对象一律用var，比如这里不能用boolean代替var
获取单个标签对象时，还是尽量给标签定义一个id属性值，然后通过document.getElementById()方法来获取标签对象，因为其他获取标签对象的方法的返回值类型都是数组

onreset：重置按钮被点击

Bootstrap

快速入门

基础概念：Bootstrap是一个基于HTML、CSS、JavaScript的前端开发框架，主要内容有响应式布局、css样式和js插件。

使用步骤

下载Bootstrap相关文件(fonts、css、js)
将这三个文件夹放到项目中

按以下格式创建html文档

<!DOCTYPE html>
<html lang="zh">
<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>helloBootstrap</title>
    
	<!-- 加载Bootstrap的所有css样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
   
</head>
<body>

    <h1>hello Bootstrap!</h1>
    <!-- html文档的主体代码都放在此处 -->
    
	<!-- 加载jQuery ：jQuery是一个非常重要的JavaScript框架。(Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    
    <!-- 加载Bootstrap的所有JavaScript插件，也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
    
</body>
</html>

三个meta放在head标签的最前面
在head标签中加载css样式
在body标签的最后加载jQuery和js插件

响应式布局

通过一些由框架定义好的html标签类属性的属性值来实现栅格系统，将一行平均分成12个格子，指定每个标签占几个格子。

标签的class属性属性值：

container：定义该标签为栅格容器，栅格两边留有一定空间
container-fluid：定义该标签为栅格容器，栅格在每一种设备上都是占满100%宽度
row：定义该标签为栅格行
col-设备代号-格子数目：定义该标签为栅格元素，指定该个标签在不同设备上，所占的栅格格子数目
- xs：超小屏幕(<768px)
- sm：小屏幕(>=768px)
- md：中等屏幕(>=992px)
- lg：大屏幕(>=1200px)

tips：

如果一个标签在一个设备上指定所占格子数超过12，则该标签的标签体内容超出12个格子的部分，自动换行放到下一行中
如果正是设备宽度小于设置栅格属性的设备代码的最小值，则一个标签会占满一整行

e.g.

<!--定义栅格容器-->
<div class="container-fluid">
    
    <!--定义栅格行-->
    <div class="row">
        
        <!--定义栅格元素大屏幕中占一个格子，在小屏幕中占两个格子。其中定义元素的属性值和类选择器属性值可以共存于同一个引号中，用空格隔开即可。-->
        <div class="col-lg-1 col-sm-2 inner">栅格</div>
        <div class="col-lg-1 col-sm-2 inner">栅格</div>
        <div class="col-lg-1 col-sm-2 inner">栅格</div>
        <div class="col-lg-1 col-sm-2 inner">栅格</div>
        <div class="col-lg-1 col-sm-2 inner">栅格</div>
        <div class="col-lg-1 col-sm-2 inner">栅格</div>
    </div>
</div>

CSS样式和JS插件

这一块内容只要做到能将bootstrap官网上的这些样式、组件、插件代码复制过来，能看懂，能修改细节，就可以了，不需要自己来写。