步骤一：引入Bootstrap样式和Jquery
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--ie-->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 视口模式 -->
<title>聊客学院</title>
<!-- 引入Bootstrap核心样式文件（必须） -->
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
<!-- 引入Bootstrap默认主题样式（可选） -->
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap-theme.css">
<!-- 你自己的样式或其他文件 -->
<link rel="stylesheet" href="css/index.css">
<!--站点图标-->
<link rel="shortcut icon" href="imgs/lk_favicon.ico" type="image/x-icon">
</head>
步骤二：将页面进行划分
2.1 头部
<!--头部-->
<header id="lk_header">
<!--上部分-->
<div class="top-bar hiddden-sm hidden-xs text-center text-muted">
<div class="container">
<div class="row">
<div class="top-bar-1 col-md-2">
<a href="#" class="text-muted">
<i class="icon-phone"></i>
<span>关注微信号</span>
<span class="caret"></span>
<img src="imgs/ewm_xzh.jpg" alt="" width="130">
</a>
</div>
<div class="top-bar-2 col-md-5">
<i class="icon-tel"></i>
<span>8888-0000-6666(xxxxxxxxx)</span>
</div>
<div class="top-bar-3 col-md-2">
<a href="" class="text-muted">校企合作</a>
<a href="" class="text-muted">培训师</a>
</div>
<div class="top-bar-4 col-md-3">
<a class="btn btn-default btn-sm btn-primary" href="#" role="button">免费注册</a>
<a class="btn text-muted" href="#" role="button">立即登录</a>
</div>
</div>
</div>
</div>
</header>
<!--/头部-->
2.1.1 头部总览
image.png
2.1.2 头部分解解析
使用.container 类用于固定宽度并支持响应式布局的容器。
image.png
将一行以2、 5 、2、 3进行分割，代码如下：
<div class="container">
<div class="row">
<div class="top-bar-1 col-md-2">
</div>
<div class="top-bar-2 col-md-5">
</div>
<div class="top-bar-3 col-md-2">
</div>
<div class="top-bar-4 col-md-3">
</div>
</div>
</div>
对top-bar 进行通用设置：hiddden-sm hidden-xs 为响应式中通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。
image.png
text-center:
image.png
text-muted:
image.png
<div class="top-bar hiddden-sm hidden-xs text-center text-muted">
</div>
2.1.3 头部分解解析2
要点：字体图标
1、自定义字体
@font-face {
font-family: lk;
src: url('../fonts/lk.eot') format('embedded-opentype'),
url('../fonts/lk.svg') format('svg'),
url('../fonts/lk.ttf') format('truetype'),
url('../fonts/lk.woff') format('woff');
}
2、哪些类使用该字体
[class^="icon-"],
[class*=" icon-"]{
font-family: lk;
font-style: normal;
}
.icon-phone::before{
content: '\e958';
font-size: 13px;
}
.icon-tel::before{
content: '\e942';
font-size: 13px;
}
<div class="top-bar-1 col-md-2">
<a href="#" class="text-muted">
<i class="icon-phone"></i>
<span>关注微信号</span>
<span class="caret"></span>
<img src="imgs/ewm_xzh.jpg" alt="" width="130">
</a>
</div>
image.png
2.1.4其他
可以通过http://blog.koalite.com/bbg/
自定义按钮的样式
<div class="top-bar-2 col-md-5">
<i class="icon-tel"></i>
<span>8888-0000-6666(xxxxxxxxx)</span>
</div>
<div class="top-bar-3 col-md-2">
<a href="" class="text-muted">校企合作</a>
<a href="" class="text-muted">培训师</a>
</div>
<div class="top-bar-4 col-md-3">
<a class="btn btn-default btn-sm btn-primary" href="#" role="button">免费注册</a>
<a class="btn text-muted" href="#" role="button">立即登录</a>
</div>
网友评论