Bootstrap常用样式，导航栏，响应式导航栏

最新推荐文章于 2024-05-14 09:55:02 发布

空谷丶幽兰

最新推荐文章于 2024-05-14 09:55:02 发布

阅读量2.4k

点赞数 3

分类专栏： Bootstrap

本文链接：https://blog.csdn.net/yangaoyuan1999/article/details/111238675

版权

1.基础导航栏：

1.添加一个容器nav或div标签，使用.navbar类和.navbar-default类，并且添加role="navigation",增加可访问性
2.向div标签添加一个标题使用.navbar-header类，内部包含带有.navbar-brand类的a标签，用于定义品牌图标
3.为了向导航栏添加链接，只需要简单地添加带有.nav类，.navbar-nav类的无序列表就行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible"content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础导航栏</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
    <nav class="navbar navbar-default" role="navigation">
        <!-- 这里可以定义品牌图标 -->
        <div class="navbar-header">
            <a href="#" class="navbar-brand" id="nav-brand-itheima">
                网站首页
            </a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"

最低0.47元/天解锁文章

空谷丶幽兰

关注

3
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap常用样式，导航栏，响应式导航栏

1.基础导航栏：1.添加一个容器nav或div标签，使用.navbar类和.navbar-default类，并且添加role="navigation",增加可访问性2.向div标签添加一个标题使用.navbar-header类，内部包含带有.navbar-brand类的a标签，用于定义品牌图标3.为了向导航栏添加链接，只需要简单地添加带有.nav类，.navbar-nav类的无序列表就行<!DOCTYPE html><html lang="en"><head&gt
复制链接

扫一扫