概述:
部分代码:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<a href="#" class="navbar-brand"><strong>BootStrap</strong>.com</a>
<ul class="nav navbar-nav">
<li class="active"><a href="">组件</a></li>
<li><a href="">CSS</a></li>
<li><a href="">JavaScript</a></li>
</ul>
<form action="" class="navbar-form navbar-left">
<input type="text" placeholder="搜索" class="form-control">
<button type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</form>
</div>
</nav>
<input type="text" placeholder="搜索" class="form-control">
<button type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</form>
总结:
1、搜索栏对于导航栏来说就是表单。
2、class="navbar-form" 表示它导航栏表单、navbar-left :表示表单左浮动
3、input 标签中 placeholder="搜索" 表示初始值为搜索 class="form-control" 表示自己定义一些样式
4、span 标签 glyphicon glyphicon-search 表示用bootstrap搜索图标,也就是小的放大镜
样式:
body{
padding-top:70px;
}
/* 对输入框进行设置背景色、去边框,字体颜色 */
.navbar-inverse input[type="text"] {
background: #313131;
border:none;
color:#999;
}
/*设置 表单以 导航栏作为参照物*/
.navbar-inverse .navbar-form {
position: relative;
}
/*设置 按钮位置在 表单内的绝对位置*/
.navbar-inverse button[type="submit"] {
position: absolute;
top:15%;
right:20px;
background: none;
border: none;
}
/*设置图标的颜色*/
.navbar-inverse .glyphicon {
color : #999;
}
总结:对于相同Input标签通过 input[type="具体类型"]区分
导航栏的按钮
代码:
<a href="" class="btn btn-primary btn-sm navbar-btn navbar-right">联系我们</a>
<div class="profile navbar-right">
<ul class="nav navbar-nav">
<li><a href="">登录</a></li>
<li><a href="">注册</a></li>
</ul>
<p class="navbar-text" >欢迎您-<a href="#" class="navbar-link">小猫咪</a></p>
</div>
总结:
1、一般样式会选择a标签、或span进行修饰成其他漂亮的组件
2、a标签的 class="btn btn-primary btn-sm navbar-btn navbar-right" 依次表示:按钮、按钮原型、按钮大小为小,为导航按钮,在导航的右边
3、navbar-nav 表示导航栏选项(一般采用无序列表)
4、navbar-text 表示在导航栏的文本, navbar-link 表示导航的链接
导航栏在小尺寸进行折叠显示:
效果:
代码:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#responsive-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand"><strong>BootStrap</strong>.com</a>
</div>
<div class="collapse navbar-collapse" id="responsive-navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="">组件</a></li>
<li><a href="">CSS</a></li>
<li><a href="">JavaScript</a></li>
</ul>
<form action="" class="navbar-form navbar-left">
<input type="text" placeholder="搜索" class="form-control">
<button type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</form>
<a href="" class="btn btn-primary btn-sm navbar-btn navbar-right">联系我们</a>
<div class="profile navbar-right">
<ul class="nav navbar-nav">
<li><a href="">登录</a></li>
<li><a href="">注册</a></li>
</ul>
<p class="navbar-text">
欢迎您-<a href="#" class="navbar-link">小猫咪</a>
</p>
</div>
</div>
</div>
</nav>
总结:
1、第一要折叠什么? <div class="collapse navbar-collapse" id="responsive-navbar"> 包含要折叠的部分,collapse navbar-collapse 表示导航栏的折叠
2、 class="navbar-toggle" 表示导航栏切换, data-toggle="collapse" 表示触发切换动作,data-target="#目标div"折叠内容
3、<span class="icon-bar"> 产生一条横线。
在小尺寸隐藏,并设置媒体查询设置按钮的位置
在对应位置增加样式
<a href="" class="btn btn-primary btn-sm navbar-btn navbar-right hidden-xs">联系我们</a>
修改搜索图标位置:
/*设置 按钮位置在 表单内的绝对位置*/
.navbar-inverse button[type="submit"] {
position: absolute;
top:30%;
right:20px;
background: none;
border: none;
}
@media(min-width: 768px){
.navbar-inverse button[type="submit"]{
top:15%;
}
}
表示在宽度大于768px 设置 button 位置为15% ,其他为30%
效果:
总体html 和 css样式:
<!DOCTYPE html>
<html lang="zh-hans">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet"
href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/style.css">
<title>Insert title here</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#responsive-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand"><strong>BootStrap</strong>.com</a>
</div>
<div class="collapse navbar-collapse" id="responsive-navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="">组件</a></li>
<li><a href="">CSS</a></li>
<li><a href="">JavaScript</a></li>
</ul>
<form action="" class="navbar-form navbar-left">
<input type="text" placeholder="搜索" class="form-control">
<button type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</form>
<a href="" class="btn btn-primary btn-sm navbar-btn navbar-right hidden-xs">联系我们</a>
<div class="profile navbar-right">
<ul class="nav navbar-nav">
<li><a href="">登录</a></li>
<li><a href="">注册</a></li>
</ul>
<p class="navbar-text">
欢迎您-<a href="#" class="navbar-link">小猫咪</a>
</p>
</div>
</div>
</div>
</nav>
<div class="container" style="height: 1500px">
<p class="alert alert-info">一个人的处境是苦是乐常是主观的。
有人安于某种生活,有人不能。因此能安于自已目前处境的不妨就如此生活下去,不能的只好努力另找出路。你无法断言哪里才是成功的,也无法肯定当自已到达了某一点之后,会不会快乐。有些人永远不会感到满足,他的快乐只建立在不断地追求与争取的过程之中,因此,他的目标不断地向远处推移。这种人的快乐可能少,但成就可能大。
苦乐全凭自已判断,这和客观环境并不一定有直接关系,正如一个不爱珠宝的女人,即使置身在极其重视虚荣的环境,也无伤她的自尊。
拥有万卷书的穷书生,并不想去和百万富翁交换钻石或股票。满足于田园生活的人也并不艳羡任何学者的荣誉头衔,或高官厚禄。
你的爱好就是你的方向,你的兴趣就是你的资本,你的性情就是你的命运。各 人有各人理想的乐园,有自已所乐于安享的花花世界。</p>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript"
src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>
css:
body{
padding-top:70px;
}
/* 对输入框进行设置背景色、去边框,字体颜色 */
.navbar-inverse input[type="text"] {
background: #313131;
border:none;
color:#999;
}
/*设置 表单以 导航栏作为参照物*/
.navbar-inverse .navbar-form {
position: relative;
}
/*设置 按钮位置在 表单内的绝对位置*/
.navbar-inverse button[type="submit"] {
position: absolute;
top:30%;
right:20px;
background: none;
border: none;
}
@media(min-width: 768px){
.navbar-inverse button[type="submit"]{
top:15%;
}
}
/*设置图标的颜色*/
.navbar-inverse .glyphicon {
color : #999;
}
.profile {
margin-right:25px;
}