とあるテーマのBootstrap化 その3 分散していたCSSをまとめる


前回からの続きです

メディアクエリでそれぞれ指定したのをまとめる。

現状は、
style.css、base.css、それとメディアクエリ分の 4つのcssがあるので、それぞれ中身を見ながらbootstrapのグリッドにあわせていく。

トップのスライダー部分
これはfront-pageに書いている

など不明な感じで書いてあるので、これをhidden-{prefix} , visible-{prefix}で非表示にしたりする。

 

header.phpも修正

メガメニューを使ってるので、それもカラムに。
躓いた点として前のCSSの切り替え。
またテストも画像化に。

sr-onlyCSSクラス

●sr-onlyCSSクラス

・ブートストラップでは標準でsr-onlyというCSSクラスを用意し、ブラウザ上には表示されないようにしています。下記のように定義されています。

panel panel-default

 

以下ちとメモ

Bootstrapで用意されているコンポーネントの説明。
http://bootstrap3-guide.com/compornent/navbar.html

css position:fixedで縦横中央に要素を配置する
http://qiita.com/aosho235/items/33faecdae4d9ca128e5c

初心者でも分かる!モーダルウィンドウの作り方
https://syncer.jp/jquery-modal-window

jQueryで表示・非表示のアニメーション:toggle(), show(), hide()
jQueryで表示・非表示のアニメーション:toggle(), show(), hide()

ん?リンクでなぜこうでる?

 

http://uxmilk.jp/10067

次に、スライダーを修正

Swiper
だが、今回はbxsliderのままで、

記事一覧の見出しを整える

 

次に

Follow me!

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA