bootstrap导航条

最新推荐文章于 2022-11-08 10:42:16 发布
最新推荐文章于 2022-11-08 10:42:16 发布
阅读量374 收藏 1
点赞数
分类专栏： bootstrap 文章标签： bootstrap 导航 导航条 bootstrap导航条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangying496875002/article/details/72331443
版权

导航条

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>导航条</title>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="css/main.css">
    <!--[if lt IE 9]>
    <script src="lib/html5shiv/html5shiv.min.js"></script>
    <script src="lib/respond/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container">
        <!-- <a href="#" class="navbar-brand">
             标题
         </a>-->
        <div class="navbar-header"><!--header和brand都有左浮动的功能，如果标题里面东西多就用header包裹-->
            <!-- <h3>标题</h3>-->
            <a href="#" 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>
    </div>
</nav>
<!--导航条中加入表单并居右-->
<nav class="navbar navbar-default">
    <div class="container">
        <!-- <a href="#" class="navbar-brand">
             标题
         </a>-->
        <div class="navbar-header"><!--header和brand都有左浮动的功能，如果标题里面东西多就用header包裹-->
            <!-- <h3>标题</h3>-->
            <a href="#" 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>
        <form class="navbar-form navbar-right">
            <div class="input-group">
                <input type="text" class="form-control">
                <div class="input-group-btn">
                    <button class="btn btn-default">提交</button>
                </div>
            </div>
        </form>
    </div>
</nav>
<!--导航条中加入按钮-->
<nav class="navbar navbar-default">
    <div class="container">
        <!-- <a href="#" class="navbar-brand">
             标题
         </a>-->
        <div class="navbar-header"><!--header和brand都有左浮动的功能，如果标题里面东西多就用header包裹-->
            <!-- <h3>标题</h3>-->
            <a href="#" 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>
        <button class="btn btn-default navbar-btn">按钮</button>
    </div>
</nav>
<!--导航条中加入文本并将超链接放入文本中-->
<nav class="navbar navbar-default">
    <div class="container">
        <!-- <a href="#" class="navbar-brand">
             标题
         </a>-->
        <div class="navbar-header"><!--header和brand都有左浮动的功能，如果标题里面东西多就用header包裹-->
            <!-- <h3>标题</h3>-->
            <a href="#" 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>
        <p class="navbar-text">
            我是一段文本
            <a href="#" class="navbar-link">我是超链接</a>
        </p>
    </div>
</nav>
<!--导航条反转，颜色深-->
<nav class="navbar navbar-inverse">
    111
</nav>
<!--导航条反转，颜色深, 固定在顶部-->
<!--<nav class="navbar navbar-inverse navbar-fixed-top">-->
    <!--111-->
<!--</nav>-->
<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="js/main.js"></script>
</body>

</html>


西门吹雪叶孤城
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于bootstrap实现收缩导航条
12-03
本文实例为大家分享了bootstrap实现收缩导航条的具体代码，供大家参考，具体内容如下 效果图 贴上我的代码 <!DocType html> <html> <head> <meta charset="utf-8"> <!--设置浏览器优先使用什么模式来渲染页面--> <!--告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=divice-width,initial-s
Bootstrap 导航条
歪脖先生的博客
03-09 468
导航条导航条（navbar）是一个常用的组件，也是 Bootstrap 的特色功能。导航条一般包含站点名和几个导航链接。还可以对导航条加以扩展，添加表单控件和下拉菜单等。基本导航条基本导航条中包含站点名和几个导航链接。Bootstrap使用 .navbar 和 .navbar-inner 类定义导航条的包含框。为了保证导航条与页面同宽，可以把它放在 .span12 或 .container 的容器...
Bootstrap导航条
歪脖先生的博客
05-19 7025
导航条 Bootstrap中的导航条（navbar）是放在应用或网站的头部，作为导航的响应式基础组件，它能够根据浏览器窗口宽度，自动调整导航条的显示状态，在移动设备上折叠（并且可开可关），在视口（viewport）宽度增加时逐渐变为水平展开模式。 Bootstrap 对基本导航条进行了一些扩展，除了站点名称和导航链接外，还可以在导航条中添加表单、按钮、下拉菜单、文本、非导航链接等。 创建导航...
BootStrap 导航条实例代码
08-30
本文通过实例代码给大家介绍了bootstrap导航条效果，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
09-02
主要介绍了Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
bootstrap导航条实现代码
08-31
主要为大家详细介绍了bootstrap导航条的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Bootstrap导航条学习使用(一)
12-10
本文实例为大家分享了Bootstrap导航条的具体代码，供大家参考，具体内容如下 navbar： 导航条的基础样式 nav navbar-nav ：导航条里菜单的的固定样式组合的class navbar-default ：导航条的默认样式 navbar-...
JS组件Bootstrap导航条使用方法详解
10-22
主要为大家详细介绍了JS组件Bootstrap 导航条的使用方法，感兴趣的小伙伴们可以参考一下
23种bootstrap导航菜单布局
01-08
一款基于Bootstrap的导航菜单布局设计jQuery插件。该插件集成了23种Bootstrap导航菜单效果，有下拉菜单，大型菜单，侧边栏菜单，购物车菜单等，可以满足大部分网页导航菜单设计的需求。
Bootstrap系列之导航条（Navbar）
热门推荐
老__L的博客
06-18 1万+
为Bootstrap强大的，响应灵敏的导航头，导航栏提供文档和示例，包括对面包屑、导航、折叠插件等的支持。在开始使用导航栏之前，以下是你需要知道的导航栏内置了对一些子组件的支持。根据需要从以下选项中进行选择下面是一个包含响应式光主题导航条的所有子组件的例子，它会在lg(大)断点处自动折叠。 这个例子使用了和工具类。可以应用于大多数元素，但是锚是最好的，因为一些元素可能需要实用程序类或自定义样式。 将图片添加到可能总是需要自定义样式或工具来适当的大小。下面是一些示例。 Navbar导航链接建立在我们的选
bootstrap组件——导航条
陈雪珊的博客
03-26 1221
bootstrap提供了导航条组件，效果是这样的（也可以是黑底白字的样式）： 这是在pc端下的样子，在移动端中间的导航会折叠起来，最右边多一个控制折叠的按钮，像下面这样： 具体实现代码如下：<div class="navbar navbar-default"> //.navbar-inverse为黑底白字的样式，如有需要可以自主更改。 <div class="contain
Bootstrap 静止导航条
歪脖先生的博客
05-20 383
静止导航条 为 .navbar 类追加一个 .navbar-static-top 类，即可创建一个与页面等宽度，并随页面一起滚动的导航条。也可以在导航条中包含一个.container或.container-fluid容器，让它居中显示，并在两侧添加内边距。与.navbar-fixed-*类不同的是，你不用给body添加任何内边距。如： <navclass="navbar navbar...
前端基础之《Bootstrap（8）—CSS组件_导航条》
最新发布
csj50的专栏
11-08 2095
4、折叠的小方块按钮（.navbar-toggle .collapsed）2、头部和折叠小按钮（.navbar-header）3、文字对齐（.navbar-brand）1、nav标签：灰色小条。
bootstrap 1-导航条和下拉菜单
sanluo11的博客
01-25 7500
1、导航条的制作 基于bootstrap的官网,下载bootstrap的环境，就不多说了。 导航条依赖JavaScript,响应式导航条依赖折叠（collapse）插件 加入以下三个环境的路径 导航条的代码如下 //navbar这是一个导航条，navbar-default是默认样式，navigation
Bootstrap 导航栏
书香水墨
07-24 3451
一、Bootstrap 导航栏 1.1 基本导航栏 导航栏一般放在页面的顶部。 我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。 导航栏上的选项可以使用<ul>元素并添加 class="navbar-nav"类。 然后在 <li> 元素上添加...
四十五、使用bootstrap制作导航条
付之一笑的专栏
01-06 2376
使用bootstrap制作导航条 参考链接：https://v3.bootcss.com/components/#navbar 项目结构 工具使用： Bootstrap Button Generator 通过Bootstrap Button Generator，你只需输入你想指定给新按钮的样式的CSS类，并简单调整图标的颜色，即可获得新的图标，然后复制代码，粘贴在任意你想要的地方即可。 最终效果 中等屏幕 桌面显示器 (≥992px) 、大屏幕 大桌面显示器 (≥1200px)： 桌面显示器 (&lt
bootstrap固定导航条模板
huangbaokang的博客
07-23 813
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值