1，相关链接：
bootstrap中文网： http://v3.bootcss.com
CDN加速服务：
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]> <![endif]-->
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
2，自适应界面，不同屏幕大小的界面，界面布局不一样
HTML代码：在head中插入如下代码： <meta name="viewport" content="width=device-width,initial-scale=1">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <link href="style.css" type="text/css" rel="stylesheet"> </head> <body> <div class="heading"></div> <div class="container"> <div class="left"></div> <div class="main"></div> <div class="right"></div> </div> <div class="footing"></div> </body> </html>
css代码：使用@media screen and (min-600px) and (max-960px) 来调整布局
*{ margin:0; padding:0; } .heading, .container, .footing{ margin:10px auto; } .heading{ height:100px; background-color:chocolate; } .left, .right, .main{ background-color:#ffccff; } .footing{ height:100px; background-color:aquamarine; } @media screen and (min-960px){ .heading, .container, .footing{ width:960px; } .left, .main, .right{ float:left; height:500px; } .left, .right{ width:200px; } .main{ margin-left:5px; margin-right:5px; width:550px; } .container{ height:500px; } } @media screen and (min-600px) and (max-960px){ .heading, .container, .footing{ width:600px; } .left, .main{ float:left; height:400px; } .right{ display:none; } .left{ width:160px; } .main{ width:435px; margin-left:5px; } .container{ height:400px; } } @media screen and (max-600px){ .heading, .container, .footing{ width:400px; } .left, .right{ width:400px; height:100px } .main{ margin-top:10px; width:400px; height:200px; } .right{ margin-top:10px; } .container{ height:420px; } }
3, 选择文件
<div class="progress"> <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="60%"> 60% </div> </div>
4, 进度条
<div class="progress"> <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="60%"> 60% </div> </div>
5，