Bootstrap 是目前最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。
1 下载配置Bootstrap环境
官网 https://getbootstrap.com/
中文译站 http://www.bootcss.com/
2 搭建环境CND
<!-- 兼容IE8以下的IE浏览器-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 适配移动设备-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- bootstrap 样式CDN-->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- bootstrap 基于的jQuery框架-->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- bootstrap js CDN-->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
重要技术:栅格系统
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-4">3列变2列布局</div>
<div class="col-xs-6 col-sm-4 col-md-4">3列变2列布局</div>
<div class="col-xs-6 col-sm-4 col-md-4">3列变2列布局</div>
</div>
</div>
参数:
container-fluid 自适应宽度(100%)
container 固定宽度
col-xs- 手机屏幕(<768px)
col-sm- 平板(≥768px)
col-md- 常规桌面(≥992px)
col-lg- 大屏显示器(≥1200px)
col-xs-offset-2 列偏移
col-sm-offset-2
col-md-offset-2
列排序
col-md-push-5 将已分配的列,往后(push)推动
col-md-pull-5 pull往前推动
隐藏/显示
hidden-xs 将列在超小屏幕中隐藏
文本操作:对齐
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
改变大小写
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>