Bootstrap CSS入门初步学习---导航栏设计、代码展示

留家里哦哦哦

已于 2023-02-28 10:21:42 修改

阅读量1.9k

点赞数 2

分类专栏： Bootstrap学习前端学习路径文章标签： bootstrap css html

于 2021-11-21 17:05:51 首次发布

本文链接：https://blog.youkuaiyun.com/qq_46304554/article/details/121455549

版权

本文介绍了Bootstrap CSS入门学习，详细讲解了基础导航栏的制作步骤，包括添加容器、设置标题和链接。同时，文章展示了如何实现响应式导航，通过引入jQuery和Bootstrap JS，利用汉堡图标实现菜单切换。最后，作者分享了如何使用CSS覆盖Bootstrap默认样式以及在页面中展示代码的方法。

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

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="#">关于我们

最低0.47元/天解锁文章