bootstrap开发 --- 1

http://v3.bootcss.com/

一、搭建环境

引入bootstrap环境的方法一

1文档要求必须是 html5

引入bootstrap环境的方法二  在线引入

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" 

integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"

 crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" 

 href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 

integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" 

crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" 

integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 

crossorigin="anonymous"></script>

<!--屏幕的宽度和设备的宽度一致，初始缩放1:1，禁止用户缩放-->

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

bootstrap布局容器

<div class=”container”>  固定宽度  1170px

  内容

</div>

 

<div class=”container-fluid”>  宽度为 100%

  内容

</div>

排版的标签

<h1>内容</h1> 36px

<h2></h2>  30px

<h3></h3> 24px

.page-header 设置页头  ，给标题加一个分割线

<small></small> 副标题 小一号

<big></big>副标题  大一号

<strong></strong> 推荐使用的加粗

<em></em>推荐使用的

<del></del>删除线

文本对齐方式

.text-left 左对齐

.text-center居中对齐

.text-right 右对齐

英文大写写

.text-uppercase 大写

.text-lowercase 小写

. text-capitalize 首字母大写

列表

.list-unstyled 去掉列表前面的符号，和去掉原有的格式

.list-inline 把<li></li>之间的内容 ，变成横向排列

表格

.table 表格的一个基类 ，如果加其他的样式，都在.tabel的基础上

 table-striped 斑马线效果，隔行换色

table-condensed  pading 减少

<table class="table table-bordered table-hover table-striped table-condensed">
<tr class="active">
<td>编号</td>
<td>品牌</td>
<td>状态</td>
</tr>

 table-responsive 给table的父元素加

比如table外面加一个div

以移动设备为优先，如果内容不能完全的显示，会出现滚动条

<div  style="background:#ffffff">
<img src="bootstrap/images/1.jpg" class="img-responsive">

</div>

栅格系统

栅格系统一定要放入容器中

<div class=”container”></div>

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

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

栅格系统用于通过一系列的行（ row ）与列（ col ）的组合来创建 页面布局

例如：

<div  class="container">
<div class="row">
<div class="col-md-2">col1</div>
<div class="col-md-2">col2</div>

col-md-2 一行有6列，-3 就是一行有4列

响应式就是浏览器拉动变小的时候会自适应

<div class="col-md-2 col-xs-6 col-sm-3" >col1</div>