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>實現浮動。

相關標籤/搜索

bootstrap+bootstrap+scss

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。