プログラムメモ

WEB制作（html, css)

トップに戻る

新規投稿
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
bootstrap-modal-demo.html ( 5.4 KBytes )　ダウンロード
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

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
アイコン

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

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

● normalize.css（GitHubやBootstrap3で採用されています。）

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

● Bootstrap4からは normalize.css をベースに reboot.css が採用されました

https://github.com/twbs/bootstrap/blob/v4-dev/scss/_reboot.scss

● ress.css

https://github.com/filipelinhares/ress

● sanitize.css

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

● eric meyer reset css 2.0

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

● modern-css-reset

モダンブラウザ向けの reset.css
https://github.com/hankchizljaw/modern-css-reset CDN 

<link rel="stylesheet" href="https://unpkg.com/modern-css-reset/dist/reset.min.css" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-css-reset/dist/reset.min.css" />
No.4
12/04 17:58

edit

Bootstrap
検索エンジン
css