前端基础之《Bootstrap（8）—CSS组件

一、导航条

1、nav标签：灰色小条

<nav class="navbar navbar-default"></nav>

2、头部和折叠小按钮（.navbar-header）

<div class="navbar-header"></div>

3、文字对齐（.navbar-brand）

<a href="" class="navbar-brand">首页</a>

4、折叠的小方块按钮（.navbar-toggle .collapsed）

5、合并区隐藏（.collapse .navbar-collapse）

6、导航条结构
导航条分为两块：
第一部分，头部和小按钮
第二部分，合并区

7、例子

<nav class="navbar navbar-default"><!--导航条头部--><div class="navbar-header"><a href="" class="navbar-brand">首页</a><!--小按钮--><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></div><!--合并区--><div id="mynavbar" class="collapse navbar-collapse"><ul class="nav navbar-nav"><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><a href="">百度</a></li></ul></div>
</nav>

8、navbar对齐
navbar-right：右对齐
navbar-left：左对齐

二、navbar反色效果
navbar-default：默认灰色
navbar-inverse：反色

三、品牌图标（.navbar-brand）
在navbar-header中的a链接，直接放入图片

<div class="navbar-header"><a href="" class="navbar-brand"><img src="bs/image/222.jpg" height="100%"></a><!--小按钮--></div>

四、导航条中的下拉菜单

<li class="dropdowm"><a href="" class="dropdown-toggle" data-toggle="dropdown"><span>网站实例 <span class="caret"></span></span></a><ul class="dropdown-menu"><li><a href="">linux</a></li><li><a href="">linux</a></li><li><a href="">linux</a></li><li><a href="">linux</a></li><li><a href="">linux</a></li></ul>
</li>

五、导航条中的form表单（.navbar-form）
做个搜索框

<form action="" class="navbar-form navbar-right"><div class="form-group"><input type="text" class="form-control"></div><div class="form-group"><input type="submit" value="搜索" class="btn btn-default"><button class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></button></div>
</form>

六、导航条中的纯按钮（.navbar-btn）

<button class="btn btn-default navbar-btn">Sign in</button>

七、导航条中的文本（.navbar-text）

<p class="navbar-text">注册</p>

八、导航条中的链接（.navbar-link）

<p class="navbar-text"><a href="#" class="navbar-link">登录</a></p>

九、导航条固定在顶部（.navbar-fixed-top）
在nav标签内加上

十、导航条固定在底部（.navbar-fixed-bottom）

十一、导航条静止在顶部（.navbar-static-top）

十二、导航条完整例子

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="bs/css/bootstrap.css">
<script src="bs/js/jquery-3.6.1.js"></script>
<script src="bs/js/bootstrap.js"></script>
<title>bootstrap</title>
<style>body {padding-top: 20px;}
</style>
</head><body><div class="container"><h1 class="page-header">bootstrap前端框架</h1><nav class="navbar navbar-inverse navbar-fixed-top"><!--把导航条里边放一个container，可以居中两边留空--><div class="container"><!--导航条头部--><div class="navbar-header"><a href="" class="navbar-brand"><img src="bs/image/222.jpg" height="100%"></a><!--小按钮--><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></div><!--合并区--><div id="mynavbar" class="collapse navbar-collapse"><ul class="nav navbar-nav"><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><a href="">百度</a></li><li class="dropdowm"><a href="" class="dropdown-toggle" data-toggle="dropdown"><span>网站实例 <span class="caret"></span></span></a><ul class="dropdown-menu"><li><a href="">linux</a></li><li><a href="">linux</a></li><li><a href="">linux</a></li><li><a href="">linux</a></li><li><a href="">linux</a></li></ul></li></ul><button class="btn btn-default navbar-btn">Sign in</button><p class="navbar-text">注册</p><p class="navbar-text"><a href="#" class="navbar-link">登录</a></p><form action="" class="navbar-form navbar-right"><div class="form-group"><input type="text" class="form-control"></div><div class="form-group"><input type="submit" value="搜索" class="btn btn-default"><button class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></button></div></form></div></div></nav><h1>aaaaaaaaaaaaaa</h1><h1>aaaaaaaaaaaaaa</h1><h1>aaaaaaaaaaaaaa</h1><h1>aaaaaaaaaaaaaa</h1><h1>aaaaaaaaaaaaaa</h1><h1>aaaaaaaaaaaaaa</h1><h1>aaaaaaaaaaaaaa</h1><h1>aaaaaaaaaaaaaa</h1><h1>aaaaaaaaaaaaaa</h1><h1>aaaaaaaaaaaaaa</h1><h1>aaaaaaaaaaaaaa</h1><h1>aaaaaaaaaaaaaa</h1><h1>aaaaaaaaaaaaaa</h1><h1>aaaaaaaaaaaaaa</h1><h1>aaaaaaaaaaaaaa</h1><h1>aaaaaaaaaaaaaa</h1><h1>aaaaaaaaaaaaaa</h1><h1>aaaaaaaaaaaaaa</h1><h1>aaaaaaaaaaaaaa</h1><h1>aaaaaaaaaaaaaa</h1></div>
</body><script></script></html>

十三、路径导航（面包屑导航）（.breadcrumb）

<div class=""><ol class="breadcrumb"><li><a href="">linux</a></li><li><a href="">linux</a></li><li><a href="">linux</a></li><li><a href="">linux</a></li><li><a href="">linux</a></li></ol>
</div>

前端基础之《Bootstrap（8）—CSS组件_导航条》相关推荐

前端基础之《Bootstrap（13）—JavaScript插件_标签页、工具提示、弹出框、折叠效果和幻灯片》
一.data-开头的是什么是bootstrap封装的js. data-toggle data-target data-dismiss data-spy 参考资料:https://blog.csdn. ...
bootstrap插件bootbox参数和自定义弹出框宽度设置
插件官方地址:http://bootboxjs.com/ alert: 1 bootbox.alert("Hello world!", function() {}); dialog ...
AndroidStudio_安卓原生开发_自定义蒙板弹出框WaitDialog---Android原生开发工作笔记134
android在执行程序过程中,很可能会用到,正在执行的提示.下面我们就自己做一个提示框,自带蒙板,执行过程中,后面的窗口内容不能操作. 下面的代码可以直接复制粘贴使用: 1.首先写一个WaitDia ...
前端常用插件之artDialog弹出框
前端常用插件之artDialog弹出框最近,发现一个插件--好看精致的页面弹出框,个人觉得有必要与大家分享一下,它就是artDialog弹出框. 引用上一篇文章<前端常用插件之art-temp ...
Bootstrap系列之弹出框（Popovers）
文章の目录 1.概述 2.Example: Enable popovers everywhere 3.Example: Using the container option 4.Example 4.1 ...
弹出框插件layer使用
layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 插件官方地址:http://layer.layui.co ...
jQuery+Bootstrap美化弹出框
项目中很多弹出的警告框是通过alert()弹出的浏览器警告框,样式比较丑陋且和页面使用的Bootstrap框架样式不吻合,因此需要修改弹出框样式. 采用jQuery+Bootstrap的方式这样弹出的 ...
html弹出框教程,JavaScript 弹出框
JavaScript 弹出框在JavaScript中,您可以创建对话框或弹出窗口来与用户进行交互. JavaScript具有三种不同类型的弹出框:警告框,确认框和提示框. 警告框警告框是最简单的弹 ...
web前端基础之Bootstrap(三) - 插件
模态框放在body内的直接子元素弹出方式 1.通过 data 属性 data-toggle="modal" data-target="#myModal" ...
# 前端基础（HTML + CSS + JavaScript）
一.HTML 基础概念:超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. 可以使用 HTML 来建立自己的 WEB 站点,H ...

前端基础之《Bootstrap（8）—CSS组件_导航条》

前端基础之《Bootstrap（8）—CSS组件_导航条》相关推荐

最新文章

热门文章