├─ /weijinsuo/ ··················· 项目所在目录
└─┬─ /css/ ······················· 我们自己的CSS文件
├─ /font/ ······················ 使用到的字体文件
├─ /img/ ······················· 使用到的图片文件
├─ /js/ ························ 自己写的JS脚步
├─ /lib/ ······················· 从第三方下载回来的库【只用不改】
├─ /favicon.ico ················ 站点图标
└─ /index.html ················· 入口文件
- 在head中引入必要的CSS文件，优先引用第三方的CSS，方便我们自己的样式覆盖
- 在body末尾引入必要的JS文件，优先引用第三方的JS，注意JS文件之间的依赖关系，比如bootstrap.js依赖jQuery，那就应该先引用jquery.js 然后引用bootstrap.js
- 除了公共级别样式，其余样式全部由 模块前缀
- 尽量使用 直接子代选择器， 少用间接子代 避免错杀
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
</body>
</html><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">html中插入视口设置，可以通过emmet meta:vp 插入
<meta http-equiv="X-UA-Compatible" content="IE=edge">html中插入兼容模式设置，可以通过emmet meta:compat 插入
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">html中插入图标链接，可以通过emmet link:favicon 插入
<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>body{
font-family: "Helvetica Neue",
Helvetica,
Microsoft Yahei,
Hiragino Sans GB,
WenQuanYi Micro Hei,
sans-serif;
}先划分好页面中的大容器，然后在具体看每一个容器中单独的情况
<body>
<!-- 头部区域 -->
<header></header>
<!-- /头部区域 -->
<!-- 广告轮播 -->
<section></section>
<!-- /广告轮播 -->
<!-- 特色介绍 -->
<section></section>
<!-- /特色介绍 -->
<!-- 立即预约 -->
<section></section>
<!-- /立即预约 -->
<!-- 产品推荐 -->
<section></section>
<!-- /产品推荐 -->
<!-- 新闻列表 -->
<section></section>
<!-- /新闻列表 -->
<!-- 合作伙伴 -->
<section></section>
<!-- /合作伙伴 -->
<!-- 脚注区域 -->
<footer></footer>
<!-- /脚注区域 -->
</body><header>
<div class="topbar"></div>
</header>- 用于定义一个固定宽度且居中的版心
<div class="topbar">
<div class="container">
<!--
此处的代码会显示在一个固定宽度且居中的容器中
该容器的宽度会跟随屏幕的变化而变化
-->
</div>
</div>- Bootstrap中定义了一套响应式的网格系统，
- 其使用方式就是将一个容器划分成12列，
- 然后通过col-xx-xx的类名控制每一列的占比
- 因为每一个列默认有一个15px的左右外边距
- row类的一个作用就是通过左右-15px屏蔽掉这个边距
<div class="container">
<div class="row"></div>
</div>- 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>
<div class="col-md-2 text-center"></div>
<div class="col-md-3 text-center"></div>
</div>此处顶部通栏已经被划分成四列 text-center的作用就是让内部内容居中显示
@font-face {
font-family: 'itcast';
src: url('../font/MiFie-Web-Font.eot') format('embedded-opentype'), url('../font/MiFie-Web-Font.svg') format('svg'), url('../font/MiFie-Web-Font.ttf') format('truetype'), url('../font/MiFie-Web-Font.woff') format('woff');
}
[class^="icon-"],
[class*=" icon-"] {
/*注意上面选择器中间的空格*/
/*我们使用的名为itcast的字体就是上面的@font-face的方式声明的*/
font-family: itcast;
font-style: normal;
}
.icon-mobilephone::before{
content: '\e908';
}<div class="col-md-2 text-center">
<a class="mobile-link" href="#">
<i class="icon-mobile"></i>
<span>手机微金所</span>
<!-- 这里使用的是bootstrap中的字体图标 -->
<i class="glyphicon glyphicon-chevron-down"></i>
<img src="..." alt="">
</a>
</div>- eot : embedded-opentype
- svg : svg
- ttf : truetype
- woff : woff
.mobile-link:hover > img {
display: block;
}- http://blog.koalite.com/bbg/
- 可以通过界面生成一个新的按钮样式
.btn-itcast {
color: #ffffff;
background-color: #E92322;
border-color: #DB3B43;
}
.btn-itcast:hover,
.btn-itcast:focus,
.btn-itcast:active,
.btn-itcast.active,
.open .dropdown-toggle.btn-itcast {
color: #ffffff;
background-color: #E92322;
border-color: #DB3B43;
}
.btn-itcast:active,
.btn-itcast.active,
.open .dropdown-toggle.btn-itcast {
background-image: none;
}
.btn-itcast.disabled,
.btn-itcast[disabled],
fieldset[disabled] .btn-itcast,
.btn-itcast.disabled:hover,
.btn-itcast[disabled]:hover,
fieldset[disabled] .btn-itcast:hover,
.btn-itcast.disabled:focus,
.btn-itcast[disabled]:focus,
fieldset[disabled] .btn-itcast:focus,
.btn-itcast.disabled:active,
.btn-itcast[disabled]:active,
fieldset[disabled] .btn-itcast:active,
.btn-itcast.disabled.active,
.btn-itcast[disabled].active,
fieldset[disabled] .btn-itcast.active {
background-color: #E92322;
border-color: #DB3B43;
}
.btn-itcast .badge {
color: #E92322;
background-color: #ffffff;
}<div class="topbar hidden-xs hidden-sm"></div>或者
<div class="topbar visible-md visible-lg"></div>- hidden-xx : 在某种屏幕下隐藏
- visible-xx : 在某种屏幕尺寸下显示
- visible-xx-xx：最后一个xx是决定显示时的display到底是啥
- 在使用了boostrap过后，大多数界面元素都是通过bootstrap提供好的界面组件修改得来
<nav class="navbar navbar-itcast navbar-static-top">
<div class="container">
<div class="navbar-header">
<button id="btn" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav_list" aria-expanded="false">
<span class="sr-only">切换菜单</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<i class="icon-icon"></i>
<i class="icon-logo"></i>
</a>
</div>
<div id="nav_list" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">我要投资</a></li>
<li><a href="#">我要借款</a></li>
<li><a href="#">平台介绍</a></li>
<li><a href="#">新手专区</a></li>
<li><a href="#">最新动态</a></li>
<li><a href="#">微论坛</a></li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-sm">
<li><a href="#">个人中心</a></li>
</ul>
</div>
</div>
</nav>- 通过bootstrap文档对导航条样式的设置发现，其实本身是有一个类似于主题的概念
- navbar-default：默认的外观
- navbar-inverse：暗色背景的样式
- 所以我们希望可以通过自定义一套完整的风格：
- navbar-itcast
.navbar-itcast{
...
}
...具体代码参考navbar-default实现即可- 任然使用字体图标
- 默认样式中菜单的行高为20px，我们可以调整为自己想要的高度
- 一般都是通过自己的样式去覆盖
- 在一个较小屏幕下展示一个超宽的图片，想让图片居中显示
- 背景图
- p-a l 50% m-l -width/2
- length
- 如100px 100px
- percentage
- 如90% 90%
- cover
- 背景图片的较小边放大到目标大小结束
- contain
- 相反
- 目的
- 各种终端都需要正常显示图片
- 移动端应该使用更小（体积）的图片
- 实现方式
- hidden-xx