[プログラマ必見!]Bootstrap3 スマホでのヘッダーメニューはどんな感じ?

 
Bootstrap3使ってますか?

 
本当に今は良い時代ですね。デザインが苦手なプログラマでもある程度カッコ良い見た目のサイトをパパっと作れてしまう。

本当に良い世の中ですね!

 
さあ本日はその新しくなったモバイルファーストなBootstrap3のヘッダーに関してわかったことを話します。

 
役に立つかな汗

プログラミングやWordPressを習得するのに一番近道な方法とは?

Bootstrap3スマホのヘッダーはどうなるの!?

 
Bootstrap3は御存知の通りレスポンシブデザインになってますね。
レスポンシブデザインを取り入れた各サイトを見る限りヘッダーメニューは画面が小さくなるにつれて下記みたいになりますね!

 
■PC画面サイズの場合
pc_header

 
■スマホ画面サイズの場合
pc_header_top

 
サンプルコード

 

スマホヘッダーメニューのアイコン!?

スマホ画面のように横幅を小さくするとBootstrap3のレスポンシブデザインのおかげでヘッダーメニューが右上に固まります。

 
そこで右上の塊メニューはソースのどこで作られているかというと、

この部分ですね。
じつはこのはヘッダー右上メニューまとめアイコンの横線を作ってるんですねー!

 
なので

こうやって多くすると、
ヘッダーメニューアイコン
ヘッダー右上部分のメニューをまとめてくれるアイコンの横線が増えますね!

 
 
えーと、、、、それだけです。。。。

今日はだいぶネタ的になりましたね!

 

最後までお読み頂きありがとうございました!!

もし良かったらフォローとか購読して頂けると嬉しいです!╭( ・ㅂ・)و ̑̑ グッ !

follow us in feedly

コメントを送る

メールアドレスが公開されることはありません。

CAPTCHA