【练习】响应式工具bootstrap

最新推荐文章于 2023-12-16 14:44:30 发布

原创最新推荐文章于 2023-12-16 14:44:30 发布 · 413 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

前端学习专栏收录该内容

41 篇文章

订阅专栏

本文介绍了一个基于Bootstrap框架的响应式网页设计案例，包括顶部通栏和导航栏的实现方式，通过调整CSS样式来适应不同屏幕尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.微金所顶部通栏（响应式工具bootstrap）

现在api中复制基本模版

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>顶部通栏</title>

<link href="lib/css/bootstrap.min.css" rel="stylesheet"> 引入的bootstrap要根据自己电脑中的路径

</head>

<body>

//以下是自己写的

//全局css样式——栅格系统

<div class="header hidden-xs hidden-sm hidden-md"> hidden-xs隐藏极小屏幕，hidden-sm隐藏小屏幕，

hidden-md隐藏中屏幕（响应式工具中）

<div class="container-fluid">   row必须包含在.container（固定宽度）或.container-fluid（100% 宽度）中
<div class="row">
<div class="col-lg-2"> 一行一共有12份，col-lg-2指大屏幕中占两份，若屏幕宽度小于1200，会自动占一行

<a href="#" >
<span class="glyphicon glyphicon-phone"></span>   glyphicon glyphicon-phone是bootstrap中的文字图标
手机微金所
<span class="glyphicon glyphicon-menu-down"></span>
<img src="images/code.jpg" alt="">
</a>
</div>
<div class="col-lg-5">
<a href="#">
<span class="glyphicon glyphicon-phone-alt"></span>
4006-89-4006（服务时间：9:00-21:00)
</a>
</div>
<div class="col-lg-2">
<a href="#">常见问题</a>
<a href="#">财富登陆</a>
</div>
<div class="col-lg-3">
<input type="button" class="btn btn-danger btn-xs" value="免费注册">
<a href="#">登陆</a>
</div>
</div>
</div>
</div>

<script src="lib/js/jquery.min.js"></script> 使用bootstrap必须引入jquery

<script src="lib/js/bootstrap.min.js"></script> 引入bootstrap.js
</body>

</html>

index.css

.header .row>div{
line-height: 40px; 给.header或者.header .row>div高度都不能让盒子高度变成40，只能line-height
border: 1px solid grey;
text-align: center;
}
.header .row>div a{
/*text-align: center; a居中没有用，得让div内的文字居中*/
font-size: 12px;
color: grey;
}
.header .row>div:nth-child(n+3) a{
margin-left: 10px; /*这里margin和padding都可以，因为是占比例的*/
}
/*.header .row>div:nth-child(1) img{ 把img直接放在div底下似乎不能隐藏，必须放在a底下才行
display: hidden;
}
.header .row>div:nth-child(1) :hover img{
display: block;
}*/
.header .row>div:first-child a{
position: relative;
}
.header .row>div:first-child a img{
display: none;
position: absolute;
top: 25px;
left: -18px;
}
.header .row>div:first-child a:hover img{
display: block;

}

2.导航栏

<nav class="navbar fox-default">
<div class="container-fluid">

<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 需要把按钮的位置改一下margin-top=25px;
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<span class="wjsfont wjsfont-logo"></span> 加了两个文字图标
<span class="wjsfont wjsfont-name"></span>
</a>
</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">我要咨询<span class="sr-only">(current)</span></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> 增加四个li，并删除了一些不用的input 和下拉列表
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">个人中心</a></li>
</ul>
</div>
</div>
</nav>

base.css

/*组建-Glyphicons 字体图标: 在bootstrap.css中找到glyphicons 复制*/

/*创建自己的字体图标 font-family名字改掉照着fonts中的文件名改路径 */

@font-face {
font-family: 'wjsfont';
src: url('../fonts/MiFie-Web-Font.eot');
src: url('../fonts/MiFie-Web-Font.eot?#iefix') format('embedded-opentype'),
url('../fonts/MiFie-Web-Font.woff') format('woff'),
url('../fonts/MiFie-Web-Font.ttf') format('truetype'),
url('../fonts/MiFie-Web-Font.svg#glyphicons_halflingsregular') format('svg');
}
.wjsfont {
position: relative;
top: 1px;
display: inline-block;
font-family: 'wjsfont';
font-style: normal;
font-weight: normal;
line-height: 1;

}

.wjsfont-logo::before{
content: '\e920';
}
.wjsfont-name::before{
content: '\e921';

}

index.css

/*导航栏的样式需要改变，在bootstrap中找到导航条最外面的类名fox-default,复制到此进行修改，有些没有修改的地方就没有复制过来*/
.fox-default { 先把所有类名改掉
background-color: #f8f8f8;
border-color: #e7e7e7;
height: 80px; 直接把父盒子高度增加就可以了
}
.navbar-brand span{
font-size: 50px; 字体图标放大
}
.wjsfont-logo{
color: red;
}
.wjsfont-name{
color: black;
}
.fox-default .navbar-nav > li > a {
color: #777;
line-height: 50px; 行高不是盒子的高度，因为有设置padding:15px，所以用80-15-15=50
}
.fox-default .navbar-nav > li > a:hover,
.fox-default .navbar-nav > li > a:focus {
color: #333;
background-color: transparent;
border-bottom: 3px solid red; 加一个下边框
}
.fox-default .navbar-nav > .active > a,
.fox-default .navbar-nav > .active > a:hover,
.fox-default .navbar-nav > .active > a:focus {
color: #555;
/*background-color: #e7e7e7;*/ active的颜色去掉，其实可以直接把active类名去掉
}
.fox-default .navbar-toggle {
border-color: #ddd;
margin-top: 25px; 将button向下移动25，在中间的位置

}