©2020-2024 ioDraw All rights reserved,
Privacy Policy
<>1.基础导航栏制作步骤：
1.添加一个容器<nav>或<div>标签，使用.navbar类和.navbar-default类，并且添加role=“navigation”，增加访问性。
2.向<div>标签添加一个标题，使用.navbar-header类，内部包含有带有.navbar-brand类的<a>标签，用于定义品牌图标，或文字。
3.向导航栏添加链接，简单添加带有.nav类、 .navbar-nav类的无须列表即可。
下面进行代码展示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>导航栏的设计</title> <
link rel="stylesheet" href="bootstrap.min.css"> </head> <body> <nav class=
"navbar navbar-default " role="navigation"> <div class="navbar-header"> <a class
="navbar-brand">商品图标</a> </div> <ul class="nav navbar-nav "> <li class="active">
<a href="#">产品介绍</a></li> <li><a href="#">系列展示</a></li> <li><a href="#">成功案例</a>
</li> <li><a href="#">关于我们</a></li> </ul> </nav> </body> </html>
图片效果展示：
<>2.实现响应式导航
1.这里需要导入jquery包跟bootstrap提供的js包
2.要显示的汉堡按钮的固定写法如下：
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" >
<span class="sr-only">汉堡按钮</span> <span class="icon-bar"></span> <span class=
"icon-bar"></span> <span class="icon-bar"></span> </button>
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>导航栏的设计</title> <
link rel="stylesheet" href="bootstrap.min.css"> </head> <body> <nav class=
"navbar navbar-default " role="navigation"> <!--实现响应式代码--> <button class=
"navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=
"#collapse1" aria-expanded="false"> <span class="sr-only">汉堡按钮</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"><
/span> </button> <!--- --> <div class="navbar-header"> <a class="navbar-brand">
商品图标</a> </div> <div class="collapse navbar-collapse" id="collapse1"> <ul class=
"nav navbar-nav "> <li class="active"><a href="#">产品介绍</a></li> <li><a href="#">
系列展示</a></li> <li><a href="#">成功案例</a></li> <li><a href="#">关于我们</a></li> </ul>
</div> </nav> <script src="jquery-3.6.0.min.js"></script> <script src=
"bootstrap.min.js"></script> </body> </html>
图片展示：
点击汉堡图标之后，图片展示：
提示：
当我们觉得bootstrap框架提供的默认样式不好看时，我们可以用CSS覆盖这些样式。比如：
<style>
.navbar-default{backgroup-color:pink;}
<\style>
这样来改变nav的默认属性。
<>2.实现页面显示代码
当我们想在网页之中展示一些代码的时候，我们肯定要用到code，下面我来详细针对代码这一块做一个展示，大家可以结合代码对比图片来进行学习。
代码部分：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>程序代码的输入输出</title> <
link rel="stylesheet" href="bootstrap.min.css"> </head> <body> <div class=
"container"> <!--code--> 通过 <code>标签包裹内联样式的代码片段<br> <code><section>,
这里都是内联样式的代码片段哦</code><br> 通过 <kbd>标签标记用户通过键盘输入的内容。 <p>我希望现在能够键入<kbd>cmd</
kbd>命令：<br/> 按下<kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> <pre><p>Sample
text here...</p></pre> <pre>Sample text here...</pre> <var>x</var>=<var>y<
/var>+<var>z</var><br> <samp>输出：hello world</samp> </div> </body> </html>
图片效果展示：