1.首先新建一个html页面,并且引入jquery和bootstrap相关文件:
<script src="../lib/jquery-3.2.1.js"></script>
<link href="../lib/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
<script src="../lib/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
2.设置一些简单的css样式:
<style>
.container .row div{
background: #2aabd2;
border:1px solid #b9def0;
text-align: center;
}
</style>
3.
(1)以下分别是让hello world居中,因为默认是划分为12份,自身占有6份并向右移动三份,所以居中了。
(2)嵌套了,第二个六份里又嵌套两行,每行又各占六份。
(3)第三个相对于之前的交换了一下位置,push可以理解为向右推,pull可以理解为向左拉。
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1> Hello World</h1>
</div>
</div>
<div class="row">
<div class="col-md-3" >HTML</div>
<div class="col-md-3" >CSS</div>
<div class="col-md-3" >JS</div>
<div class="col-md-3" >BOOTSTRAP</div>
</div>
<div class="row">
<div class="col-md-3" >Spring</div>
<div class="col-md-3" >SpringMvc</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6" >SpringBoot</div>
<div class="col-md-6" >SpringCloud</div>
</div>
<div class="row">
<div class="col-md-6" >MyBatis</div>
<div class="col-md-6" >Vue.js</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-md-push-6" >HTML</div>
<div class="col-md-3 col-md-push-6" >CSS</div>
<div class="col-md-3 col-md-pull-6" >JS</div>
<div class="col-md-3 col-md-pull-6" >BOOTSTRAP</div>
</div>
</div>
</body>