官网
Bootstrap框架学习大纲:
1.全局CSS样式
2.组件
3.Javascript插件
手机站宽度
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
网站容器:
.container
.container-fluid
栅格系统:
.row
.col-md-5|.col-xs-5|.col-sm-5|.col-lg-5
.col-md-offset-5
测试图片宽度
<link rel="stylesheet" href="bs/css/bootstrap.css">
<script src="bs/js/jquery.min.js"></script>
<script src="bs/js/bootstrap.js"></script>
<script src="bs/js/holder.min.js"></script>
<style>
*{
font-family: 微软雅黑;
}
</style>
</head>
<body>
<div class="container">
<h1 class="page-header">bootstrap框架学习:</h1>
<div class="row">
<div class="col-md-4">
<img src="holder.js/100%x300" alt="">
</div>
</div>
</div>
</body>
栅格系统
<body>
<div class="container">
<h1 class="page-header">bootstrap框架学习:</h1>
<div class="row">
<div class="col-md-4">
<img src="/img/cai.png" alt="" width="360px">
</div>
<div class="col-md-4">
<img src="/img/cai.png" alt="" width="360px">
</div>
<div class="col-md-4">
<img src="/img/cai.png" alt="" width="360px">
</div>
</div>
</div>
</body>
不发生堆叠
col-xs-4
宽度小于750发生堆叠
col-sm-4
*.col-md-offset-列偏移
.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度
**
**
**
**
**
**