Bootstrap 3 排版

导航栏

导航栏默认有圆角边框,设置导航.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撑出高度。

Bootstrap 3 排版_第1张图片Bootstrap 3 排版_第2张图片l


路径效果

路径效果时采用官方效果

<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>实现浮动

你可能感兴趣的:(Bootstrap 3 排版)