bootstrap。是响应式的开发利器,他也是每个前端都会用到的
对于bootstrap,作为一个小白的我而言,他能很快的加快我的开发速度,因为其内部封装的col-样式很是不错,对于一个插件,最好的方式自然是去官网查看,自己去用他,所以我就不对说,直接写下我的个人感觉
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../lib/bootstrap.css" />
<script type="text/javascript" src="../lib/bootstrap.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
div div {
box-sizing: border-box;
text-align: center;
vertical-align: middle;
background: yellow;
/*小写*/
/*text-transform:lowercase;*/
/*开头大写*/
/*text-transform: capitalize;*/
/*大写*/
/*text-transform: uppercase;*/
text-align-last: justify;
}
</style>
</head>
<body>
<!--外层需要使用row来包起来,col为直系子类-->
<!-- ========== 等分,总共为12等分-->
<!-- = col-xs-:是在屏幕的大小小于768px的时候起用 = -->
<!-- = col-sm-:是在屏幕的大小大于768px但是小于992px的时候起用 = -->
<!-- = col-md-:是在屏幕的大小大于992px小于1200px的时候起用 = -->
<!-- = col-lg-:是在屏幕的大小大于1200px的时候起用 = -->
<!-- = 当然,注意px是需要设置缩放比的 = -->
<!-- ========== -->
<!--<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">这个是这个是这个是这个是这个是这个是.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="clearfix visible-xs-block"></div>
</div>-->
<!-- ==========等分,总共为12等分 -->
<!-- = 相同的,col-md-offset也是有不同的使用范围的 = -->
<!-- = col-xs-offset-:是在屏幕的大小小于768px的时候起用 = -->
<!-- = col-sm-offset-:是在屏幕的大小大于768px但是小于992px的时候起用 = -->
<!-- = col-md-offset-:是在屏幕的大小大于992px小于1200px的时候起用 = -->
<!-- = col-lg-offset-:是在屏幕的大小大于1200px的时候起用 = -->
<!-- = 当然,注意px是需要设置缩放比的 = -->
<!-- ========== -->
<!--<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>-->
<!-- ========== -->
<!-- = 所加不得超过12 = -->
<!-- ========== -->
<!--<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>-->
<!-- ========== -->
<!-- = col-md-push是设置左边开始x/12 = -->
<!-- = sm,md,lg什么的,我就不说了 = -->
<!-- = col-md-pull是设置右边开始的 = -->
<!-- ========== -->
<!--<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-8">.col-md-3 .col-md-pull-9</div>
</div>-->
<!-- ========== -->
<!-- = 输入框组 = -->
<!-- ========== -->
<!--<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>-->
<!--图片的最大为父容器的大小,就这么简单-->
<!--<img src="../img/back_top.png" class="img-responsive" />-->
<script>
</script>
</body>
</html>
我比较喜欢用它的响应式,js插件倒是。。。。。。