WEBプログラミング開発on備忘録~PHP / BootStrap / jQuery / API / iOS

php,css(ブートストラップ),javascriptなどWEBシステムやコンテンツを作りたい自分ようのまとめ

ボタンをつくってみるBootStrap

よくつかうクラスにボタンがあるかと思うので、

備忘録的に記載。

 

参考にさせていただいたサイト様はこちらです。

Bootstrap サンプル

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 Form おさらい - Qiita

 

Forms · Bootstrap

  

bootstrapってdiv使いすぎな気がしてきた。

 

 

BootStrapでテキストや要素を中央ぞろえにする

ブートストラップには、

文字やブロックなどを中央そろえにするクラスが用意されているみたいです。

 

Bootstrapで左・中央・右寄せする方法 - Qiita

 

Bootstrapの使い方:ブロック中央よせ | CPIスタッフブログ

 

 

テキストのときは、

text-center

 

ブロックのときは、

center-block

 

をクラス指定すればOK。

ネーミングルールがなぜあべこべなのかは不明。

 

 

 

モーダル機能をつかってみる

ダイアログのようにモーダル画面を実現したいと思います。

 

① Bootstrap サンプル

 

② Bootstrapのモーダルダイアログやプログレスバーを使ってユーザーにやさしいWebアプリにしよう (1/3):CodeZine(コードジン)

 

ふたつのサイト様を参考にしました。

 

手順としては モーダルを開くためのボタンタグを用意して、

モーダル内容を記述するだけです。

 

②のサイトさまにあるソースを利用すると、

簡単につくれました。

 

 

 

 

 

画像の装飾

imgタグを装飾します

 

Bootstrapに用意されているクラス

 

こちらのサイトさまを参考にすると、

class指定で

 

角丸

img-rounded

 

 

丸型

img-circle

 

サムネイル型(枠+影)

img-thumbnail

 

ができるようです。