« Posts tagged bootstrap

bootstrapに480px breakpointを入れたい (2)

あぁいや番号続けちゃったけど俺がどうこうって話じゃないです今回

7ヶ月ほど前にbootstrapに480px breakpointを入れたいなんて記事を書いて、その中で同じ発想のファイルが有るということで、エンタリアルさん該当記事にリンクなぞしてたんですけど
先日久々に見てみたら昨年2014/12/14付けでcssファイルが更新されてまして、v1.0.0からv1.0.1になっていました

一ヶ月遅れかよという話はおいておいて、何が変わったのだろうと早速ダウンロードさせて頂いてzipを展開したら、ファイルサイズが1.0.0の時と比べて約2.5倍に増えててびっくりしました
で、中身のほうなんですが、どうやら俺が自分の記事で指摘した問題をエンタリアルさんの方でも認識されたようで(俺のブログを見たというわけではないと思いますがw)
col-xxs-XXcol-xs-XX だけだった1.0.0と違って、1.0.1では col-sm-XX col-md-XX col-lg-XX も一緒に入っていました
なるほど、メディアクエリーの指定がないスタイルがbootstrap.cssと追加cssで違うから問題が起きるわけなので、後から読むことになる追加cssに全て記載してしまえばいいと
確かにこの方法なら解消できそうな気がします。俺は下480pxだけじゃなくて上1600pxも欲しいかなーってLESSいじったりしてるので試していませんが・・・

そんな感じで、表題の件を手っ取り早く解消するのに便利かと思いますので、同様の問題で悩んでた方やこれから入れようと考えてる方は是非エンタリアルさんところもご検討ください

・・・エンタリアルさんの回し者みたいな記事になってしまったけど、過去話題に出してしまいその後を知った以上書かないわけには・・・
今回も関係ないんですけど、「生まれ変わったnoCAPTCHAに関する件」がどこから見に行っても404 Not Foundなので修正いただければと思います
記事の内容見えないので分かりませんが、チェックだけで良いのは数回で、粘着してるとcaptcha入力求められることも書かれてるといいのですが
まぁ、俺も試行回数が多いわけじゃないのでチェック後captcha入力求められる条件は知らないですが。たまたまだったのかもしれないし

bootstrapに480px breakpointを入れたい

と思ったんですよ、唐突に

Bootstrapでグリッドレイアウト組むと、画面解像度の横幅を見て自動でレイアウトを切り替えてくれるんですけど
一番小さいのがxsの768px未満となっていて、スマートフォンの縦持ち(iPhoneだと横320px)なんかもxsに該当しちゃってちょっと扱いにくいんですよね
公式サイトにあるカスタマイズで頑張れば出来るっちゃー出来るんですけど、項目が多すぎて分かりにくすぎる気がするんですよ
むしろ俺がわかりにくかったのですよ、マジ項目多すぎ
で、必要な部分だけコピペして編集してcss書いたっていうのが今回の話。そしてこれはこれで微妙に使いにくいことがわかったのも今回の話

何をしたのか

大したことじゃなくて、bootstrap.cssのcol-xs-Xな部分をまるっとコピーしてcol-vs-X(VerySmall的な意味で)とかに書き換えて
offsetとかpushとか全部コピって増やしてあげるだけ
元のbootstrap.cssに上書きしちゃうとバージョンアップの時に困るので、別ファイルにした
なおファイルのアップロードはないので各自頑張りましょう、というか同じ発想の下記問題の対応をされたと思われるcssファイルがエンタリアルさんところで公開されてますのでこちら参照でも
ただ、上記ファイルを俺は使っていないので以下の現象が起きるのかは分かりません詳細は各自ご確認ください
—- 2015/01/12 01:10頃追記 —-
2014/12/14付けで、エンタリアルさんところで公開されているcssファイルが更新されて1.0.1になっていたので文面等訂正しました
—- 追記おわり —-
関係ないんですけど、エンタリアルさんライセンス周りもうちょっと分かりやすくなりませんかね・・・ダウンロードしたファイルに記載がないと使うの怖いっす・・・

何がダメなのか

bootstrap.cssの次の行にbootstrap-vs.cssとか入れて読み込ませると、480px breakpointの完成です!お疲れ様でした!!
と俺も思ってたんですけど、解像度の変わる環境で使うとちょっと不都合というか、cssの挙動としては正しいのだけど意図しないことが起きるんですよ

例えば、class="col-sm-6 col-xs-8 col-vs-12" みたいな指定すると
768px以上992px未満で6カラム、480px以上768px未満で8カラム、480px未満で12カラムだと思うじゃないですか
ところが、bootstrap-vs.cssに書かれた col-vs-12 にはメディアクエリーの指定がない上にbootstrap.cssよりも後に読み込んでいるので
col-sm-6 は無視されて、col-vs-12 が適用されちゃうんですよね。つまり
768px以上992px未満で12カラム、480px以上768px未満で8カラム、480px未満で12カラムになっちゃうんですよ
col-xs-8 は後に読み込んでるbootstrap-vs.cssに書いてるので問題ないんですけどね
cssを読み込む順番を変えると、今度は col-vs-12 が無視されて col-xs-8 が適用されるだけで解決になりません

結局どうすれば

上記の問題を無視できるのであれば、手軽だし便利に使っていいと思いますが
そうじゃないならおとなしく公式サイトにあるカスタマイズで頑張るか、コンパイル環境を作ってLESSファイル編集してコンパイルするしか無いと思います
それか、bootstrap自体のバージョンアップの際に気をつける前提でbootstrap.cssに直接書いてしまうか
悩んだ末、俺はコンパイル環境作ることを選びました・・・