Bootstrap 3 排版

最新推荐文章于 2025-06-24 09:37:10 发布

转载最新推荐文章于 2025-06-24 09:37:10 发布 · 78 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/1765961/blog/368555

文章标签：

#javascript #python #ViewUI

本文介绍如何使用Bootstrap配置导航栏，包括去除圆角边框、设置内边距防止交错等。此外还介绍了手风琴效果的实现方法及路径效果的应用。

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

2019独角兽企业重金招聘Python工程师标准>>>

导航栏

导航栏默认有圆角边框，设置导航.navbar-fixed-top可以去掉边框。

图一无圆角（放大看）

图二有圆角（放大看）

为了防止导航栏与页面主体中的其他内容的顶部相交错，请向 <body> 标签添加至少 50 像素的内边距（padding），内边距的值可以根据您的需要进行设置。

左侧手风琴

手风琴效果使用data-toggle="collapse"(这是一个bootstrap插件)。

a标签的href值对应隐藏标签的ID值。

<ul>
    <li class="top-li">
        <a href="#learn-more-content" data-toggle="collapse">
            <i class="glyphicon glyphicon-flash" style="color:#fff"></i>
            <span>显示下拉菜单</span>
        </a>
        <!--------in=首次加载页面时显示------out=首次加载页面时隐藏--------------------->
        <ul id="learn-more-content" class="collapse in">
            <li>账号管理</li>
            <li>1-2</li>
            <li>1-3</li>
            <li>1-4</li>
            <li>1-5</li>
            <li>1-6</li>
        </ul>
</ul>

手风琴效果中的元素不能设置固定高度，只能用padding撑出高度。

路径效果

路径效果时采用官方效果

<ol class="breadcrumb">
  <li><a href="#">后台管理系统</a></li>
  <li><a href="#">用户管理</a></li>
  <li class="active">Data</li>
  </ol>

浮动

通过添加 .navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐。两个类都会通过 CSS 设置特定方向的浮动样式。

清除浮动 .clearfix

pull-left、pull-right也可以让<nav>标签中的<ul>实现浮动。

转载于:https://my.oschina.net/u/1765961/blog/368555