⑩bootstrap組件導航使用基礎案例

阿新 • • 發佈：2017-10-02

固定 active disable 頂部 aps text theme shee b-

View Code

技術分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--移動設備優先-->
    <title> 
bootstrap</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可選的 Bootstrap 主題文件（一般不用引入）  
-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <!-- 
 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <style>
    </style>
</head>
<body>
</br></br>
<h1>基礎導航</h1>
<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a href="#" class="navbar-brand">導航</a>
    </div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">首頁</a></li>
        <li><a href="#">首頁</a></li>
        <li class="disabled"><a href="#">首頁</a></li>
        <li><a href="#">首頁</a></li>
    </ul>

</nav>

<h1>導航 中加表單</h1>
<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a href="#" class="navbar-brand">導航</a>
    </div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">首頁</a></li>
        <li><a href="#">首頁</a></li>
        <li class="disabled"><a href="#">首頁</a></li>
        <li><a href="#">首頁</a></li>
    </ul>

    <form class="navbar-form navbar-right" style="margin-right: 20px;">
        <div class="form-group">
            <input type="text"  class="form-control"/>
        </div>
        <button type="button" class="btn btn-danger">搜索</button>
    </form>
</nav>
<h1>導航 中加文本、鏈接、按鈕</h1>
<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a href="#" class="navbar-brand">導航</a>
    </div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">首頁</a></li>
        <li><a href="#">首頁</a></li>
        <li class="disabled"><a href="#">首頁</a></li>
        <li><a href="#">首頁</a></li>
    </ul>
    <p class="navbar-text">文本</p>
    <a href="#" class="navbar-link">鏈接</a>
    <button type="button" class="btn btn-default navbar-btn">按鈕</button>

</nav>

<h1>頂部固定</h1>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="navbar-header">
        <a href="#" class="navbar-brand">導航</a>
    </div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">首頁</a></li>
        <li><a href="#">首頁</a></li>
        <li class="disabled"><a href="#">首頁</a></li>
        <li><a href="#">首頁</a></li>
    </ul>
    <p class="navbar-text">文本</p>
    <a href="#" class="navbar-link">鏈接</a>
    <button type="button" class="btn btn-default navbar-btn">按鈕</button>

</nav>

<h1>合屏方角導航</h1>
<nav class="navbar navbar-inverse navbar-static-top">
    <div class="navbar-header">
        <a href="#" class="navbar-brand">導航</a>
    </div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">首頁</a></li>
        <li><a href="#">首頁</a></li>
        <li class="disabled"><a href="#">首頁</a></li>
        <li><a href="#">首頁</a></li>
    </ul>

</nav>
</body>
</html>

View Code

技術分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--移動設備優先-->
    <title>bootstrap</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可選的 Bootstrap 主題文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <style>
    </style>
</head>
<body>
<nav class="navbar navbar-inverse">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle"
                data-toggle="collapse"
                data-target=".navbar-responsive-collapse">
            <span class="sr-only">Toggle navigtion</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">導航</a>
    </div>
    <div class="collapse navbar-collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">首頁</a></li>
            <li><a href="#">首頁</a></li>
            <li class="disabled"><a href="#">首頁</a></li>
            <li><a href="#">首頁</a></li>
        </ul>
    </div>

</nav>
</body>
</html>

View Code

技術分享

⑩bootstrap組件導航使用基礎案例

固定 active disable 頂部 aps text theme shee b- View Code <!DOCTYPE html> <html lang="en"> <head> <meta

⑧bootstrap組件文字圖片下拉菜單使用基礎案例

img css cab aps content cati code 分組 2.0 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

⑨bootstrap組件按鈕式下拉菜單輸入框使用基礎案例

opp int sso con utf-8 ref es2017 meta splay View Code <!DOCTYPE html> <html lang="en"> <head> <meta

⑿bootstrap組件縮略圖警告框進度條基礎案例

images pan yii mis 技術分享 close http show dsta <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

⒀bootstrap組件選項卡基礎案例

2.0 col ogg ref anon muc libs blog 引入 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charse

⒃bootstrap組件輪播圖基礎案例

hide mpat lap play target 移動優先 -s idt <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

bootstrap 組件之"導航條"

name 空白 arc 底部 adding set from car efault 一個典型的導航條基本代碼如下: <nav class="navbar navbar-default"> <div class="container">

react入門----組件的基礎用法

可能處理對象 amp array 方法字符串 arr 實例 1、組件 1 <!-- React 允許將代碼封裝成組件（component），然後像插入普通 HTML 標簽一樣，在網頁中插入這個組件。React.createClass 方法就用於生成一個組

③bootstrap文本使用基礎案例

resp 移動 ast style ner 開源案例 com 最新版 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

重修課程day55（Bootstrap之Bootstrap組件）

warn other thumbnail 選擇膠囊 inverse con port nav-tab 一文本居中　col-xx-offset-xx：水平居中　center-block：使用於不涉及float標簽的水平居中，也不涉及列的居中，讓哪裏居中就寫到哪裏,本質

webpack4.5.0+vue2.5.16+vue-loader 實戰組件化開發案例以及這些版本中踩的一些大坑!!!

解決 har XP vue png 錯誤 type demo 選項一 vue-loader 我們先不管腳手架,只說vue-loader,簡單講就是可將.vue文件打包,實現組件化開發,即一個.vue文件就是一個組件,開發中只需要引入這個.vue組件就可以了! 然後.vue

iView3.x Anchor(錨點)組件導航錨點

show htm nts 內容方法 imp 文件 segment 導航 iView3.x Anchor(錨點)組件導航錨點 iview 3.x框架中新添了一個Anchor（錨點組件），用這個組件去做頁面的分類導航正好合適，但是苦於官方文檔太過抽象研究了一整天，才

千鋒教育Vue組件--vue基礎的方法

boot sage net shee 變化 fun 技術分享 mode span 課程地址: https://ke.qq.com/course/251029#term_id=100295989 <!DOCTYPE html> <html> <h

bootstrap導航條組件

als str false inverse png color some collect 表單一、導航條模板（官方文檔） <nav class="navbar navbar-default"> <div class="container-fluid

【BootStrap】布局組件 I

包括 code put school radi 靈活 -- 標簽上拉 BootStrap布局組件 I 　　除了在原生的HTML基礎上進行了外觀和類別上的改進，BS還包裝了很多組件進庫中，設計網頁時我們可以方便地調用這些組件。下面來簡略地介紹一下各種各樣的組件 ■

【BootStrap】布局組件 II

ssa text 關閉 art 一個默認樣式沒有 new 部分 BootStrap 布局組件 II ■　　分頁　　BS中通過.pagination的ul元素來實現一個分頁集合，一個典型的分頁如下： <ul class="pagination">

bootstrap大氣alert彈窗組件：messenger

-s jpg 控件主題 xtra erro 特意 window after 　　今天用到了這個alert控件，特意分享一下。地址是：　　http://www.bootcss.com/p/messenger/ 　　使用方法裏面寫的很清楚，先把js和css兩個文件引入

Bootstrap 布局組件

ole 陰影 alt tro head href tab dropdown 按鈕 1.Bootstrap 字體圖標(Glyphicons) Bootstrap 捆綁了 200 多種字體格式的字形。 1.1用法 <button type="button" class=

vue組件父子之間相互通信案例

vue png .com 技術分享 9.png .cn 組件 nbsp vue組件父子之間相互通信案例

react基礎總結篇1，定義組件實現父子組件傳值

實現 efault () 語法前端 bsp component 定義我們前端時間學習了vue，這幾天開始入手react了。 react項目搭建起來之後，我們一定會定義很多個組件。同樣的也會涉及到父子組件的傳值。今天來整理一下這個知識。 1，定義子組件步驟　　1，引入

⑩bootstrap組件 導航 使用基礎案例

相關推薦

⑩bootstrap組件導航使用基礎案例