HTMLサンプル・・・単体で動きます（CDN）
CSSを追加してコンテンツ部分に枠を入れてます。
サンプルを見る
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title>Bootstrap4 タブナビゲーション</title> <style type="text/css"> .tab-box{ padding: 20px; border: 1px solid #DDD; border-top: 0; } </style> </head> <body> <!-- コンテンツ --> <h3>標準</h3> <!-- タブボタン部分 標準 --> <ul class="nav nav-tabs"> <li class="nav-item"><a href="#tab1" class="nav-link active" data-toggle="tab">タブ①</a></li> <li class="nav-item"><a href="#tab2" class="nav-link" data-toggle="tab">タブ②</a></li> <li class="nav-item"><a href="#tab3" class="nav-link" data-toggle="tab">タブ③</a></li> <li class="nav-item"><a href="#tab4" class="nav-link" data-toggle="tab">タブ④</a></li> </ul> <h3>中央寄せ justify-content-center</h3> <!-- タブボタン部分 中央寄せ --> <ul class="nav nav-tabs justify-content-center"> <li class="nav-item"><a href="#tab1" class="nav-link active" data-toggle="tab">タブ①</a></li> <li class="nav-item"><a href="#tab2" class="nav-link" data-toggle="tab">タブ②</a></li> <li class="nav-item"><a href="#tab3" class="nav-link" data-toggle="tab">タブ③</a></li> <li class="nav-item"><a href="#tab4" class="nav-link" data-toggle="tab">タブ④</a></li> </ul> <h3>右寄せ justify-content-end</h3> <!-- タブボタン部分 右寄せ --> <ul class="nav nav-tabs justify-content-end"> <li class="nav-item"><a href="#tab1" class="nav-link active" data-toggle="tab">タブ①</a></li> <li class="nav-item"><a href="#tab2" class="nav-link" data-toggle="tab">タブ②</a></li> <li class="nav-item"><a href="#tab3" class="nav-link" data-toggle="tab">タブ③</a></li> <li class="nav-item"><a href="#tab4" class="nav-link" data-toggle="tab">タブ④</a></li> </ul> <h3>幅一杯で等幅サイズ nav-justified</h3> <!-- タブボタン部分 幅一杯で等幅サイズ --> <ul class="nav nav-tabs nav-justified"> <li class="nav-item"><a href="#tab1" class="nav-link active" data-toggle="tab">タブ①</a></li> <li class="nav-item"><a href="#tab2" class="nav-link" data-toggle="tab">タブ②</a></li> <li class="nav-item"><a href="#tab3" class="nav-link" data-toggle="tab">タブ③</a></li> <li class="nav-item"><a href="#tab4" class="nav-link" data-toggle="tab">タブ④</a></li> </ul> <h3>幅一杯で不均等サイズ nav-fill</h3> <!-- タブボタン部分 幅一杯で不均等サイズ --> <ul class="nav nav-tabs nav-fill"> <li class="nav-item"><a href="#tab1" class="nav-link active" data-toggle="tab">タブ①</a></li> <li class="nav-item"><a href="#tab2" class="nav-link" data-toggle="tab">タブ②・・・・・・・・・・・・・・・・・・・・・・・・</a></li> <li class="nav-item"><a href="#tab3" class="nav-link" data-toggle="tab">タブ③</a></li> <li class="nav-item"><a href="#tab4" class="nav-link" data-toggle="tab">タブ④・・・・・・・・・・・・・・・・・・・・・・・・</a></li> </ul> <h3>以下はタブのコンテンツ部分 共通です</h3> <!--タブのコンテンツ部分 共通--> <div class="tab-content"> <div id="tab1" class="tab-pane active tab-box"> タブ①の内容を記載 </div> <div id="tab2" class="tab-pane tab-box"> タブ②の内容を記載 </div> <div id="tab3" class="tab-pane tab-box"> タブ③の内容を記載 </div> <div id="tab4" class="tab-pane tab-box"> タブ④の内容を記載 </div> </div> <!-- /コンテンツ --> <!-- jquery --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <!-- Bootstrap JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html> |
ピルナビゲーション・・・nav-tabs → nav-pills
サンプルを見る
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title>Bootstrap4 ピルナビゲーション</title> </head> <body> <!-- コンテンツ --> <h3>標準</h3> <!-- タブボタン部分 標準 --> <ul class="nav nav-pills"> <li class="nav-item"><a href="#tab1" class="nav-link active" data-toggle="tab">タブ①</a></li> <li class="nav-item"><a href="#tab2" class="nav-link" data-toggle="tab">タブ②</a></li> <li class="nav-item"><a href="#tab3" class="nav-link" data-toggle="tab">タブ③</a></li> <li class="nav-item"><a href="#tab4" class="nav-link" data-toggle="tab">タブ④</a></li> </ul> <h3>中央寄せ justify-content-center</h3> <!-- タブボタン部分 中央寄せ --> <ul class="nav nav-pills justify-content-center"> <li class="nav-item"><a href="#tab1" class="nav-link active" data-toggle="tab">タブ①</a></li> <li class="nav-item"><a href="#tab2" class="nav-link" data-toggle="tab">タブ②</a></li> <li class="nav-item"><a href="#tab3" class="nav-link" data-toggle="tab">タブ③</a></li> <li class="nav-item"><a href="#tab4" class="nav-link" data-toggle="tab">タブ④</a></li> </ul> <h3>右寄せ justify-content-end</h3> <!-- タブボタン部分 右寄せ --> <ul class="nav nav-pills justify-content-end"> <li class="nav-item"><a href="#tab1" class="nav-link active" data-toggle="tab">タブ①</a></li> <li class="nav-item"><a href="#tab2" class="nav-link" data-toggle="tab">タブ②</a></li> <li class="nav-item"><a href="#tab3" class="nav-link" data-toggle="tab">タブ③</a></li> <li class="nav-item"><a href="#tab4" class="nav-link" data-toggle="tab">タブ④</a></li> </ul> <h3>幅一杯で等幅サイズ nav-justified</h3> <!-- タブボタン部分 幅一杯で等幅サイズ --> <ul class="nav nav-pills nav-justified"> <li class="nav-item"><a href="#tab1" class="nav-link active" data-toggle="tab">タブ①</a></li> <li class="nav-item"><a href="#tab2" class="nav-link" data-toggle="tab">タブ②</a></li> <li class="nav-item"><a href="#tab3" class="nav-link" data-toggle="tab">タブ③</a></li> <li class="nav-item"><a href="#tab4" class="nav-link" data-toggle="tab">タブ④</a></li> </ul> <h3>幅一杯で不均等サイズ nav-fill</h3> <!-- タブボタン部分 幅一杯で不均等サイズ --> <ul class="nav nav-pills nav-fill"> <li class="nav-item"><a href="#tab1" class="nav-link active" data-toggle="tab">タブ①</a></li> <li class="nav-item"><a href="#tab2" class="nav-link" data-toggle="tab">タブ②・・・・・・・・・・・・・・・・・・・・・・・・</a></li> <li class="nav-item"><a href="#tab3" class="nav-link" data-toggle="tab">タブ③</a></li> <li class="nav-item"><a href="#tab4" class="nav-link" data-toggle="tab">タブ④・・・・・・・・・・・・・・・・・・・・・・・・</a></li> </ul> <h3>以下はタブのコンテンツ部分 共通です</h3> <!--タブのコンテンツ部分 共通--> <div class="tab-content"> <div id="tab1" class="tab-pane active"> タブ①の内容を記載 </div> <div id="tab2" class="tab-pane"> タブ②の内容を記載 </div> <div id="tab3" class="tab-pane"> タブ③の内容を記載 </div> <div id="tab4" class="tab-pane"> タブ④の内容を記載 </div> </div> <!-- /コンテンツ --> <!-- jquery --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <!-- Bootstrap JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html> |
ボタンをオリジナルにする
nav-tabs、nav-pillsの代わりのオリジナルのクラスをつくってCSSで装飾します。
サンプルを見る
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title>Bootstrap4 ピルナビゲーション</title> <style> .tab_menu { margin: 0 0 0 1px; background: #999; font-size: 14px; color: #fff; font-weight: normal; } .nav { border-bottom: 1px solid #000; } .nav .active{ margin: 0 0 0 1px; background: #000; font-size: 14px; color: #fff; font-weight: normal; } </style> </head> <body> <!-- コンテンツ --> <h3>標準</h3> <!-- タブボタン部分 標準 --> <ul class="nav justify-content-end"> <li class="nav-item"><a href="#tab1" class="nav-link active tab_menu" data-toggle="tab">タブ①</a></li> <li class="nav-item"><a href="#tab2" class="nav-link tab_menu" data-toggle="tab">タブ②</a></li> <li class="nav-item"><a href="#tab3" class="nav-link tab_menu" data-toggle="tab">タブ③</a></li> <li class="nav-item"><a href="#tab4" class="nav-link tab_menu" data-toggle="tab">タブ④</a></li> </ul> <h3>以下はタブのコンテンツ部分</h3> <!--タブのコンテンツ部分 共通--> <div class="tab-content"> <div id="tab1" class="tab-pane active"> タブ①の内容を記載 </div> <div id="tab2" class="tab-pane"> タブ②の内容を記載 </div> <div id="tab3" class="tab-pane"> タブ③の内容を記載 </div> <div id="tab4" class="tab-pane"> タブ④の内容を記載 </div> </div> <!-- /コンテンツ --> <!-- jquery --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <!-- Bootstrap JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html> |
ボタンをオリジナルにする②・・・全幅でメニューは「container幅」均等
メニュー部分全体を「container-fluid」で囲み、タブボタン部分を「container」で囲みます。
帯のようにする場合は「container-fluid」に背景色を設定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title>Bootstrap4 ボタンをオリジナルにする②・・・全幅でメニューは「container幅」均等</title> <style> .tab_menu-container { background: #999; } .tab_menu { margin: 0 0 0 1px; background: #999; font-size: 14px; color: #fff; font-weight: normal; } .nav .active{ margin: 0 0 0 1px; background: #000; font-size: 14px; color: #fff; font-weight: normal; } </style> </head> <body> <!-- コンテンツ --> <h3 class="text-center">タブメニュー部分</h3> <div class="container-fluid tab_menu-container"> <div class="container"> <!-- タブボタン部分 標準 --> <ul class="nav nav-justified"> <li class="nav-item"><a href="#tab1" class="nav-link active tab_menu" data-toggle="tab">タブ①</a></li> <li class="nav-item"><a href="#tab2" class="nav-link tab_menu" data-toggle="tab">タブ②</a></li> <li class="nav-item"><a href="#tab3" class="nav-link tab_menu" data-toggle="tab">タブ③</a></li> <li class="nav-item"><a href="#tab4" class="nav-link tab_menu" data-toggle="tab">タブ④</a></li> </ul> </div> </div> <div class="container"> <h3>以下はタブのコンテンツ部分</h3> <!--タブのコンテンツ部分 共通--> <div class="tab-content"> <div id="tab1" class="tab-pane active"> タブ①の内容を記載 </div> <div id="tab2" class="tab-pane"> タブ②の内容を記載 </div> <div id="tab3" class="tab-pane"> タブ③の内容を記載 </div> <div id="tab4" class="tab-pane"> タブ④の内容を記載 </div> </div> </div> <!-- /コンテンツ --> <!-- jquery --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <!-- Bootstrap JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html> |
コメント