BootStrap(1)
1.入门案例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" charset="width=decive-width,initial-scale=1" />
<!--最后一个属性主要是做要给自适应，宽度=当前物理设备的宽度，缩放比例=1完全不缩放-->
<title></title>
<link rel="stylesheet" href="CSS/bootstrap.min.css"> <!--只要样式的时候，只引css就行了，不用引入js-->
<link href="CSS/bootstrap.min.css" rel="stylesheet" />
<style>
body {
padding-top: 50px;
}
.MyTitle {
padding: 40px 15px;
text-align: center;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!--导航条 导航条的风格 导航条的位置 role="navigation"就是说该角色进来就可以看到导航-->
<div class="container">
<!--container：容器，要承载具体的内容-->
<div class="navbar-header">
<!--navbar-header:导航头-->
<a href="#" class="navbar-brand">导航头链接</a> <!--navbar-barnd:一个样式-->
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav ">
<li class="active"><a href="#">首页</a></li> <!--active就是当前页面的样式-->
<li><a href="#">空间</a></li>
<li><a href="#">好友</a></li>
<li><a href="#">设置</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<!--class为容器，因为他要承载具体的内容-->
<div class="MyTitle">
<h1>Hello Bootstrap</h1>
<p>有时候不要死板的用它已经给好的样式，自己也要看具体情况而定。</p>
</div>
</div>
</body>
2.全局样式排版：
<div class="container"> <h3>1、全局CSS排版</h3> <h4>2、标题重置了margin</h4> <h4>3、副标题可以用<small>这是一个副标题</small></h4> <P>4、Bootstrap将全局字的大小设置为14px,</P> <p class="lead">5、设置class=“lead”能让文字突出显示</p> <p>6、mark让文字有一个<mark>背景效果</mark></p> <del>7、这是一个del,还有很多请参考：</del>http://v3.bootcss.com/css/ <p class="text-left">8、文字靠左</p> <p class="text-center">9、文字居中</p> <p class="text-right">10、文字靠右</p> <p class="text-lowercase">11、text-LOWercase全小写</p> <p class="text-uppercase">12、text-uppercase全大写</p> <p class="text-capitalize">13、text-capitalize首字母大写</p> <ul class="list-unstyled"> <li>14、这是一个</li> <li>没有样式</li> <li>的列表</li> </ul> </div>
3.栅格系统、代码、表格
<title></title>
<link href="CSS/bootstrap.min.css" rel="stylesheet" />
<style>
.row {
margin-bottom: 20px;
}
.row .row {
margin-top: 10px;
margin-bottom: 0;
}
[class*="col-"] { /*通配选择符*/
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
background-color: rgba(86,61,124,.15); /*最后这个.15代表的是透明度*/
border: 1px solid #ddd;
border: 1px solid rgba(86,61,124,.2);
}
</style>
</head>
<body>
<div class="container">
<h1>栅格、代码、表格</h1>
<p>Grid system栅格系统依赖容器而存在，所以使用时候一定要有class="container"或者class="container-fluid"</p>
<p>
系统最多分配十二列。类似表格，但是收索引擎对表格的友好程度没有Div好。
屏幕小于768px（手机） .col-xs-
屏幕大于等于768px(平板) .col-sm-
屏幕大于992px（显示屏） .col-md-
屏幕大于1200px(大显示屏) .col-lg-
.col-md-4这句话就是当前这个栅格占的宽度4（一个屏幕最多能承载12个单元格）
在指定的设备上只需更改中间的那个就行。xs sm md lg
</p>
<div class="col-md-4">
这个单元格宽好像是按的百分比，它的高好像是自适应。
</div>
<div class="col-md-4">
这个单元格好像是按的百分比
</div>
<div class="col-md-4">
这个单元格好像是按的百分比
</div>
<div class="row">
<h3>偏移</h3>
<div class="col-md-4 col-md-offset-1">占四个单元格，右移动一个单元格</div>
</div>
<!--华丽的分割线---------------------------=========--------------->
<div class="row">
<h3>嵌套</h3>
<div class="col-md-4 col-md-offset-1">
占四个单元格，右移动一个单元格
<div class="col-md-12">就相当于父级分为12个栅格，这个是把父类的栅格都占满了。</div>
</div>
</div>
<!--华丽的分割线---------------------------=========--------------->
<div class="row">
<h3>栅格互换位置</h3>
<div class="col-md-10 col-md-push-2">这是第一个</div>
<div class="col-md-2 col-md-pull-10">这是第二个</div>
我试了不同的数字，感觉就像是一个往左移，另一个往右移动。
</div>
<div class="row">
<h3>代码</h3>
<code><section></code>
现在能键入<kbd>cmd</kbd>命令
代码段：<pre>console.writeline("hello world");
</pre><var>x</var>=<var>y</var>+<var>z</var>
输出<samp>hello</samp>
<p>虽然没有什么特殊效果，但是我们一般都这么表示</p>
</div>
<!--华丽的分割线---------------------------=========--------------->
<div class="row">
<h3>表格</h3>
<table class="table table-striped table-bordered table-hover"> <!--第二个striped就是斑马线样式,第三个是加边框,第四个是鼠标经过的效果-->
<thead><tr class="active"><th>表格标题</th><th>表格标题</th><th>表格标题</th></tr></thead>
<tbody>
<tr class="success"><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr class="info"><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr class="warning"><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</tbody>
<tfoot><tr class="danger"><td colspan="3">如果class再加上 table-condensed就是紧凑型表格;<td></tr></tfoot>
</table>
table的外面加一个class="table-responsive"就是响应式，就是当屏幕太小的时候，会有滚动条
</div>
<!--华丽的分割线---------------------------=========--------------->
</div>
</body>
浙公网安备 33010602011771号