Bootstrap组件_导航条（默认样式的导航条，品牌）

最新推荐文章于 2024-06-03 20:31:46 发布
最新推荐文章于 2024-06-03 20:31:46 发布
阅读量514 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Leon_Jinhai_Sun/article/details/88538234
版权 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>导航条</title>
  <link rel="stylesheet" href="bootstrap.min.css">
  <script src="jquery-1.12.1.js"></script>
  <script src="bootstrap.min.js"></script>
</head>
<body>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="nav-brand">
          <img src="baidu.png" style="height:50px" width="86px">
        </a>
      </div>
      <ul class="nav navbar-nav">
        <li class="active">
          <a href="#">
            Link
            <span class="sr-only"></span>
          </a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" role="button">
            下拉菜单
            <span class="caret"></span>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">1</a></li>
              <li><a href="#">1</a></li>
              <li><a href="#">1</a></li>
              <li><a href="#">1</a></li>
            </ul>
          </a>
        </li>
      </ul>
    </div>
  </nav>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>导航条</title>
  <link rel="stylesheet" href="bootstrap.min.css">
  <script src="jquery-1.12.1.js"></script>
  <script src="bootstrap.min.js"></script>
  <style>
    /*body {
      padding-top: 65px;
    }*/
    body {
      padding-bottom: 65px;
    }
  </style>
</head>
<body>
  <nav class="navbar navbar-default navbar-static-bottom">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="nav-brand">
          <img src="baidu.png" style="height:50px" width="86px">
        </a>
      </div>
      <ul class="nav navbar-nav">
        <li class="active">
          <a href="#">
            Link
            <span class="sr-only"></span>
          </a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" role="button">
            下拉菜单
            <span class="caret"></span>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">1</a></li>
              <li><a href="#">1</a></li>
              <li><a href="#">1</a></li>
              <li><a href="#">1</a></li>
            </ul>
          </a>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="请输入要搜索的内容">
        </div>
        <button type="submit" class="btn btn-default">提交</button>
      </form>
      <button type="button" class="btn btn-default navbar-btn navbar-right">
        Sign in
      </button>
      <p class="navbar-text">欢迎来到
        <a href="#" class="navbar-link">声讯台</a>
      </p>
    </div>
  </nav>
  hellohellohellohello <br>
  hellohellohellohello <br>
</body>
</html>

 

Leon_Jinhai_Sun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
3.Bootstrap组件
wxhua420701325的博客
10-25 1547
栅格系统。
【Bootstrap】常用组件（框架）
一个普通人的博客
08-24 2489
总结了对个人而言常用的Bootstrap组件
Bootstrap框架常用组件
橘猫吃不胖的博客
01-16 3131
Bootstrap框架常用组件1 组件基础1.1 什么是组件1.2 组件的优势2 Bootstrap常用组件2.1 按钮2.2 导航2.3 面包屑导航2.4 分页2.5 列表2.6 表单2.7 按钮组2.8 输入框组3 Bootstrap实现菜单功能3.1 折叠菜单3.2 下拉菜单4 Bootstrap实现轮播图功能4.1 什么是轮播图4.2 轮播图的功能分析4.3 轮播图活动信息4.4 轮播图左侧箭头4.5 轮播图右箭头4.6 轮播图指示器4.7 全部代码 1 组件基础 1.1 什么是组件 组件是一个抽象
BootStrap入门到实战：BootStrap组件（一）- Glyphicons字体图标、下拉菜单、按钮组、按钮式下拉菜单
最新发布
林林一928的博客
06-03 849
一、Glyphicons字体图标二、下拉菜单 用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性用jQuery实现1.3 菜单向上弹出2. 对齐.默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐3.对齐4.分割线5.禁用的菜单项三.按钮组。四.按钮式下拉菜单，1. 单按钮下拉菜单，2. 分裂式按钮下拉菜单...
BootStrap4：组件
分享日常工作技术
03-29 1722
Bootstrap包括多个预定义的按钮样式，每个样式都有自己的语义目的，另外还有一些额外的功能可以用于更多的控制。
很实用的50 个 Bootstrap 插件
耶和华是我的牧者，我必不至缺乏。
08-27 2876
1. Bootstrap Multiselect Bootstrap Multiselect实现下拉框，更简洁，方便 2. Bootstrap Dialog Bootstrap Dialog实现提示框，模态框，消息提示框 3. Bootstrap Confirmation Bootstrap Confirmation按钮提示组件， 4. Bootstrap Tag I...
Bootstrap框架（组件）
passerby的博客
07-27 1999
根据上一章博客我们讲解了Bootstrap的12栅格系统 排版 图片 这一章我们来讲一下一些组件无处不在的字体图标 如图： 它们在APP页面底部、网站导航条、登录页面或注册页面 Bootstrap框架提供了250多个来自Glyphicon Halflings的字体图标，其作用在内联元素上 按钮式下拉菜单的好处是可以实现按钮和下拉菜单分离 在大于768px的屏幕上，通过.nav-justified类可以让选项卡或胶囊式导航呈现出同等宽度，在小屏幕上，导航呈现堆叠样式 翻页只能实现
Bootstrap CSS组件之导航条(navbar)
08-31
Bootstrap CSS组件中的导航条(navbar)是Web开发中常用的一个元素，它提供了高效且美观的导航界面。在Bootstrap框架中，导航条主要用于构建网站或应用的主要导航区域，它支持响应式设计，能在不同设备和屏幕尺寸下...
基于bootstrap实现收缩导航条
12-03
这里，`navbar`是导航条的基本容器，`navbar-default`是默认的主题样式，而`navbar-fixed-top`则使得导航条始终固定在页面顶部。 为了实现收缩效果，Bootstrap使用了`collapse`和`toggle`功能。在导航条的头部，有...
BootStrap响应式导航条实例介绍
09-02
1. `<nav class="navbar navbar-default">`：这是Bootstrap导航条的基本结构，`navbar-default`类为导航条提供了默认的样式。 2. `<div class="navbar-header">`：这个容器包含了导航条的可折叠按钮和品牌标识。 3...
BootStrap 导航条实例代码
08-30
在这个示例中，我们使用了 Bootstrap 的默认样式来设置导航条的样式，包括背景颜色、字体颜色、边框样式等等。通过添加不同的类，可以达到不同的样式效果。 二、带有表单的导航条 在某些情况下，我们需要在导航条...
bootstrap中的导航条实例代码详解
10-16
在Bootstrap中，导航条（Navbar）是一个关键的组件，用于构建网页顶部的导航菜单。这篇文章将深入讲解如何在Bootstrap中创建和定制导航条。 首先，我们来看一下导航条与导航的区别。导航条（Navbar）和导航（Nav）...
Bootstrap系列之导航条（Navbar）
热门推荐
老__L的博客
06-18 1万+
为Bootstrap强大的，响应灵敏的导航头，导航栏提供文档和示例，包括对面包屑、导航、折叠插件等的支持。在开始使用导航栏之前，以下是你需要知道的导航栏内置了对一些子组件的支持。根据需要从以下选项中进行选择下面是一个包含响应式光主题导航条的所有子组件的例子，它会在lg(大)断点处自动折叠。 这个例子使用了和工具类。可以应用于大多数元素，但是锚是最好的，因为一些元素可能需要实用程序类或自定义样式。 将图片添加到可能总是需要自定义样式或工具来适当的大小。下面是一些示例。 Navbar导航链接建立在我们的选
修改bootstrap导航栏样式(颜色，高)
qq_45532769的博客
02-28 4114
修改bootstrap导航栏样式(颜色，高)
转：Bootstrap的常用类(CSS和布局组件)的总结
qx1995318的博客
07-25 1135
原文地址：点击打开链接 Bootstrap通过给标签赋予一个类名(class name),来生成对应类名的效果标签 网格选项 row :行 col-*-*: 列 (第一个*可以为xs[超小]/sm[小型]/md[中型]/lg[大型]第二个*必须为12以内的[列数]) col-*-offset-* :列偏移(第一个*和上面一样,第二个*范围是1到11,表示把该列的左
Bootstrap 组件
qq_43713967的博客
11-02 1969
2.Bootstrap 组件 Bootstrap组件是Bootstrap框架的核心之一。可以利用Bootstrap组件构建出绚丽的页面 常用的组件：Icon图标（Glyphicon）、下拉菜单（Dropdown）、输入框（Input group）、导航（Nav）、导航条（Navbar）、缩略图（Thumbnail）、媒体对象（Media object）、列表组（Listgroup）、分页导航（Pagination） 小图标 图标（icon）是一个优秀网站不可缺少的一组元素，小图标的点缀可以使网站瞬间提升一个
boostrap3常用组件集合
有勇气的牛排博客
12-09 236
原地址： 样式：https://v3.bootcss.com/css/#top 组件地址：https://v3.bootcss.com/components/#pagination 导包 <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个
前端基础之《Bootstrap（8）—CSS组件_导航条》
csj50的专栏
11-08 2177
4、折叠的小方块按钮（.navbar-toggle .collapsed）2、头部和折叠小按钮（.navbar-header）3、文字对齐（.navbar-brand）1、nav标签：灰色小条。
bootstrap导航条
05-30
Bootstrap导航条是一个常用的Web界面元素，可以方便地在页面上创建导航菜单。以下是一个简单的Bootstrap导航条的代码示例： ```html <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Logo</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav> ``` 这个代码示例中，`nav` 元素定义了一个导航条，`navbar-expand-lg` 类指定了导航条在小屏幕设备上可以折叠。导航条中包含一个品牌图标和一个按钮，用于在小屏幕设备上展开和折叠导航菜单。`navbar-collapse` 类指定了导航菜单在小屏幕设备上可以折叠。在导航菜单中，`nav-item` 类定义了一个菜单项，`nav-link` 类定义了菜单项的链接。`active` 类指定了当前选中的菜单项。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值