BootStrap---day01

学习新东西的步骤就是要实现3w1h，就是what\why\where\how

是什么？为什么使用它？在那里使用它？怎样使用他？

一、BootStrap介绍

1、bootstrap是什么？

• bootstrap是当下最时兴的前端框架（也可以说是 界面工具集）
• 具有移动端优先的设计理念
• 特点就是灵活简洁，代码优雅，美观大方
• 其目的是为了让web开发更敏捷

2、为什么使用bootstrap？

• 生态圈火，不断迭代更新
• 有一套美观大方的界面组件
• 让我们的web开发更简洁，刚快捷

3、bootstrap版本

目前应用最广泛的还是3.x.x版本和4.x.x版本

4、bootstrap准备

（1）可以在bootstrap中文网下载相关的压缩包

（2）也可以选择不下载压缩包，而是直接引入网络连接

css链接  http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css

jQuery链接  http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js

js链接  http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js

5、bootstrap文档

官方文档、中文文档

二、bootstrap的使用

1、网格系统（栅格系统）

行的类名是：row（一般使用网格系统时，要用row包起来，以免后续发生意想不到的错误，使代码可读性增强）

bootstrap定义了一套相应的网格系统，其使用方法九十级那个一个容器划分为12列，然后通过 col-xx-xx （col-屏幕的大小-份数）的类名控制一列的占比

超小屏   小于 768px        xs

小屏       768px 起           sm

中屏        992px 起          md

大屏        1200px 起         lg

列偏移      col-xx-offset-x  (xx为屏幕大小，x为左右列的份数)

因为有些时候12列并不能满足我们的要求，就有24列的网格系统被开发出来，可以实现一行5列的效果，即4，1，4，1，4，1，4，1，4来划分

2、视口

视口：可视窗口的区域

<meta name="viewport" content="width=device-width, initial-scale=1.0">中

width=device-width 表示让视口的宽度等于设备的宽度

initial-scale=1.0 表示初始化的缩放比例为1：1

user-scalable = yes  表示是否可以缩放

maximum-scale=2  表示最大放大比例为2倍

minimum-scale=0.5  表示最小缩小比例为0.5（但是经过案例使用返现并不起作用）

3、表格和表单

表格

使用下面的类名必须加上 .table 类

.table	为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped	在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered	为所有表格的单元格添加边框
.table-hover	在 <tbody> 内的任一行启用鼠标悬停状态

表单

垂直或基本表单        <form role="form">

内联表单                  <form class="form-inline" role="form">

水平表单                  <form class="form-horizontal" role="form">    

按钮

使用下面的类名必须加上 .btn 类

.btn	为按钮添加基本样式
.btn-default	默认/标准按钮
.btn-primary	原始按钮样式（未被操作）
.btn-success	表示成功的动作
.btn-info	该样式可用于要弹出信息的按钮
.btn-warning	表示需要谨慎操作的按钮
.btn-danger	表示一个危险动作的按钮操作
.btn-link	让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg	制作一个大按钮
.btn-sm	制作一个小按钮
.btn-xs	制作一个超小按钮
.btn-block	块级按钮(拉伸至父元素100%的宽度)
.active	按钮被点击
.disabled	禁用按钮

4、BS布局组件

图片

• 为图片添加圆角
  • .img-rounded

辅助类（有时间看看就行）

• pull-left  浮动到左边
• pull-right  浮动到右边
• clearfix  清除浮动
• show  强制元素显示 （display）
• hidden  强制元素隐藏  （display）

响应式实用工具

• visible-xs  仅在超小屏显示
• visible-sm   仅在小屏幕显示
• ……
• hidden-xs 仅在超小屏隐藏
• hidden-sm 仅在小屏隐藏
• ……
• 字体图标  类名  修改样式 优先级覆盖
• 下拉菜单
• ……
• 徽章  （验证消息的时候会用）

BS插件

• 文件的引入        
  • jquery文件的引入
  • Bootstrap.min.css文件引入
  • Bootstrap.min.js文件引入（需要jQuery，该文件要先引入jQuery文件，在jQuery文件之后再引入Bootstrap.min.js文件）
• 模态框（菜鸟）（bootstrap中文网） 
• 标签页 tab切换  （菜鸟）（bootstrap中文网）
• 提示  （菜鸟）（bootstrap中文网）
• 手风琴  （菜鸟）（bootstrap中文网）
• 轮播图  （菜鸟）（bootstrap中文网）
• 附加导航（吸顶）  （菜鸟）（bootstrap中文网）
• ......还有插件
  • 需要自己设置 top属性值，显示层级等问题  data-offset-top 指的是滚动到什么程度吸顶  data-spy 声明是吸顶的格式
  • data-spy = ' '     data-offset-top=' '
• 响应式导航栏
• 多媒体对象

图片的base64编码

图片base64编码（了解）不用发请求，直接编码转译  但是只限于小图片   网页上有转译工具

event表示事件状态

总之就是利用各种插件类名！！！

bootstrap的使用就是进行类名的引入辅以自己需要的事件和样式进行独特化修改事件(！！！！)和样式都是通过类名和id名或者其他属性名进行引入

三、学习bootstrap的一些网站

菜鸟教程

bootstrap中文网

四、总结

学习bootstrap的第一天，总的来说，学习到了一些bootstrap中常用的插件、布局和使用bootstrap的方式方法。在之后的项目开发中，会对各种类名更加熟练，提升开发速度