bootstrap自適應導航欄

阿新 • • 發佈：2018-11-07

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <title>title</title>

    <!-- Bootstrap核心樣式 --> 

    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .load{
            position: absolute;
            left: 50%;
            top: 28px;
            transform: translateX(-50%) translateY(-50%);
        }
        .load a{
            text-decoration 
: none;
            color: #999;
            margin: 0 15px;
        }
    </style>
  </head>
  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <!-- 導航頭部 -->
        <div class="navbar-header ">
          <a 
 href="#" class="navbar-brand">
          </a>
          <button class="navbar-toggle collapsed" data-toggle='collapse' data-target='.collapse'>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <!-- 導航連結 -->
        <div class="collapse navbar-collapse">
            <!-- 預設的導航 -->
            <ul class="nav navbar-nav">
                <li class="hidden-xs"><a href="#">崗位課1</a></li>
                <li class="hidden-sm hidden-xs"><a href="#">崗位課2</a></li>
                <li class="hidden-sm hidden-xs"><a href="#">崗位課3</a></li>
                <li class="hidden-md hidden-sm hidden-xs"><a href="#">崗位課4</a></li>
                <li class="hidden-md hidden-sm hidden-xs"><a href="#">崗位課5</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle='dropdown'>
                        崗位課6
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">About us</a></li>
                        <li class="hidden-lg hidden-md hidden-sm"><a href="#">崗位課1</a></li>
                        <li class="hidden-lg hidden-md"><a href="#">崗位課2</a></li>
                        <li class="hidden-lg hidden-md"><a href="#">崗位課3</a></li>
                        <li class="hidden-lg"><a href="#">崗位課4</a></li>
                        <li class="hidden-lg"><a href="#">崗位課5</a></li>
                    </ul>
                </li>
            </ul>

            <form class="navbar-form navbar-left hidden-xs">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button class="btn btn-danger">搜尋</button>
            </form>

        </div>
        <div class="load">
            <a href="#" class="hidden-lg hidden-md hidden-sm">登入</a>
            <a href="#" class="hidden-lg hidden-md hidden-sm">註冊</a>
        </div>
      </div>
    </nav>

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

bootstrap自適應導航欄

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

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

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

Bootstrap 自適應排列順序

自適應 bsp 設計 log alt nic 為什麽 eight 是我一、前用　　我們在做一些頁面的設計時，總會想到自適應的問題。其實 Bootstrap 框架就很好的融合這個問題了。下面是我學習 Bootstrap 的總結。二、問題來源　　我為什麽會遇見這個

使用Bootstrap制作導航欄

版本點擊失效 scrip data button watermark 配置 -o header 廢話不多說，直接上代碼。 <body > <

微信小程式開發筆記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)];

Swift自定義導航欄返回按鈕

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

【小程式】自定義導航欄

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

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

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

針對bootstrap沒有多級導航欄的解決辦法

在bootstrap3的官方說明文件中，對於導航欄的下拉選單選項，只介紹了二級下拉導航，這種侷限性怎麼可以忍，如果不想要第三方工具解決問題，可以通過單擊事件對導航選項的標籤屬性進行頻繁修改，再引入第三方css檔案即可解決，但這種操作標籤屬性的方法實在是low要是需求再多

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

iOS開發之自定義導航欄返回按鈕右滑返回手勢失效的解決

我相信針對每一個iOS開發者來說~除了根檢視控制器外~所有的介面通過導航欄push過去的介面都是可以通過右滑來返回上一個介面~其實~在很多應用和APP中~使用者已經習慣了這個功能~然而~作為開發者的我們~也並沒有為此做些什麼~因為我們在建立專案時~蘋果公司已經為我們都做好了~那麼~我們這期就來聊一聊這系統

Bootstrap 自適應視窗

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,i

bootstrap 自適應全屏輪播可支援左右滑動

// 本文所使用的 Bootstrap 版本為 v3.0.3 因為最近開發的專案涉及到移動裝置上的 HTML5 開發，其中需要實現輪播效果。然後最快捷的方式，你知道的（Bootstrap），然後原生的 Bootstrap 的 carousel.js 外掛並

bootstrap自適應導航欄

相關推薦