WEB制作(html・css(スタイルシート))に関する各種メモ書き:タグ「Bootstrap」での検索

Bootstrapによるモーダルウィンドウ

『動作デモ』

Bootstrapのモーダルウィンドウは

● モーダル起動ボタン

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal1">モーダルウィンドウ1</button>

● モーダルウィンドウ

  <div class="modal fade" id="myModal1" role="dialog">
    <div class="modal-content">
    モーダルウィンドウ最小セット
    </div>
  </div>

でとりあえず起動します。

自分で好きなウィンドウにすることもできます

● オリジナルのモーダルウィンドウ

  <div class="modal fade" id="myModal1" tabindex="-1" role="dialog">
    <div style="width:300px; height:300px; background: white; border:10px solid red;">
    aaaaaaaaaaaaaaaaaaaa<br>
    aaaaaaaaaaaaaaaaaaaa<br>
    aaaaaaaaaaaaaaaaaaaa<br>
    aaaaaaaaaaaaaaaaaaaa<br>
    </div>
  </div>

Bootstrapらしいモーダルウィンドウにする場合は

● Bootstrapらしいモーダルウィンドウ

  <div class="modal fade" id="myModal1" tabindex="-1" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">ウィンドウタイトル</h4>
        </div>
        <div class="modal-body">
          <p>テキスト</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

とします。

『動作デモ』はこちら

添付ファイル1
No.1042
05/22 14:04

edit

添付ファイル

Bootstrap

Bootstrapで画面サイズによって要素を【表示・非表示】させる

Bootstrapの画面サイズ

xs : Phones (<768px)
sm : Tablets (≥768px)
md : Desktops (≥992px)
lg : Desktops (≥1200px)

この画面サイズ画面サイズによって要素を【表示・非表示】させるには以下のようにクラス指定します

例:スマホにだけ表示させる場合

<div class="visible-xs">これはスマホの画面サイズの時のみ表示されます</div>
.visible-xs
.visible-sm
.visible-md
.visible-lg
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg	
No.997
01/20 01:42

edit

Bootstrap

BootstrapのCDN

Bootstrapはいちいちダウンロードしなくてもサーバ上のファイルを直接指定するだけで使用できます。

BootstrapのCSS

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

BootstrapのJavaScript

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

です。 これをhtmlファイルの`` 内に埋め込みます。

No.991
01/02 17:17

edit

Bootstrap

Bootstrapのメディアクエリ

Bootstrapを使用しているサイトでメディアクエリを追加する場合の記述は以下のようになります。

Bootstrapはモバイルファースト志向なので、まずモバイルのCSSを設定して、次のメディアクエリでウィンドウ幅が広いタブレットやPCの時のCSSを上書きしていくというように設定します。

@media (min-width: 768px) {
	#test {
	}
}
@media (min-width: 992px) {
	#test {
	}
}
@media (min-width: 1200px) {
	#test {
	}
}

逆にスマホのみに指定したい場合は以下のように記述します。

/* PC(幅1199px)以下に適用するスタイル */
@media (max-width: 1199px) {
	#test {
	}
}

/* タブレット以下に適用するスタイル */
@media (max-width: 991px) {
	#test {
	}
}

/* スマホのみ適用するスタイル */
@media (max-width: 767px) {
	#test {
	}
}
No.990
01/19 23:06

edit

Bootstrap

Font AwesomeのWEBフォントをフォームのボタンに使用する

Font AwesomeのWEBフォントをフォームのボタンに使用するには以下のようにします。

● 1. Font Awesomeのインストール

http://fortawesome.github.io/Font-Awesome/ からダウンロードしてきてサーバにアップロードします。

HTML(ヘッダ)

<link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css">

で読み込ませます(ディレクトリは適宜書き換えてください。)

フォームのHTML

<input type="button" class="fontawesome_submit" value="&#xf002; ボタンのテスト">

フォームのCSS

.fontawesome_submit{
    font-family: FontAwesome;
}

以上でOKです。簡単ですね。

&#xf002;

のところがfont Awesomeのフォントです。 これを下記の表を元に好きなコードに書き換えるといいでしょう。

●2. Font Awesomeのコード確認表

http://fortawesome.github.io/Font-Awesome/cheatsheet/

No.942
05/23 13:06

edit

Bootstrap
アイコン

WEBサイトやillustratorにCSS(WEBフォント)アイコンFont Awesomeを使う

■ Font Awesome

http://fortawesome.github.io/Font-Awesome/

■ 使い方

  1. 「Font Awesome」のページから【Download】ボタンを押してダウンロード
  2. 解答してできたディレクトリの中から【css】【fonts】をサーバにコピー
  3. HTMLに以下を追加
    <link rel="stylesheet" href="./css/font-awesome.min.css">
    
  4. フォントの表示は以下のようにします。
    <i class="fa fa-cc-visa"></i>
    

■ アイコン一覧(アイコンをクリックすると貼り付け HTMLソースが見れます)

http://fortawesome.github.io/Font-Awesome/icons/

■ アニメーションさせることもできます(Font Awesome Animation)

http://l-lin.github.io/font-awesome-animation/

■ Illustratorなどで使用する場合は

フォントファイル
「font-awesome-4.4.0 > fonts > FontAwesome.otf」
をインストール後
http://fortawesome.github.io/Font-Awesome/cheatsheet/
から好きなフォントをコピーしてから書体を「Font-Awesome」に変更する。
(書体変更前は文字化けしますがそれでOKです。書体変更後にアイコンが表示されます。)

例■

メールアイコン を使用する場合は

  1. http://fortawesome.github.io/Font-Awesome/cheatsheet/ 画面から
    fa-envelope-o [&#xf003;] を探す
  2. ↑メールアイコン自体をコピー
  3. Illustratorの文字ツールでペースト
  4. 文字ツールでフォントを「Font-Awesome」に変更する。

よく使うアイコン : http://goo.gl/jTvmYC
参考 : http://goo.gl/Lhmm6P

No.917
02/12 17:33

edit

Bootstrap
illustrator

ブラウザごとの差異をリセットするCSSデフォルト(reset.css)の設定

ブラウザごとの表示の差をなくすために下記のようなリセットをするCSSを最初に読み込ませるといいです。(おすすめ順)
厳密には
・正規化するCSS(ブラウザの違いだけを揃えるCSS「normalize.css」「sanitize.css」)
・リセットするCSS(全てのスタイルを一旦リセットするCSS「eric meyer reset css 2.0」)
という違いがありますが、どれか1つを選んでhtmlの最初に読み込ませるという点では同じです。

● Normalize.css(GitHubやBootstrapで採用されています。オススメ)

https://necolas.github.io/normalize.css/

● sanitize.css

http://10up.github.io/sanitize.css/

● eric meyer reset css 2.0

http://meyerweb.com/eric/tools/css/reset/

No.4
03/23 21:00

edit

Bootstrap
検索エンジン
css