ボタンをつくってみるBootStrap
よくつかうクラスにボタンがあるかと思うので、
備忘録的に記載。
参考にさせていただいたサイト様はこちらです。
aタグ等に[btn]クラスをつけて、
各目的ごとにカラースタイルをつけます。
例えば、こんな感じ。
<a href="#" class="btn btn-default">通常</a>
ということで、全色は、こんな感じのようです。
<a href="#" class="btn btn-default">通常</a>
<a href="#" class="btn btn-primary">重要</a>
<a href="#" class="btn btn-success">成功</a>
<a href="#" class="btn btn-info">情報</a>
<a href="#" class="btn btn-warning">警告</a>
<a href="#" class="btn btn-danger">危険</a>
<a href="#" class="btn btn-link">リンク</a>
サイズも選べます。
btn-lg、btn-sm、btn-xs
デフォルトは、指定なしです。
btn-blockを指定すれば、横幅いっぱいにひろげてくれるので、
なかなか便利です。
PHPで文字列を制限して切り取る
文字列の表示などを文字制限するための関数
phpで文字数制限を入れた表示を行う「substr」と「mb_substr」と「mb_strimwidth」の違い | utamaru.jp
こちらのサイト様が詳しく載っていました。
mb_strimwidthとmb_substrで、
全角・半角の文字の数え方が違うようです。
mb_substr => 文字数でカウント。全角も半角も1文字としてカウント。
mb_strimwidth => 文字数でカウント。全角は2文字、半角は1文字としてカウント。
とのこと。
BootStrapでフォームをレイアウトしてみる
ブートストラップを利用すれば
フォームも簡単にキレイなレイアウトになるらしい
ってことで使ってみようかと思うけど、
なにげに煩雑な気もする
わかりやすいサイト様があったので、参考に。
bootstrapってdiv使いすぎな気がしてきた。
BootStrapでテキストや要素を中央ぞろえにする
ブートストラップには、
文字やブロックなどを中央そろえにするクラスが用意されているみたいです。
Bootstrapで左・中央・右寄せする方法 - Qiita
Bootstrapの使い方:ブロック中央よせ | CPIスタッフブログ
テキストのときは、
text-center
ブロックのときは、
center-block
をクラス指定すればOK。
ネーミングルールがなぜあべこべなのかは不明。
モーダル機能をつかってみる
ダイアログのようにモーダル画面を実現したいと思います。
② Bootstrapのモーダルダイアログやプログレスバーを使ってユーザーにやさしいWebアプリにしよう (1/3):CodeZine(コードジン)
ふたつのサイト様を参考にしました。
手順としては モーダルを開くためのボタンタグを用意して、
モーダル内容を記述するだけです。
②のサイトさまにあるソースを利用すると、
簡単につくれました。