關於 Bootstrap 的導航條的小問題
這兩天整理一下 WebBroker 寫的 CMS 的程式碼,清理一下頁面框架。
頁面框架使用了 Bootstrap V3 (V4 出來了,但網上的例子程式碼,在 V4 底下呈現出來會有問題,在 V3 底下沒問題)。
頁面擡頭的主選單,在 Bootstrap 裡面叫做導航條。這個導航條可以隨著頁面向上滾動而一起滾動,也可以固定置頂,頁面滾動時它始終顯示在頁面頂部。
導航條固定置頂,是給導航條的 class 裡面新增:class .navbar-fixed-top, 比如在我自己的例子程式碼裡,就是:
<div class="navbar navbar-inverse navbar-fixed-top">
然後,在增加了固定置頂的屬性後,頁面正文的頂部,就會被這個導航條遮住。要讓正文頂部下移,給頁面的 <Body> 新增 style 的屬性:<body style="padding-top:50px">
直接在頁面裡面寫::<body style="padding-top:50px">, 就要每個頁面都要寫。因此最好寫到外部 css 檔案裡面。
在外部 CSS 檔案裡面寫:
body{padding-top: 50px} 在 FireFox 瀏覽器底下效果出來了,在 Chrome 底下沒有效果。網上查了一下,查到:http://www.miaojingyun.com/post/286.html
body {padding-top: 50px;
overflow:hidden;
}
加上 overflow:hidden; Chrome 底下效果出來了。FireFox 效果仍然在。多謝這位部落格主人:苗景雲
-----------------------------------
又及:
這裡為 Body 增加了一個 padding 以後,整個頁面長度超出瀏覽器高度時,瀏覽器不會出滾動條了。
因此,要換個解決辦法:
在導航條的底下,增加一個 div,給它的 css 裡面,設定一個最小高度,也就是出來一個空白的高度:
<div class="Splitter"> </div>
.Splitter{
min-height: 52px;
}
這個辦法測試結果OK。
頁面內容在這個 div 底下。這樣一來,整個頁面內容都向下偏倚了 52 個畫素,內容的頂部就不會被導航條遮蔽了。
相關推薦
bootstrap-導航條狀態及二級菜單
bootstrap-導航條狀態及二級菜單1.運行效果如圖所示2.實現代碼如下<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compat
bootstrap-導航條中的按鈕、文本和鏈接
bootstrap-導航條中的按鈕、文本和鏈接1.運行效果如圖所示2.實現代碼如下<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Com
bootstrap導航條組件
als str false inverse png color some collect 表單 一、導航條模板(官方文檔) <nav class="navbar navbar-default"> <div class="container-fluid
解決Bootstrap導航條不能下拉
前言 製作網頁的時候發現使用Bootstrap製作的導航條,在頁面縮小到一定程度時候變成下拉狀態,此時,點選下拉沒有用,檢查程式碼沒有問題,最後發現的問題是檔案引用出現了問題。 更改 檔案的引用順序不能有誤,Bootstrap 的所有 JavaScript 外掛都依賴 jQuery,
bootstrap導航條的二級選單下實現三級選單
bootstrap在導航條中的二級選單下實現三級選單 modify by 20180506 add music update 20180919: 推廣下自己的公眾號,打算以後系列文章會維護在微信公眾號上,有興趣的朋友可以關注喲,多數系列文章可能會圍繞pytho
bootstrap導航條--三級選單
效果如下: 第一步,插入相關的js和css檔案 <link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css
實現Bootstrap導航條可點選和滑鼠懸停顯示下拉選單
使用Bootstrap導航條元件時,如果你的導航條帶有下拉選單,那麼這個帶下拉選單的導航在點選時只會浮出下拉選單,它本身的href屬性會失效,也就是失去了超連結功能,這並不是我想要的,我希望導航條的連結可以正常開啟它的連結,但又需要下拉選單功能,開始折騰~ 首先解決帶下拉
關於 Bootstrap 的導航條的小問題
這兩天整理一下 WebBroker 寫的 CMS 的程式碼,清理一下頁面框架。 頁面框架使用了 Bootstrap V3 (V4 出來了,但網上的例子程式碼,在 V4 底下呈現出來會有問題,在 V3 底下沒問題)。 頁面擡頭的主選單,在 Bootstrap 裡面叫做導航條
Bootstrap(導航條)
cti 頂部 name initial data- oot rand itl ble <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8">
Bootstrap(標準頂部導航條)
set boot port query for control prim link css <!DOCTYPE html><html lang="en"><head> <head> <meta cha
bootstrap-基本導航條
bootstrap-基本導航條1.運行效果如圖所示2.實現代碼如下<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible"
bootstrap-基本導航條-帶搜索欄
bootstrap-基本導航條-帶搜索欄1.運行效果如圖所示2.實現代碼如下<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compat
bootstrap-反色導航條
bootstrap-反色導航條1.運行效果如圖所示2.實現代碼如下<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible"
bootstrap-響應式導航條
bootstrap-響應式導航條1.運行效果如圖所示2.實現代碼如下<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible
bootstrap 組件之"導航條"
name 空白 arc 底部 adding set from car efault 一個典型的導航條基本代碼如下: <nav class="navbar navbar-default"> <div class="container">
在小屏幕和手機屏幕下,Bootstrap導航欄的自動折疊隱藏
false ans alt ron -h header func nta AS 遇到的問題: 最近在使用Bootstrap框架做網頁時發現,在小屏幕和手機屏幕之下(max-width: 768px),導航欄不能在點擊導航鏈接時,自動折疊導航欄。或者在展開導航欄後,如果不
bootstrap響應式導航條示例
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&
微信小程式的搜尋高亮、自定義導航條等踩坑記錄
原文地址:https://oomabc.com/articledetail?atclid=7421fe13daad46389791463f51d3395d 前言我在寫這個部落格的小程式過程中,遇到了很多的問題。之前斷斷續續也寫過不少JavaScript和css,不過都是半吊子。所以在看了一會
橫向CSS導航條選單:帶小三角形
之前看到很多網頁的導航條都會有小三角形,一直好奇是如何實現的,正好前些天做的菜鳥教程首頁的導航欄也有小三角形,就研究了一下它的實現方法。菜鳥教程首頁導航如下圖: 其實實現這個功能也挺簡單。首先寫一個大的div_nav,而“首頁”“菜鳥筆記”“菜鳥工具”“參考手冊”等則作
Bootstrap(七)導航 & 導航條 & 分頁導航
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev