bootstrap
Web框架
http://how2j.cn/k/boostrap/boostrap-tutorial/538.html#nowhere
使用:
1.导入Js和css
a.导入bootstrap的开发环境
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-theme.css" /><script src="js/bootstrap.js"></script>
b.导入jq的引入
<script src="js/jquery.min.js"></script>
2.样式结构 嵌套使用 每行共12
<div class="container">
<div class="row">
<div class="col-md-6">ds</div> <div class="col-md-6">dsds</div> </div> </div> 3. col-xs- col-sm- col-md- col-lg- 区别
4.设置高度
<div class="col-md-6 " style="height: 100px;">b1</div>
5.移动offset列的位置
col-md-offset-1 移动一个位置
<div class="col-md-6 col-md-offset-1" >b3</div>
6.微调列位置
push推3格
<div class="col-md-6 col-md-push-3 " >b4</div>
拉回3格
<div class="col-md-6 col-md-pul-3 " >b4</div>
7.使用small作为副标签
<div class="col-md-6 col-md-push-3 " >
<h1> zx <small>zxxx</small> </h1> <h2>dsd</h2> </div>
8.设置行高和字体
<body style="line-height: 40px; font-size: 30px;">
9.段落 突出
<p class="lead"> xx</p>
10.mark 、del、ins
11.居中
<div class="col-md-12 text-center">dsdasdasdsadasds</div>
12. em 小号字small
<em>...</em>
<small>....</small>
13
.无序列表
<ol>
<ul>1</ul> <ul>2</ul> <ul>13</ul> <ul>14</ul> <ul>15</ul>
</ol>
有序列表:
<ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol>