Bootstrap项目实战
1. 搭建Bootstrap页面骨架及项目目录结构
├─ /xxxxxxx/ ··················· 项目所在目录
└─┬─ /css/ ······················· 我们自己的CSS文件
├─ /font/ ······················ 使用到的字体文件
├─ /img/ ······················· 使用到的图片文件
├─ /js/ ························ 自己写的JS脚步
├─ /lib/ ······················· 从第三方下载回来的库【只用不改】
├─ /favicon.ico ················ 站点图标
└─ /index.html ················· 入口文件
1.1.约定编码规范
1.1.1.HTML约定
- 在head中引入必要的CSS文件,优先引用第三方的CSS,方便我们自己的样式覆盖
- 在body末尾引入必要的JS文件,优先引用第三方的JS,注意JS文件之间的依赖关系,比如bootstrap.js依赖jQuery,那就应该先引用jquery.js 然后引用bootstrap.js
1.1.2.CSS约定
- 除了公共级别样式,其余样式全部由 模块前缀
- 尽量使用 直接子代选择器, 少用间接子代 避免错杀
1.2.HTML5文档结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
</body>
</html>
1.3.Viewport设置
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
html中插入视口设置,可以通过emmet meta:vp 插入
1.4.浏览器兼容模式
<meta http-equiv="X-UA-Compatible" content="IE=edge">
html中插入兼容模式设置,可以通过emmet meta:compat 插入
1.5.favicon(站点图标)
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
html中插入图标链接,可以通过emmet link:favicon 插入
1.6.引入相应的第三方文件
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="my.css">
...
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="my.js"></script>
1.7.在我们默认的样式表中将默认字体设置为:
body{
font-family: "Helvetica Neue",
Helvetica,
Microsoft Yahei,
Hiragino Sans GB,
WenQuanYi Micro Hei,
sans-serif;
}
2.完成页面空结构
先划分好页面中的大容器,然后在具体看每一个容器中单独的情况
<body>
<!-- 头部区域 -->
<header></header>
<!-- /头部区域 -->
<!-- 广告轮播 -->
<section></section>
<!-- /广告轮播 -->
<!-- 特色介绍 -->
<section></section>
<!-- /特色介绍 -->
<!-- 立即预约 -->
<section></section>
<!-- /立即预约 -->
<!-- 产品推荐 -->
<section></section>
<!-- /产品推荐 -->
<!-- 新闻列表 -->
<section></section>
<!-- /新闻列表 -->
<!-- 合作伙伴 -->
<section></section>
<!-- /合作伙伴 -->
<!-- 脚注区域 -->
<footer></footer>
<!-- /脚注区域 -->
</body>
3.构建顶部通栏
<header>
<div class="topbar"></div>
</header>
3.1.container类
- 用于定义一个固定宽度且居中的版心
<div class="topbar">
<div class="container">
<!--
此处的代码会显示在一个固定宽度且居中的容器中
该容器的宽度会跟随屏幕的变化而变化
-->
</div>
</div>
3.2.栅格系统
- Bootstrap中定义了一套响应式的网格系统,
- 其使用方式就是将一个容器划分成12列,
- 然后通过col-xx-xx的类名控制每一列的占比
3.2.1.row类
- 因为每一个列默认有一个15px的左右外边距
- row类的一个作用就是通过左右-15px屏蔽掉这个边距
<div class="container">
<div class="row"></div>
</div>
3.2.2.col-**-*类
- col-xs-[列数]:在超小屏幕下展示几份
- col-sm-[列数]:在小屏幕下展示几份
- col-md-[列数]:在中等屏幕下展示几份
- col-lg-[列数]:在大屏幕下展示几份
- xs : 超小屏幕 手机 (<768px)
- sm : 小屏幕 平板 (≥768px)
- md : 中等屏幕 桌面显示器 (≥992px)
- lg : 大屏幕 大桌面显示器 (≥1200px)
<div class="row">
<div class="col-md-2 text-center"></div>
<div class="col-md-5 text-center"></div>
&