HTML_08_bootstrap-初次见面

bootstrap介绍

是twitter的设计书设计的，是不是基于html css js的前端框架吧

bootstarp的是一种设备为为优先为优先的pc pad phone

解决多浏览器的话 兼容问题

转到 v3.bootcss.com

下载-解压-加入JQ于js文件夹

必须是html5

< link rel="stylesheet" href="bootstarp/css/bostrap.min.css">

必须先引进jq才可以引进bs

<script src="bootstarp/js/jquery.min.js">

<scipt src=”bootstarp/js/bootstrap.min.js>”

用于手机的自适应

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

bootstrap 布局

<div calss="container"> 固定宽度1170px

——

</div>

<div calss="container-fluid"> 宽度10%

——

</div>

<h1></h1> 36px

<h2></h2>30px

<h3></h3>24px

<h4></h4>18px

<h5></h5>14px

<h6></h6>12px

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

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

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

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

<em></em> 推荐使用斜体

<del></del>删除线

文本对齐方式、

.text-left 左对齐

.text-right 右对齐对齐

.text-center 居中对齐

.text-uppercase大写

.text-lowercase 小写

.text-capitalize 首字母大写

列表

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

list-inline 把li里面的内容 变成横向列表

自定义表格

.dl-horizontal 设置成横向

表格、class=“table table-border ”

.table 表格的基本类

.table-border 表格边框

.table-hover 鼠标悬停效果

.table-striped 斑马线效果 各行换色

.table-condensed 紧凑单元

给加table div父元素 table-responsive

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

.active

.success

.info

.danger

.warning

响应式图片

<img src ="imgages/1.jpg" class="img-responsive img-circle">

img-responsive 自适应

img-circle 圆形

img-rounded 圆角矩形

img-thumbnail 给图片加圆角的边框

栅格系统

一定要放入到容器中

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

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

作用 把浏览器最多分配到十二列 是有行row和列col

来页面布局中

一行有若干个列

div[class*="col-"]

<div class="container">

<div class="row">

<div class="col-md-1">col-md-1</div>

<div class="col-md-1">col-md-2</div>

<div class="col-md-1">col-md-3</div>

…………………………………………………………

<div class="col-md-1">col-md-12</div>

<div class="col-md-1">col-md-13</div>

<div class="col-md-1">col-md-14</div>

</div>

</div>

每行12列 如果多出来的就直接第二行

col-md-n 即是几列的

小于768 手机端	col-xs-
大于768 小于992平板	col-sm-
大于992  小于1200	col-md-
大于1200	col-lg

12列

4 2 4

<div class="col-md-3 col-xs-6 col-sm-4">123</div>

<div class="col-md-3 col-xs-6 col-sm-4">456</div>

<div class="col-md-3 col-xs-6 col-sm-4">789</div>