Bootstrap4のsassを使った効率良いカスタマイズ方法 – helog
Bootstrap4のsassを使った効率良いカスタマイズ方法です。 最近、Bootstrapをベースにしてサイトを開発することも多くなってきました。 これまでは何も考えずに、まずはbootstrap.cssを読み込んでから開発をスタートしてたんですが、経験を重ねることで、それがあまり効率が良くないことに気がつきました。 sassを使わないBootstrapのカスタマイズ Bootstrapをカスタマイズするにあたり、まずは「bootstrap.css」を読み込み、その後に読み込む「style.css」などで上書いていました。 この手法だと「プライマリカラーを変更する」「マージントップを調整する」「角丸をあり（なし）にする」などといった基本的なカスタマイズをするときに、スタイルを上書く箇所の洗い出す作業に時間を取られたり、また、洗い出しの漏れがあって一部デザイン・レイアウトに崩れが発生した
Bootstrap4を利用してアコーディオンメニューを作ろう | コトダマウェブ
ここでは、Bootstrap4に備わっている機能を利用してアコーディオンメニューを作る方法について見ていきたいと思います。 今回、作成するメニューはこちらです。 ボタンで表示を切り替えてご覧ください。 See the Pen bootstrap4 accordion by kenichi (@ken81) on CodePen. HTML <ul id="accordion_menu"> <li> <a data-toggle="collapse" href="#menu01" aria-controls="#menu01" aria-expanded="false">リンクメニュー１</a> </li> <ul id="menu01" class="collapse" data-parent="#accordion_menu"> <li><a href="#">リンクサブメニュー1-1<
Bootstrapのアコーディオン（collapse）の開閉時にアイコンを変更させる(CSSだけでやっちゃう編) - 屑プログラマの憂鬱
BootstrapのCollapse（JavaScript · Bootstrap）は非常に便利なんだけど、開閉を意味する画像（＋やーの画像）を表示させたい時がある。でも、js書くのも辛い。そんなときは、CSSを駆使してササッと仕事終わらせちゃいましょう。 <a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Link with href </a> <div class="collapse" id="collapseExample"> <div class="well"> ...開閉させたいコンテンツhere… </div> </div> a[aria-expa
[臭わない]Bootstrap4を使った、ブートストラップ臭を感じさせないCSSの作り方 | 株式会社ビヨンド
こんにちは。 開発チームのワイルド担当、まんだいです。 少し旧聞に属する話になるかも知れませんが、Twitter Bootstrap（以下、Bootstrap）のバージョン4が出ましたね（記事を書いている時点では既に4.1が出ている）。 特に管理画面など、手早く見た目の良いサイトを作る場合は使うことも多いかと思いますが、いかんせん気になるのは、俗にいうブートストラップ臭と呼ばれるアレではないでしょうか？ Bootstrapは、バージョン4からsassを使ったプリコンパイルに対応したので、どこまでブートストラップ臭が消せるのか、文字通り消臭（改造）してみたいと思います。 なんでそんなことするの？ Bootstrapは見た目こそ似たり寄ったりになってしまいますが、個人的にはデザイン面はかなり優秀だと思っていて、利用数が多いというのもそこが評価されているからだと思っています。 逆に選から漏れる場
![[臭わない]Bootstrap4を使った、ブートストラップ臭を感じさせないCSSの作り方 | 株式会社ビヨンド](https://cdn-ak-scissors.b.st-hatena.com/image/square/84f4003aa3918c915ea48576ed2ce8f09f7c6643/height=288;version=1;width=512/https%3A%2F%2Fbeyondjapan.com%2Fcms%2Fwp-content%2Fuploads%2F2018%2F05%2FBootstrap-1.png)
Bootstrap 4 をカスタマイズする - Qiita
概要 Bootstrap 4 のソースコードをいじらずに、変数を変更してカスタマイズする方法のメモ。 Bootstrap 4を使うならSassを使って3倍幸せになろう で説明されているように、スタイルの上書きでカスタマイズするのは保守性がよろしくないので、Bootstrap4の変数を変更することで気持ちよくカスタマイズする。 また、Bootstrapのソースコードを変更すると、Bootstrapパッケージをアップデートすると変更が消えてしまうので、変更内容は分離する。 とは言え、特に難しいことをするわけではなく、これこそが公式ドキュメントで説明されている方法でもある。 下ごしらえ まず、自分のSCSSファイルを作成する。名前は何でもいいが、ここではcustom.scssとする。 中身は、Bootstarpのscssファイルへのパスを指定した@importだけ。 npmで入れた場合は ../
Bootstrap使い方メモ１（基本＋CSS） - Qiita
公式サイトを一通り動かしてみたときのメモ。 まずは CSS。 Hello World Bootstrap を入手する ここ から zip ファイルをダウンロードする。 HTML を書く <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap.min.css" /> </head> <body> <h1>Hello Bootstrap!!</h1> </body> </html> HTML5 の DOCTYPE を記述する。 css ファイルを読み込むだけで使い始められる。 モバイル用に viewport を設定する meta タグを記述する。 user-scalable=n
Bootstrap Form おさらい - Qiita
BootstrapのFormは、書き方にいろいろパターンがあり、いまいち整理できていないので、調査を兼ねてまとめてみる。 結論から言えば、ドキュメントをよく読めば、いろいろ理解できる。 事前に知っておきたい Formをいじるまえに知っておきたいこととしては、 レイアウトにより（inline, horizontal）、マークアップが異なる。 text系(input,textarea,select)と、その他のものは扱いが違う。 horizontalではform-groupがrowと同じ概念になる（なので要素をcol-xで分割） の３つ。 私は、いろいろな差をBootstrapが吸収してくれるはずという先入観により、遠回りをしました。 素の状態 container以外は何もbootstrapの要素はない。 <div class="container"> <form> <label>name</
bootstrap3で横並びのボックスを実現する方法 - Qiita
bootstrap3にて、横並びのボックスを実現する方法です。 checkboxの場合 labelにcheckbox-inlineを付けます。 <form class="form-horizontal"> <div class="form-group"> <label class="control-label col-xs-3">チェックリスト</label> <div class="col-xs-9"> <label class="checkbox-inline"> <input type="checkbox" name="">オプション１ </label> <label class="checkbox-inline"> <input type="checkbox" name="">オプション２ </label> </div> </div> </form> <form class="fo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Blog | Welcome to Adobe Blog
【Bootstrap + jQuery】アコーディオンでボタンの三角ボタンの上下を切り替える方法 | YMMHブログ
【旧版】Bootstrap 4入門 (全22回) - プログラミングならドットインストール
