埼玉県富士見市にある針ケ谷コミュニティセンターのサイトです。針ケ谷コミュニティセンターは、子どもから高齢者まで、地域活動の中心として親しまれている施設です。

サンプルページ

bootstrap4.1 利用できます

https://getbootstrap.jp/docs/4.1/layout/overview/

 

fontawesome(free)使えます

https://fontawesome.com/icons?d=gallery&p=2&m=free

 

LIQUID PRESS カスタマイズマニュアル

icomoon

 

見出し

見出しテキスト見出しテキスト

見出しテキスト見出しテキスト

見出しテキスト見出しテキスト

見出しテキスト見出しテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

 

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

 

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出し テーブルのセル
見出し テーブルのセル
  • 午前9時から午後10時
  • 夜間利用のない時は午後5時閉館

 

ボタン

ボタンボタンボタンボタンボタンボタンボタンボタン大きめ小さめテーマカラー

 

メールフォームはこちら(中央)

メールフォームはこちら メールフォームはこちら

メールフォームはこちら

メールフォームはこちら

 

 

見出し(フォントサイズ)

見出し(h1)

見出し(h2)

見出し(h3)

見出し(h4)

見出し(h5)

見出し(h6)

 

アラート(.alert.bgcolor)

 

バッジ

バッジバッジバッジバッジバッジバッジバッジバッジテーマカラー

 

シャドウ

小さめの影

標準の影

大きめの影

画像

サムネイル

サムネイル

 

角丸

角丸

 

円

 

カラムレイアウト

コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ

カラムレイアウト(余白なし)

コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ

 

グリッドレイアウト

左右の幅は数値で変更できます。
この場合左側はcol-md-5、右側はcol-md-7になります。
col-md-12で100%になります。
画像はサイズに関係なくmax100%表示にしてくれます。
レスポンシブに対応しているので便利です。

 

上下を中央揃えにする場合は div class=”row align-items-center” で囲みます。
左右ともcol-md-6で幅50%になっています。

 

画像をPCで幅50%中央寄せ、スマホ100%の場合は.col-md-6 .mg-autoで囲みます。(画像はフルサイズ)

 

 

 

左側が3/1のレイアウト

左側が3/1の割合の場合
左側はcol-md-5、右側はcol-md-7にして
左側の画像を幅400px指定にして空白を設けています。
col-md-12で100%になります。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

 

右側が3/1でスマホで逆表示

こちらは表示を逆にした場合です。
rowに.reverseを追加すると、スマホの時 画像が先に表示されます。
右側の .col-md-5に .taRをつけて画像を右寄りにしています。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

 

テーブル

テキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキスト .block を追加でスマホ時に縦レイアウトになります。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

.table-responsive を適用すると常に水平スクロールを適用できます。

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 ああああああああああああああああ Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell

 

ボックス

.boxのデフォルトはパディング30pxです。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

 

.bgBeigeと組み合わせています。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

 

.bgGrayと組み合わせています。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

 

.shadowでシャドウボックスになります。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

 

パディング10pxの場合。pd05,pd10,pd15,pd20・・と組み合わせて変更できます。これは幅50%も組み合わせています。w10からw90まであります。

 

タブナビゲーション

タブ名タブ名タブ名
タブコンテンツ
タブコンテンツ
タブコンテンツ

 

アコーディオン

スポイラーのタイトル
非表示のコンテンツ
スポイラーのタイトル
非表示のコンテンツ
スポイラーのタイトル
非表示のコンテンツ