麦壳儿UIandFE2
麦壳儿UIandFE2

bootstrap使用说明

序

简称：bs.集html、css、js框架于一身，功能更强更全。也就是说结构按照基准模板搭建，类名不要随意删改，对应的js交互控制自然都有了。后台人员较为喜欢使用，因为几乎不用书写css样式，自带的就基本让你满意。前端人建议工作中不要过于依赖，否则呵呵了。

框架的分类：

html、css、js

应用

1 移动端开发；（pc端也可以使用，支持不太好）

2 响应式布局；

依赖

jQuery；
这么一个功能强大完善的代码库，几乎不会选择从原始js层级开发，代码量可想而知，就像我们要做一盘菜就没必要还要掌握菜和配料等是怎么种出来的，只需要到菜市场买回来直接进行就ok了。所以它选择了在jQuery的基础上进行框架的搭建。

其他相关介绍：

  • 下载

1、用于生产环境的 Bootstrap

2、Bootstrap 源码

第一个是常规开发，大部分人会选择这个下载，下载后把里边不需要的文件删除，免得影响开发时多余文件干扰。只保留如下即可：

bootstrap/
├── css/
│ 
│   ├── bootstrap.min.css
│   ├── 
│   └── bootstrap-theme.min.css//是自带的一些主题皮肤
├── js/
│   ├── 
│   └── bootstrap.min.js
└── fonts///和iconfont使用类似
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff
`
第二个是用于少数人想进行二次开发的，这个都是开源的嘛，你想帮忙随时欢迎的。

  • 版本选择上

    官网提供3个版本。

  1. Bootstrap2中文文档--用于兼容比较老的浏览器，或是公司里的老项目使用。
  2. Bootstrap3中文文档--稳定的最新版
  3. Bootstrap 4.0 预览--待测试的最新版，不建议使用

  • 文件引入方式
    本地引入肯定是最稳当的了，但是bs官网提供了CSDN加速服务，也就是你引用线上的速度依然很快，理解秒加载吧，这种加速会优先选择离你最近的节点（服务器）去拿资源。

    ps:CSDN加速服务;把文件放在各处的服务器上，访问时会优先加载离你最近的服务器。不够专业，自行Google。呵呵；所以网站要是想加速处理压缩代码图片还可以采用csdn加速的方式哟。

  • 官网其他资源

    这里还提供了其他的技术的API使用说明，相关文档等。

  1. Less 教程

  2. jQuery API

  3. 网站实例

  4. 收录的牛逼框架---基本都是托管在github上的开源项目；bs都提供免费的 CDN 服务(收录了 2722 个开源项目)

    拿去，不谢！
    http://www.bootcdn.cn/

  • bs相关资源

    在百度谷歌里搜索bootstrap关键字能出现千万条的资源，可见其成熟度，丰富度，其实就是公认的强大，你值得拥有。

    介绍摘要

    接下来从以下几个方面进行：

  • html----bs的基本结构

  • css----bs的样式部分

  • 布局组件----bs的js

  • 插件----bs的扩展功能

    也就是官网上对应的：
    起步、
    全局CSS样式、
    组件、
    JavaScript 插件

    HTML：最基本的bs骨架

    `
     <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">
     
     <title>麦壳title>
     
    
<link href="css/bootstrap.min.css" rel="stylesheet">

     
    head>
     <body>
     <h1>你好，世界！h1>
     
    <script src="js/jquery-3.1.1.js">script>
<script src="js/bootstrap.min.js">script>

     
    body>
     html>
     `

    这里对官网的做了略微的删改；要对上边解释两点：

    1.这句代码的意思是运行在IE浏览器上时优先用最高模式进行解析渲染，而不会出现跳转到怪异模式下运行而产生的视觉误差。

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

    2.这句代码的意思是约束视口的，bs是主打移动端的肯定要对视口进行处理下，当然PC端没有这个概念，你要是用在pc端，这句话毫无影响的。体现了Bootstrap 是移动设备优先的

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

    深入了解 Bootstrap html结构的关键部分，会让 web 开发变得如鱼得水

    CSS

    设置全局 CSS 样式； HTML 元素通过加对应的class 得到增强效果；配合栅格系统会有响应式的布局。你马上可以无敌了。

    先越过较难的bs的栅格系统，从简单常用实用的几处bs组件讲起。

1. 表格

  • 最基本的表格
  • 条纹表格--隔行变色
  • 带边框的表格
  • 鼠标悬停
    通过添加 .table-hover 类可以让
    • 中的每一行对鼠标悬停状态作出响应。

    通过给相应类名得到对应的默认样式（少量的内补（padding）和水平方向的分隔线），一般都不太难看，不符合你的设计，可以单独起个类名进行层叠掉。；这么多类名要想用好用的溜必须记点，知道大概，当然都还是有些规律的，一般有基础类，角色属性加上这两个外出基本样式就出来了，然后加对应的样式类，颜色显隐一些小细节加辅助类；查找官方文档就ok了，编译器里安装bs代码提示插件，这样就不要老去查阅了，浪费时间。

    表格有关的状态类

    .active 表示给表格添加一个灰色的背景颜色

    .success 成功 浅绿色背景

    .Info 信息 浅蓝色背景

    .warning 警告 浅黄色背景

    .danger 危险 浅红色背景

    2. 表单

    所有设置了 .form-control 类的 表单元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和表单元素包裹在 .form-group 中可以获得最好的排列。
    ps:表单元素：、