Bootstrap简单使用

bootstrap入门使用

bootstrap提供的响应式选择class名--12栅栏系统
col-xl 大于等于1200px时得到一个1140px的盒子
col-lg 大于等于992px时得到一个960px的盒子
col-md 大于等于768px时得到一个720px的盒子
col-sm 大于等于576px时得到一个540px的盒子
col-xs 小于576px时得到一个小盒子

使用bootstrap，需在项目中引入其js和css样式，cdn或者本地引入都可以，具体如下

bootstrap依赖于jquery，所以需要先引入jquery
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
css文件
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

基本使用方式

<div class="row">
<div class="col-lg-6"><div style="height:120px;background:deeppink;"></div></div>
<div class="col-lg-6"><div style="height:120px;background:deeppink;"></div></div>
</div>

width>992时，一行四列；width<992时，两行两列

<div class="row">
<div class="col-lg-3 col-xs-6">
<div class="top-d1">
<h3>日成交额</h3>
<p>
<span class="one-span">￥2299000</span>
<span class="two-span">万元</span>
</p>
</div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="top-d1">
<h3>日新增用户</h3>
<p>
<span class="one-span">2258</span>
<span class="two-span">人</span>
</p>
</div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="top-d1">
<h3>待处理订单</h3>
<p>
<span class="one-span">22</span>
<span class="two-span">件</span>
</p>
</div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="top-d1">
<h3>日成交额</h3>
<p>
<span class="one-span">￥2299000</span>
<span class="two-span">万元</span>
</p>
</div>
</div>
</div>

具体其他组件的用法无异，进入官网看应用即可bootstra官网