Bootstrap製作精美漸變頂部固定自適應導航欄

阿新 • • 發佈：2019-01-21

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
    <title></title>  
    <meta charset="utf-8" />
    <link href="<%=path%>/css/style.css" rel="stylesheet" type="text/css" /> 
    <link rel="stylesheet" 
 href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>  
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>  

</head>  
<body 
>  
    <nav class="navbar navbar-fixed-top my-navbar" role="navigation">  
        <div class="container-fluid">  
            <div class="navbar-header">  
                <button type="button" class="navbar-toggle" data-toggle="collapse"  
                        data-target 
="#example-navbar-collapse">  
                    <span class="sr-only">切換導航</span>  
                    <span class="icon-bar"></span>  
                    <span class="icon-bar"></span>  
                    <span class="icon-bar"></span>  
                </button>  
                <a class="navbar-brand" href="#">菜鳥教程</a>  
            </div>  
            <div class="collapse navbar-collapse" id="example-navbar-collapse">  
                <ul class="nav navbar-nav">  
                    <li class="active"><a href="#">iOS</a></li>  
                    <li><a href="#">SVN</a></li>  
                    <li><a href="#">Asp.Net</a></li>  
                </ul>  
            </div>  
        </div>  
    </nav>  
     <div class="bg"></div>   
    <script>  
        $(window).scroll(function () {  
            if ($(".navbar").offset().top > 50) {$(".navbar-fixed-top").addClass("top-nav");  
            }else {$(".navbar-fixed-top").removeClass("top-nav");}  
        })</script>  
</body></html>

style.css

        html, body {width:100%;height:100%;} /*非常重要的樣式讓背景圖片100%適應整個螢幕*/  
        .bg {display: table;width: 100%;height: 100%;padding: 100px 0;text-align: center;color: #fff;background: url(http://www.xiandanke.cn/Image/intro-bg.jpg) no-repeat bottom center;background-color: #000;background-size: cover;}  
        .my-navbar {padding:20px 0;transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;}  
        .my-navbar a{background:transparent !important;color:#fff !important}  
        .my-navbar a:hover {color:#45bcf9 !important;background:transparent;outline:0}  
        .my-navbar a {transition: color 0.5s ease-in-out;}/*-webkit-transition ;-moz-transition*/  
        .top-nav {padding:0;background:#000;}  
        button.navbar-toggle {background-color:#fbfbfb;}/*整個背景都是transparent透明的，會看不到，所以再次覆蓋一下*/  
        button.navbar-toggle > span.icon-bar {background-color:#dedede}

真的只用了9行程式碼，原理挺簡單的，但是要注意以下幾點
1.html,body{width:100%;height:100%} ,必須寫這個樣式，才能讓html中的子元素100%佔滿整個螢幕，也就是要實現背景圖片佔滿100%的整個螢幕
2.bootstrap中的類 nav-fixed-top的意義在於固定導航欄在頂部
3.新增scroll 事件，在切換class的時候實現動態的效果
4.整個效果的實現原理是使用了transition 屬性,transition屬性的使用方法是：

這裡寫圖片描述

Bootstrap製作精美漸變頂部固定自適應導航欄

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="tex

bootstrap自適應導航欄

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content=

bootstrap 輪播圖實現大小自適應

</div><a class="left carousel-control" style="background-color: rgba(255,255,255,0);opacity:0" href="#myCarousel" role="button" data-slide="prev"&

七種右邊固定，左邊自適應兩欄佈局

參考文章實現了``右邊固定，左邊自適應``的兩欄佈局的七種方法。最終的效果，可以檢視這裡https://hangforfreedom.github.io/some-cases/demo-4/demo.html。與原案例不同的是右邊``div``和左邊``div``在htm

自適應導航--主要可以拿來做手機版的篩選功能

css bubuko color sign 分享 rap 20px 100% back html頁面： <nav class="nav"> <ul> <li class="current"><a href="#">Por

CSS | 聖盃佈局、雙飛翼佈局 | 自適應三欄佈局

聖盃佈局和雙飛翼佈局是前端工程師需要日常掌握的重要佈局方式。兩者的功能相同，都是為了實現一個兩側寬度固定，中間寬度自適應的三欄佈局雖然兩者的實現方法略有差異，不過都遵循了以下要點： 1.兩側寬度固定，中間寬度自適應 2.中間部分在DOM結構上優先，以便先行渲染 3.允許三列中的任意一列成為最高列 4.只需

Bootstrap 學習筆記項目實戰響應式導航欄

span navbar fault logo zh-cn sig con href meta 導航代碼HTML： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta

微信小程式開發筆記2——自定義導航欄元件

本文主要是熟悉微信小程式自定義元件的開發，以一個常見的導航欄（Tabbar）需求為例。官方文件：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 首先我們先看一

微信小程式自定義導航欄 navigation bar 返回鍵首頁

微信小程式自定義導航欄（wx_custom_navigation_bar）自定義返回鍵、首頁鍵，動態設定標題，響應式元件版本號：1.0.0 作者：chen-yt github: https://github.com/chen-yt/wx_custom_navigation

小程式自定義導航欄

將app.json裡的navigationStyle設定為navigationStyle：custom。可以在.wxss裡通過margin和padding來自定義導航欄。例如在.wxml裡寫 <view class="nav">我是汽車維修技師</view>

CSS實現自定義導航欄帶二級選單

程式碼如下： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> &

IOS初學-自定義導航欄中的內容

對導航欄中進行簡單的自定義操作新建一個FourSubViewController檢視控制器 self.title="FourPage" self.view.backgroundColor=UIColor.brown &nb

自定義導航欄的返回鍵

UIImage *backButtonHomeImage = [[UIImage imageNamed:@"nav_back"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 30, 0, 0)];

androidStudio頂部那幾個導航欄的快捷鍵跑到右邊→_→怎麼辦？

今天遇到一個比較奇葩的問題，androidstudio導航欄的幾個快捷鍵跑到右邊了，看著是十分別扭，後來通過以下方式調到中間了↓ 點View→倒數第八個ToolBar→完成（ok）. View 就在Edit旁邊就這樣

Swift自定義導航欄返回按鈕

如何去除swift系統自帶的導航欄返回按鈕？可以自定義返回按鈕在swift中，怎麼替換系統自帶的導航欄返回按鈕？比如說我要替換成一張返回按鈕圖片，點選返回到上一頁首先，看一下系統自帶的導航欄返回按鈕的樣式從上面我們可以看到，導航欄返回處左邊是

【小程式】自定義導航欄

這個需求要不是UI和我講有其他小程式實現了，我都還以為小程式還不能做到自定義導航。還好是在設計階段給出的需求，不然。。。先看看效果吧微信小程式自定義導航欄開始接介紹用法： 1：配置app.json 掃碼都別管，先檢視文件window配置然後在ap

iOS開發之自定義導航欄返回按鈕右滑返回手勢失效的解決---親測是有效的。

問題一：怎麼自定義leftItem問題二：為什麼系統自帶的右滑返回手勢失效問題三：怎麼解決這個失效問題3.怎麼解決這個失效問題其實很簡單很簡單~只需要新增下面這一句程式碼即可self.navigationController.interactivePopGestureRe

ReactNative 自定義標題欄 ReactNative 自定義導航欄

/** * Created by 李卓原 on 2018/7/6. * email: [email protected] * */ import React from 'react'; import { Text, S

自定義導航欄按鈕UIBarButtonItem 文字或圖片

在4.0裡定義導航條按鈕通常是生成普通按鈕，再用它生成導航條專用按鈕。 [java] view plaincopyprint? UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]

45.自定義導航欄 UINavigationBar

1.改變導航欄風格可以通過程式碼修改也可以通過 plist修改 @property(nonatomic,assign) UIBarStyle barStyle __TVOS_PROHIBITED; typedef NS_ENUM(NSInte

Bootstrap製作 精美漸變頂部固定自適應導航欄

相關推薦

Bootstrap製作精美漸變頂部固定自適應導航欄