企业网站 用个人备案,工业电商做网站怎么样,企业网站建设高端品牌,网页设计模板免费下载田田田田田田田田田田Bootstrap的导航栏设计相关知识 目录 01-基础知识02-最基本的导航栏设计例子03-带下拉菜单的导航04-在导航栏中添加表单元素05-固定导航栏的位置(如固定到顶部和底部)06-设计导航栏的颜色和文本颜色 01-基础知识
导航栏是网页设计中不可缺少的部分#xff0c;它是整个网站的…Bootstrap的导航栏设计相关知识 目录 01-基础知识02-最基本的导航栏设计例子03-带下拉菜单的导航04-在导航栏中添加表单元素05-固定导航栏的位置(如固定到顶部和底部)06-设计导航栏的颜色和文本颜色 01-基础知识
导航栏是网页设计中不可缺少的部分它是整个网站的控制中枢在每个页面中都会看到它。 在Bootstrap中导航栏使用类navbar来定义并放在标签nav中。
关于标签nav的介绍如下 “nav” 不是HTML标准中的标签名。然而HTML提供了一些用于导航的语义元素通常使用 nav 元素来表示页面导航部分如导航菜单、链接列表等。这个元素有助于改善文档的可访问性和语义结构。 所以虽然没有名为 “nav” 的标签但 nav 元素用于将导航相关内容包装在其中以提供更好的文档结构和语义。 不过Bootstrap对HTML中的 nav 元素进行了一定的样式和功能重定义以提供一致的导航组件和用户界面元素。
在Bootstrap中你可以使用 nav 元素以及Bootstrap的类来创建导航菜单、标签页、导航栏等组件。Bootstrap通过CSS类和JavaScript插件提供了各种导航相关功能使导航的设计和交互更容易实现。
类navbar-brand与类navbar-nav navbar-brand 和 navbar-nav 是 Bootstrap 中用于导航栏navbar的两个不同的类它们分别用于不同的导航栏元素和样式。 navbar-brand 类 navbar-brand 类通常用于导航栏中的品牌标志部分如网站的标题、标志或品牌名称。这个类使文本或图标在导航栏中具有特殊的样式通常会使它更大、更加突出并通常位于导航栏的左侧。通常只有一个 a 元素会应用 navbar-brand 类用于显示网站的品牌标志或标题。 示例 nav classnavbar navbar-expand-lg navbar-light bg-lighta classnavbar-brand href#网站标题/a!-- 导航链接等内容 --
/navnavbar-nav 类 navbar-nav 类通常用于导航栏中的导航链接部分即包含页面链接的列表。这个类用于包装导航链接列表以便在导航栏中创建一组链接。这类通常包含多个 li 元素每个 li 元素包含一个 a 元素用于表示不同的页面或部分。 示例 nav classnavbar navbar-expand navbar-light bg-lighta classnavbar-brand href#网站标题/adivul classnavbar-navli classnav-item activea classnav-link href#首页 span classsr-only(当前)/span/a/lili classnav-itema classnav-link href#关于我们/a/li!-- 其他导航链接 --/ul/div
/nav总之navbar-brand 类用于定义导航栏中的品牌标志或标题而 navbar-nav 类用于定义导航栏中的导航链接。这两个类通常一起使用以构建具有品牌标志和导航链接的Bootstrap导航栏。
02-最基本的导航栏设计例子
!DOCTYPE html
html
headmeta charsetUTF-8title导航栏基本示例/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/headbody classcontainer
h3 aligncenter导航栏基本示例/h3
nav classnavbar navbar-light bg-light my-4a classnavbar-brand href#Bootstrap笔记/a
/nav
nav classnavbar navbar-light bg-lighta classnavbar-brand href#img src51.jpeg width30 alt /a
/nav
nav classnavbar navbar-light bg-light my-4a classnavbar-brand href#img src52.jpeg width30 alt Django笔记/a
/nav
/body
/html这里介绍下类navbar-light
navbar-light 是 Bootstrap 中用于定制导航栏navbar外观样式的类之一。这个类用于创建一个浅色主题的导航栏通常适用于页面的明亮背景。
具体来说navbar-light 类的特点如下 浅色背景当你将 navbar-light 类应用于导航栏元素时它会将导航栏的背景颜色设置为浅色通常是白色或浅灰色。这有助于确保导航栏在明亮的页面背景上更容易看见。 黑色文本navbar-light 类还将导航栏中的文本颜色设置为黑色以确保文本与浅色背景对比明显。 透明度通常浅色导航栏的背景是半透明的这意味着页面背景可以在一定程度上透过导航栏。
这是一个简单的示例如何在 Bootstrap 中使用 navbar-light 类创建一个浅色导航栏
nav classnavbar navbar-light bg-light!-- 导航栏内容如品牌标志、导航链接等 --
/nav在上面的示例中navbar-light 类应用于 nav 元素同时指定了 bg-light 类来设置背景颜色为浅色灰色或白色。你可以根据需要进一步自定义导航栏例如添加品牌标志、导航链接等。
需要注意的是Bootstrap 的外观类可以与其他类一起使用以满足你的设计需求。此外Bootstrap 提供了许多其他导航栏类和选项以便于创建不同样式的导航栏如 navbar-dark 用于创建深色导航栏等。
运行效果如下
03-带下拉菜单的导航
!DOCTYPE html
html
headmeta charsetUTF-8title添加下拉菜单/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/headbody classcontainer
nav classnavbar navbar-expand navbar-light bg-lighta classnavbar-brand href#首页/adivul classnavbar-navli classnav-item activea classnav-link href#源码资料/a/lili classnav-item dropdowna classnav-link dropdown-toggle href# data-toggledropdown主要笔记/adiv classdropdown-menua classdropdown-item href#图像处理笔记/aa classdropdown-item href#Python笔记/aa classdropdown-item href#前端笔记/a/div/li/ul/div/nav
/body
/html运行效果如下
04-在导航栏中添加表单元素
示例代码如下
!DOCTYPE html
html
headmeta charsetUTF-8title在导航栏中添加表单元素/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/headbody classcontainer
nav classnavbar navbar-light bg-light justify-content-betweena classnavbar-brand昊虹AI笔记/aform classform-inlineform classform-inlineinput classform-control mr-sm-2 typesearch placeholder搜索热门笔记button classbtn btn-outline-success my-2 my-sm-0 typesubmit搜索/button/form/form
/nav
/body/html运行效果如下
05-固定导航栏的位置(如固定到顶部和底部)
⑴类fixed-top导航栏固定到顶部。 ⑵类fixed-bottom导航栏固定到底部。 示例代码如下
!DOCTYPE html
html
headmeta charsetUTF-8title固定导航栏/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/headbody classcontainernav classnavbar navbar-light bg-light justify-content-between fixed-topa classnavbar-brand导航栏一顶部固定/aform classform-inlineform classform-inlineinput classform-control mr-sm-2 typesearch placeholder搜索热门课程button classbtn btn-outline-success my-2 my-sm-0 typesubmit搜索/button/form/form
/navdiv
p第01段/p
p第02段/p
p第03段/p
p第04段/p
p第05段/p
p第06段/p
p第07段/p
p第08段/p
p第09段/p
p第10段/p
p第11段/p
p第12段/p
p第13段/p
p第14段/p
p第15段/p
p第16段/p
p第17段/p
p第18段/p
p第19段/p
p第20段/p/divnav classnavbar navbar-light bg-light justify-content-between fixed-bottoma classnavbar-brand导航栏二底部固定/aform classform-inlineform classform-inlineinput classform-control mr-sm-2 typesearch placeholder搜索热门课程button classbtn btn-outline-success my-2 my-sm-0 typesubmit搜索/button/form/form
/nav/body
/html运行效果如下
06-设计导航栏的颜色和文本颜色
可以利用类navbar-dark和类navbar-light设计导航栏的颜色和文本颜色。
在 Bootstrap 中navbar-dark 和 navbar-light 是用于自定义导航栏外观的两个类。它们的主要区别在于导航栏的颜色和文本颜色。 navbar-dark 类 navbar-dark 类用于创建深色的导航栏通常具有深色的背景颜色例如深蓝色、深灰色或黑色。导航栏背景通常是深色的以便与深色的文本和图标形成对比。文本和图标颜色通常是浅色的例如白色或浅灰色以确保清晰可读性。这个类适合在亮色背景的页面上使用以确保导航栏元素清晰可见。 navbar-light 类 navbar-light 类用于创建浅色的导航栏通常具有浅色的背景颜色例如白色或浅灰色。导航栏背景通常是浅色的以便与浅色的文本和图标形成对比。文本和图标颜色通常是深色的例如黑色以确保清晰可读性。这个类适合在深色背景的页面上使用以确保导航栏元素清晰可见。
这些类使你能够轻松自定义导航栏的外观以适应不同的设计需求和背景颜色。你可以根据项目的要求选择使用 navbar-dark 或 navbar-light 类来创建合适的导航栏。以下是一个示例代码演示了如何在 Bootstrap 中应用这些类
nav classnavbar navbar-dark bg-dark!-- 导航栏内容 --
/nav!-- 或者 --nav classnavbar navbar-light bg-light!-- 导航栏内容 --
/nav在上面的示例中第一个导航栏使用了 navbar-dark 类具有深色的背景和浅色的文本而第二个导航栏使用了 navbar-light 类具有浅色的背景和深色的文本。
总结 navbar-dark 类和 navbar-light 类的主要区别就在于如果您想设计具有深色背景、浅色文本的导航栏那么请用navbar-dark 类如果您想设计具有浅色背景、深色文本的导航栏那么请用navbar-light 类。
示例代码如下
!DOCTYPE html
html
headmeta charsetUTF-8title设计导航栏的颜色/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/head
body classcontainer
h3 aligncenter设计导航栏的颜色/h3
nav classnavbar navbar-expand navbar-dark bg-darka classnavbar-brand mr-auto href#类navbar-dark 和 类bg-dark/aform classform-inlineform classform-inlineinput classform-control mr-sm-2 typesearch placeholder搜索经典教材button classbtn btn-outline-light my-2 my-sm-0 typesubmit搜索/button/form/form
/navnav classnavbar navbar-expand navbar-light bg-info my-2a classnavbar-brand mr-auto href#类navbar-ligh 和 类bg-info/aform classform-inlineform classform-inlineinput classform-control mr-sm-2 typesearch placeholder搜索热门课程button classbtn btn-outline-light my-2 my-sm-0 typesubmit搜索/button/form/form
/nav/body
/html运行效果如下图所示
