框架Bootstrap

Bootstrap 是目前最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

1 下载配置Bootstrap环境
    官网 https://getbootstrap.com/
    中文译站 http://www.bootcss.com/
    
2 搭建环境CND

<!-- 兼容IE8以下的IE浏览器-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 适配移动设备-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- bootstrap 样式CDN-->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- bootstrap 基于的jQuery框架-->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- bootstrap js CDN-->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

重要技术：栅格系统

<div class="container-fluid">
  <div class="row">
      <div class="col-xs-6 col-sm-4 col-md-4">3列变2列布局</div>
      <div class="col-xs-6 col-sm-4 col-md-4">3列变2列布局</div>
      <div class="col-xs-6 col-sm-4 col-md-4">3列变2列布局</div>
  </div>
</div>

参数：
    container-fluid 自适应宽度（100%）
    container 固定宽度
    col-xs- 手机屏幕（<768px）
    col-sm- 平板（≥768px）
    col-md- 常规桌面（≥992px）
    col-lg- 大屏显示器（≥1200px）
col-xs-offset-2 列偏移
col-sm-offset-2
col-md-offset-2
列排序
col-md-push-5 将已分配的列，往后（push）推动
col-md-pull-5 pull往前推动
隐藏/显示
hidden-xs 将列在超小屏幕中隐藏

文本操作：对齐

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

改变大小写

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>