BootStrap

BootStrap

一、BootStrap概述

BootStrap（Web前端CSS框架）设计出响应式页面,可以在手机、PAD、PC直接访问

二、BootStrap使用

1.下载

BootStrap3z中文文档，根据自己需求下载BootStrap

2.引入文件

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
		
<!--Jquery文件，务必在bootstrap.min.js之前引入-->
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 ，依赖于Jquery-->
<script src="js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

3.添加一个meta标签

<!--更加友好的支持移动设备的屏幕缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

四、布局容器

1…container 类用于固定宽度并支持响应式布局的容器

<div class="container"></div>

2…container-fluid 类用于 100% 宽度，占据全部视口的容器

<div class="container-fluid"></div>

五、栅格系统

全局CSS样式中

随着屏幕或视口尺寸的增加，系统会自动分为最多12列

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

六、表格

全局CSS样式中

创建表格的布局

七、表单

全局CSS样式中

创建表单的布局

八、导航栏

组件中

九、轮播

JavaScript 插件中

一种灵活的响应式的向站点添加滑块的方式（可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容）