Macrolam3
Macrolam3

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浏览器上时优先用最高模式进行解析渲染，而不会出现跳转到怪异模式下运行而产生的视觉误差。

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

2.这句代码的意思是约束视口的，bs是主打移动端的肯定要对视口进行处理下，当然PC端没有这个概念，你要是用在pc端，这句话毫无影响的。体现了Bootstrap 是移动设备;深入了解 Bootstrap html结构的关键部分，会让 web 开发变得如鱼得水

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

CSS

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

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

1. 表格

  • 最基本的表格
class="table">
     
   
  • 条纹表格–隔行变
    •  
  
表格有关的状态类
.active 表示给表格添加一个灰色的背景颜色
.success 成功 浅绿色背景
.Info 信息 浅蓝色背景
.warning 警告 浅黄色背景
.danger 危险 浅红色背景
2. 表单
所有设置了 .form-control 类的 表单元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和表单元素包裹在 .form-group 中可以获得最好的排列。 
 ps:表单元素：、