bootstrap-選項卡頭部及內容

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標籤頁</title>
    <link rel="stylesheet" type="text/css" href="../CSS/bootstrap.css">
    <script src="../JS/jquery-3.2.1.min.js"></script>
    <script src="../JS/bootstrap.js" 
></script>

    <style type="text/css">
        .tab-content{border: 1px solid #ddd;border-top: none;padding: 20px;border-radius: 0 0 5px 5px;}
        img{width: 350px;height:350px;}
    </style>
</head>
</head>
<body style="height: 2000px;">
    <div id="container"> 

    <br><br>
    <!-- 標籤頁頭部 -->
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
    </ul>

    <br 
><br>
    <ul class="nav nav-tabs" style="width: 500px;">
        <li class="active"><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
    </ul>

    <br><br>
    <ul class="nav nav-tabs nav-justified" style="width: 500px;">
        <li class="active"><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
    </ul>

    <br><br>
    <ul class="nav nav-tabs nav-tabs-justified">
        <li class="active"><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
    </ul>

    <br><br>
    <ul class="nav nav-pills">
        <li class="active"><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
    </ul>

    <br><br>
    <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
    </ul>


    <!-- 標籤航加下拉選單 -->
    <br><br>
    <ul class="nav nav-tabs" style="width: 500px;">
        <li class="active"><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle='dropdown'>three<span class="caret"></span></a><!-- data-toggle='dropdown'互動 -->
            <ul class="dropdown-menu">
                <li><a href="#">a</a></li>
                <li><a href="#">b</a></li>
                <li><a href="#">c</a></li>
            </ul>
        </li>
    </ul>


<!-- 標籤主體 -->
    <br><br><br><br>
    <div style="width:400px;position: relative;left: 400px;">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#a" data-toggle="tab">字懿</a></li>
            <li><a href="#b" data-toggle="tab">桑茜雅</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">劉冠群
                <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#a" data-toggle="tab">字懿</a></li><!-- data-toggle="tab":使能與tab的主體內容連結-->
                        <li><a href="#b" data-toggle="tab">桑茜雅</a></li>
                    </ul>
            </li>
        </ul>

        <ul class="tab-content">
            <li id="a" class="tab-pane fade in active"><img src="../../img/貓1.jpg"></li>
            <li id="b" class="tab-pane fade"><img src="../../img/貓2.jpg"></li>
            <li id="c" class="tab-pane fade"><img src="../../img/貓3.jpg"></li>
        </ul>
    </div>

    </div>
</body>
</html>
<!-- 
標籤頁 

 頭部：class="nav nav-tabs"
nav-tabs：一種標籤樣式

nav-pills:標籤的另一種樣式，藥丸型，型別同nav-tabs

nav-justified：自適應寬度，均勻分配，若螢幕變小，則自動變成豎列

nav-tabs-justified:下劃線和標籤的寬度相同

 nav-stacked:豎狀的樣式，一般都是橫狀的  class="nav nav-pills nav-stacked"一般這樣搭配



 內容（與下拉選單不同的是，它是直接顯示的）：class="tab-content"

 class="tab-pane"：tab-pane作為tab-content的內元素才可以進行顯示隱藏，class="tab-pane"元素要和標籤的data-toggle互相對應，如果data-toggle設定為data-toggle="#demo"則內容元素上要設定id="demo"

fade：如果需要為選項卡設定淡入淡出效果, 需要新增 .fade 到每個 .tab-pane後面。第一個選項卡必須新增 .in 類，表示重新整理後就直接顯示，下面的項設定fade

data-toggle="tab"：使選項卡的頭部和內容互動
 -->

bootstrap-選項卡頭部及內容

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

bootstrap(選項卡、提示框和彈出框)

選項卡（Tabs）選項卡Tabs是Web中一種非常常用的功能。使用者點選或懸浮對應的選單項，能切換出對應的內容 Bootstrap框架中的選項卡主要有兩部分內容組成：選項卡元件（也就是選單元件），對應的是 Bootstrap的 nav-tabs）底

HTML5 開發APP(頭部和底部選項卡)

技術開發方法 eat 激活 default 底部 top doc 我們開發app有一定固定的樣式，比如頭部和底部選項卡部分就是公共部分就比如我在做的app進來的主頁面就像圖片顯示的那樣我們該怎麽實現呢，實現我們應該建一個主頁面index.html，然後建五個子頁面

⒀bootstrap組件選項卡基礎案例

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

js選項卡及評星

類名 class ddc DC col RR his dcl 不同的選項卡： .active_tab{ color:#f00; border:1px solid #f00; } <ul> <li>我是1</l

layui選項卡-內容為echarts圖顯示不全的問題

wid 分享 chart detail IT title bsp tde http var width = $("威脅類型ID").width();var height = $("威脅類型ID").height();$("#威脅來源ID").css("width", w

angularjs 中的路由與 bootstrap標簽選項卡的沖突解決方案

target href targe home 選項 info 圖片頁面跳轉 tst 當項目中使用了angularjs 的路由，則所有像a標簽的href 的鏈接都會走路由，實現頁面跳轉，那麽有些地方需要使用選項卡，就會帶來麻煩。路由使用如下圖：某頁面需要使用boot

iTunes出現提示“iTunes不能讀取iPhone的內容，請前往iPhone偏好設定的摘要選項卡，然後點選“恢復”以將此iPhone恢復為出廠設定。”

有次iTunes出現提示“ iTunes不能讀取iPhone的內容，請前往iPhone偏好設定的摘要選項卡，然後點選“恢復”以將此iPhone恢復為出廠設定。”，死活連不上iTunes。後來上網搜了下，找到了解決方案，以下是簡單總結：

bootstrap js外掛篇——下拉選單、滾動監測、選項卡

三、下拉選單 3.1基本結構 3.2 觸發方式注：1、測試時發現js觸發的下拉選單點時只出現無法消失，建議data-toggle觸發 2、如果觸發下拉選單的元素是一個連結元素

Ionic基礎——ion-tap選項卡及路由結合ion-tap詳解

<!DOCTYPE html> <html ng-app="ezApp"> <head> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=de

Bootstrap筆記8--選項卡+面板

1.基礎選項卡+面板 <body> <div class="container">

dcloud------mui 點選底部選項卡，獲取文字內容

<nav class="mui-bar mui-bar-tab"><a id="defaultTab" class="mui-tab-item mui-active" ><span class="mui-icon mui-icon-home"></span>&l

bootstrap 左側橫向選項卡

<div class='container-fluid'> <h2 class='page-header'>Bootstrap 選項卡</h2> <div class='tabbable tabs-left'> <

關於使用bootstrap的tab選項卡時無法正常顯示echarts影象的解決方案

最近做一個專案時，用到了echarts實現資料視覺化，因為之前沒怎麼接觸過echarts，導致在使用echarts時踩了不少的坑，其中一個就是關於“使用bootstrap的tab選項卡時無法正常顯示echarts影象”的問題。在百度上找了很久，嘗試了各種各樣的

寫個選項卡用bootstrap 幾行程式碼就搞定了

<ul id="myTab" class="nav nav-tabs"> <li class="active"> <a href="#A" data-toggle="tab"> A選項卡

頁面跳轉到table選項卡，並顯示指定的選項卡內容。

前兩天一個朋友問我，他要做一個！要求是把在一個頁面跳轉到另一個頁面，在此就用頁面一和頁面二來描述。頁面一有4個跳轉都是同一個頁面二，頁面二是一個table選項卡，顯示4總不同的內容。分別點頁面一來初始化頁面二的初始頁面選擇！聽完以後大致幫他分析了一下，頁面以傳參來控制頁面二初

bootstrap之Tab選項卡

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tab選

【學習筆記】Bootstrap外掛滾動監聽+彈出框+選項卡

--滾動監聽依賴導航元件步驟：1.寫一個導航元件2.data-target="#test"執行滾動監聽的目標 data-spy="scroll" 向想要監聽的元素新增滾動監聽 <nav id="test" class="navbar navbar-defa

bootstrap的tab選項卡

<div class="container"> <ul class="nav nav-tabs/nav-pills"> <li cl

bootstrap tab選項卡模板

來源於菜鳥教程，複製貼上過來，為了以後爭分奪秒更便於使用 <!DOCTYPE html> <html lang="en"> <head> <base target="_self"> <meta http-equiv="C

bootstrap-選項卡頭部及內容

相關推薦