Bootstrap 3 排版

时间 2019-11-13

标签 bootstrap 排版栏目 Bootstarp 繁體版

原文原文链接

导航栏

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

图一无圆角（放大看）bootstrap

图二有圆角（放大看）工具

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

左侧手风琴

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

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

<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撑出高度。htm

lflash

路径效果

路径效果时采用官方效果
it

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

浮动

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

清除浮动 .clearfix

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