HTMLだけでできる?Bootstrapを使用したタブの作り方

どうも、最近仕事でBootstrapを使用することがあったのでメモとして残しておこうと思います。初心者の方でもクラスを付与するだけで簡単にコーディングできるのでぜひ使用したことがない人は使ってみるといいと思います。
その簡単なBootstrapの中でも今回はタブ機能の実装を解説していきます。

目次

  • Bootstrapとその他読み込み
  • タブ機能の実装
  • DEMO

Bootstrapとその他読み込み

BootstrapjQueryをインストール or CDNで読み込みしてください。

CDN

ローカルにタウンロード

Bootstrap(http://getbootstrap.com/)にアクセスしダウンロード

bootstrap

jQuery(https://jquery.com/)にアクセスしダウンロード

jquery

タブ機能の実装

HTMLサンプルコード

HTMLのコードだけでタブメニューが実装できてしまいます。CSSを自分で変更したい場合は自分でクラスを付与するか、CSSを上書きしてください。今は横並びのタブメニューでしたがBootstrap公式サイトに他の縦に並ぶメニューなどの方法も記されていますのでご覧ください。

DEMO

See the Pen Tab Menu – Bootstrap by Keisuke Yamashita (@keisuke1989) on CodePen.

よろしければシェアをお願いします。

Keisuke Yamashita

新卒CM制作会社でPM→カナダでWEBデザインを勉強→カナダでWEBデベロッパーとして就職→日本で事業会社でデザイナー デザインからフロントエンドを主に担当しています。休日はNetflixを見ながら過ごしています。

最新情報をお届け

De.からWEBデザインの最新情報を受け取りたい方は、下記のボタンでLIKEしてください。