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 即是几列的

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>