HOME > テンプレート

テンプレート

見出しh2

見出しh3

見出しh4

テキストテキストテキスト.t1

テキストテキストテキスト.t2

テキストテキストテキスト.t3

テキストテキストテキスト.t4

TEXTTEXTefont

代表者OOOOOO.明朝体

ストロングテキスト

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

MGMエムジーエム

  1. チェックリストチェックリスト
  2. チェックリストチェックリスト
  3. チェックリストチェックリスト

 

テーブル

フォーム

会社名  
代表取締役  
設立  
事業案内  

レスポンシブ

セル内の折り返しをしない

項目詳細テキストテキスト
項目詳細テキストテキスト詳細テキストテキスト
項目詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト
項目詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト
項目詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト

 

一番上の行と左端のthだけ折り返ししない

項目項目項目項目項目項目
項目詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト
項目詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト
項目詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト
項目詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト

 

ヘッダー付き

コース名 コース詳細
ライトコース26時間のライトコースです。26時間のライトコースです。
スタンダードコース48時間のスタンダードコースです。48時間のスタンダードコースです。
プロフェッショナルコース80時間のプロフェッショナルコースです。80時間のプロフェッショナルコースです
マンツーマンレッスン単発の完全マンツーマンレッスンです。単発の完全マンツーマンレッスンです
出張研修・コンサルティングお客様先で行う出張研修・コンサルティングです。お客様先で行う出張研修・コンサルティングです

 

コース名 コース詳細
ライトコース26時間のライトコースです。26時間のライトコースです。
スタンダードコース48時間のスタンダードコースです。48時間のスタンダードコースです。
プロフェッショナルコース80時間のプロフェッショナルコースです。80時間のプロフェッショナルコースです
マンツーマンレッスン単発の完全マンツーマンレッスンです。単発の完全マンツーマンレッスンです
出張研修・コンサルティングお客様先で行う出張研修・コンサルティングです。お客様先で行う出張研修・コンサルティングです

 

カード(元パネル)

今までのパネルに近い

タイトルタイトルタイトルタイトル
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト

 

質問 タイトルタイトルタイトルタイトル

答え テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

 

新しい例

プロフェッショナルコースのイメージ画像

背景色変更bg-light

テキストの色は変更していません。

btn-dark

 

申し訳ございません。
ただいま準備中につき、大変ご迷惑をおかけしております。
もうしばらくお待ちください。

 

colブレイクポイント

「-n」の「n」は数字が入ります。
今まで通り1~12で指定。

今までと大体同じところでレイアウトの切り替えをするとしたら、
col-xs-n=col-n
col-sm-n=col-md-n
col-md-n=col-lg-n
で使うのが今までの感覚と一番近いかと思います。

 

全幅適用

col-n

col-6

col-6

 

576px以上適用

col-sm-n

col-sm-6

col-sm-6

 

768px以上適用

col-md-n

col-md-6

col-md-6

 

992px以上適用

col-lg-n

col-lg-6

col-lg-6

 

1200px以上適用

col-xl-n

col-xl-6

col-xl-6

 

表示順変更

今まで
.col-md-8.col-md-push-4 .col-md-4 col-md-pull-8

新しい表示順変更
.col-md-8.order-md-2 .col-md-4.order-md-1

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

 

row、colの左右のmargin、paddingを無くしたいとき

「row」に「no-gutters」を追加します。
今まで「cs_row」で作っていたようなレイアウトが作成できると思います。

左右の間隔がなくなり横の要素とくっつきます。左右の間隔がなくなり横の要素とくっつきます。

左右の間隔がなくなり横の要素とくっつきます。

左右の間隔がなくなり横の要素とくっつきます。

 

リンク

 

タイムライン

  • 2007年2月

    テキストテキスト

    コメントコメントコメントコメントコメントコメントコメントコメント

  • 2007年2月

    テキストテキスト

    コメントコメントコメントコメントコメントコメントコメントコメント

  • 1968年8月

    コメントコメントコメントコメントコメントコメントコメントコメント

  • 1968年8月

    コメントコメントコメントコメントコメントコメントコメントコメント

  • 1968年8月

    コメントコメントコメントコメントコメントコメントコメントコメント

  • 1968年8月

    コメントコメントコメントコメントコメントコメントコメントコメント

  • 1968年8月

    コメントコメントコメントコメントコメントコメントコメントコメント

PAGE TOP