table固定系追加180723

js読み込み

<script src="common/libs/Theadfixed/jquery.smTheadfixed.js"></script>

<table class="tblCommonA fixThead">
    <thead>
        <tr>
            <th class="w2">付与</th>
            <th>ロール名</th>
            <th class="w5">優先度</th>
        </tr>
    </thead>    
        <tbody>
        <tr>
        <td class="w2 text-center"><input type="checkbox" class="" id="" name="" value="0" checked=""></td>
        <td>サプライヤ管理者</td>
        <td class="text-center w5"><button type="button" class="btn btn-outline-secondary btn-sm"><i class="fe fe-chevron-up"></i></button><button type="button" class="btn btn-outline-secondary btn-sm"><i class="fe fe-chevron-down"></i></button></td>
        </tr>
        <tr>
        <td class="w2 text-center"><input type="checkbox" class="" id="" name="" value="0" checked=""></td>
        <td>管理部</td>
        <td class="text-center w5"><button type="button" class="btn btn-outline-secondary btn-sm"><i class="fe fe-chevron-up"></i></button><button type="button" class="btn btn-outline-secondary btn-sm"><i class="fe fe-chevron-down"></i></button></td>
        </tr>
        <tr>
        <td class="w2 text-center"><input type="checkbox" class="" id="" name="" value="0" checked=""></td>
        <td>山田太郎</td>
        <td class="text-center w5"><button type="button" class="btn btn-outline-secondary btn-sm"><i class="fe fe-chevron-up"></i></button><button type="button" class="btn btn-outline-secondary btn-sm"><i class="fe fe-chevron-down"></i></button></td>
        </tr>
    </tbody>
</table>

float系追加180720

<div class="clearfix">
<p class="float-right">右回りこみ</p>
<p class="float-left">左回りこみ</p>
</div>

ツールチップ追加180720

<i class="fe fe-help-circle js-tooltip"><span class="js-tooltip-contents">ここにツールチップの内容が表示されますここにツールチップの内容が表示されますここにツールチップの内容が表示されます</span></i>

toggle汎用版追加180720

<i class="fe fe-help-circle js-toggle"></i>
<div class="js-toggle-contents">ここに内容が表示されます</div>  

ローディング

<div class="bouncing-loader">
<div></div>
<div></div>
<div></div>
</div>

TABLEでフォーム組んでいく例

<form class="">
<table class="tblCommonA spModeVertical">
<tbody>
<tr>
<th>ショップ<sup class="red">※</sup></th>
<td>
<select title="ショップ" class="js-example-basic-single" id="shopId" name="shopId" tabindex="-1">
<option value="">全てのショップ</option>

<option value="3">
00000000:ロコンド
</option>

<option value="594">
ASV0650DC:ASVP WORK
</option>

<option value="323">
TEST001:ロコンドテスト
</option>
</select>
</td>
</tr>

<tr>
<th>商品コード</th>
<td>
<label class="">
<input class="" type="radio" name="searchCommodityCodeBySingle" value="true" checked="checked">
<span class="">完全一致</span> <span class="caution"> [13桁]</span>
</label>
<input type="text" id="commodityCode" name="commodityCode" maxlength="13" >
<hr>
<label class="">
<input class="" type="radio" name="searchCommodityCodeBySingle" value="false">
<span class="">前方一致</span> <span class="caution">[13桁]</span>
</label>
<input type="text" id="fromCommodityCode" name="fromCommodityCode" maxlength="13" disabled="" class=""> 〜
<input type="text" id="toCommodityCode" name="toCommodityCode" maxlength="13" disabled="" class="">
</td>
</tr>

<tr>
<th>SKUコード</th>
<td>
<input type="text" name="skuCodeListString" maxlength="169">
<span class="caution">※カンマ区切りで、10個まで指定可</span>
</td>
</tr>

<tr>
<th>販売価格</th>
<td>
<input type="text" class="number" name="fromUnitPrice" maxlength="8">
<span class="caution">[8桁]</span> 〜
<input type="text" class="number" name="toUnitPrice" maxlength="8">
<span class="caution">[8桁]</span>
</td>
</tr>

<tr>
<th>販売開始日時 </th>
<td>
<input type="text" name="fromSaleStartDatetimeString" maxlength="10" class="datepicker" id="dp1530780695565">
<select name="fromSaleStartDatetimeTime" class="">
<option value="">--</option>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
〜
<input type="text" name="toSaleStartDatetimeString" maxlength="10" class="datepicker" id="dp1530780695566">
<select name="toSaleStartDatetimeTime">
<option value="">--</option>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select><br>
<span class="caution">※日付は、「YYYYMMDD」か「YYYY/MM/DD」形式で入力してください</span>
</td>

</tr>
<tr>
<th>適用期間</th>
<td>
<label for="saleStatuses_0" class="">
<input type="checkbox" class="" id="saleStatuses_0" name="saleStatuses" value="0" checked="">
<span class="">予約期間</span>
</label>
<label for="saleStatuses_1" class="">
<input type="checkbox" class="" id="saleStatuses_1" name="saleStatuses" value="1">
<span class="">販売期間</span>
</label>
<label for="saleStatuses_2" class="">
<input type="checkbox" class="" id="saleStatuses_2" name="saleStatuses" value="2">
<span class="">期間外</span>
</label>
</td>
</tr>

<tr>
<th>在庫状況</th>
<td>
<select name="stockStatus">
<option value="">指定なし</option>
<option value="0">在庫なし</option>
<option value="1">在庫あり</option>
</select>
</td>
</tr>

<tr>
<th>商材タイプ</th>
<td>
<select name="commercialType">
<option value="">すべて</option>
<option value="0">LD</option>
<option value="1">LT</option>
<option value="2">LS</option>
<option value="3">LP</option>
</select>
</td>
</tr>

<tr>
<th>BOEM限定販売商品</th>
<td>
<label for="disableLocondo_1" class="">
<input type="checkbox" class="" name="disableLocondo" id="disableLocondo_1" value="1">
<span class="">BOEM限定販売</span>
</label>
</td>
</tr>

<tr>
<th>自由記入欄</th>
<td>
<textarea name="" id="" cols="30" rows="10"></textarea>
</td>
</tr>

<tr>
<th>画像アップロード</th>
<td>
<input type="file" name="topicsImage" id="topicsImage" accept="image/*">
</td>
</tr>

</tbody>
</table>

<div class="btn-list text-right">
<input type="hidden" id="pageSize" name="pageSize">
<input type="hidden" id="pageNumber" name="pageNumber">
<input type="hidden" name="maxPageNumber" id="maxPageNumber">
<input type="submit" value="検索する" onclick=""  class="btn btn-primary">
</div>

</form>

情報量が多い表の場合はスクロールがでます。

<div class="scrollwrap">
<table class="tblCommonA">

<th>ブランド
<th>SKUコード<hr>
JANコード<hr>
ロコンドSKU
</th>
<th>上代<hr>
卸価格
</th>
<th>受注数
</th>
<th>発注数
出荷数

</th>
<th>振分在庫数
フリー在庫数
</th>          
</tr>
</thead>

<tr>
△△△△<hr>□□□□□□</td>
123456<hr>
4623643232332335<hr>
MO906BW11970131
</td>
<td>
10000
<td>
<td>0<hr>
0<hr>
0
</td>
<td>
10
<tr>
<td>△△△△<hr>□□□□□□</td>
123456<hr>
4623643232332335<hr>
MO906BW11970131
</td>
<td>
10000<hr>
10,000
</td>
<td><input type="text" class="small-form"></td>
<td>0<hr>
0<hr>
0
</td>
<td>
10<hr>
2
</td>
</tr>
△△△△<hr>□□□□□□</td>
<td>123456
MO906BW11970131
</td>
<td>
10000<hr>
10,000
</td>
<td><input type="text" class="small-form"></td>
<td>0<hr>
0<hr>
0
</td>
<td>
10
2
</td>
</tr>
<tr>
<td>△△△△□□□□□□</td>
<td>123456<hr>
4623643232332335<hr>
MO906BW11970131
</td>
<td>
10000<hr>
10,000
</td>
<input type="text" class="small-form"></td>
<td>0<hr>
0
10<hr>
2
</td>
</tr>
</tbody>
</table>
</div>

フォームエレメンツ

select

<select class="">
<option value="">全てのショップ</option>
<option>北海道</option>
<option>青森県</option>
<option>岩手県</option>
<option>宮城県</option>
<option>秋田県</option>
<option>山形県</option>
</select>

inputフォーム

<input type="text" name="" placeholder="">

Textarea

<textarea name="" rows="6" placeholder=""></textarea>

Radio

<label>
<input type="radio" name="example-radios" value="option1" checked="">
選択肢 1
</label>
<label class="">
<input type="radio" name="example-radios" value="option2">
選択肢 2
</label>
<label class="">
<input type="radio" name="example-radios" value="option3">
選択肢 3
</label>

Checkbox

<label>
<input type="checkbox" name="example-checkbox1" value="option1" checked="">
選択肢 1
</label>
<label>
<input type="checkbox" name="example-checkbox2" value="option2">
選択肢 2
</label>
<label>
<input type="checkbox" name="example-checkbox3" value="option3" disabled="">
選択肢 Disabled
</label>
<label>
<input type="checkbox" name="example-checkbox4" value="option4" checked="" disabled="">
選択肢 Disabled Checked
</label>

備考

<tbody>
<tr>
<th>見出し</th>
<td><input type="text" class="block"></td>
</tr>

<th>見出し</th>
<input type="text" class="sp-block"></td>
</tr>
<tr>
見出し</th>
<input type="text" class="small-form"></td>
</tr>
</tbody>
</table>

SELECT2

マルチ（JavaScriptオプション）

マルチ（HTML属性）

HTML

<select class="js-example-basic-single" style="width: 250px">
  <option value="">全てのショップ</option>
  <option>北海道</option>
  <option>青森県</option>
  <option>岩手県</option>
  <option>宮城県</option>
  <option>秋田県</option>
  <option>山形県</option>
</select>

<h3>マルチ（JavaScriptオプション）</h3>
<select class="js-example-basic-multi" style="width: 250px">
  <option>全て</option>
  <option>北海道</option>
  <option>青森県</option>
  <option>岩手県</option>
  <option>宮城県</option>
  <option>秋田県</option>
  <option>山形県</option>
  <option>福島県</option>
  <option>茨城県</option>
  <option>栃木県</option>
  <option>群馬県</option>
  <option>埼玉県</option>
  <option>千葉県</option>
  <option>東京都</option>
</select>
<h3>マルチ（HTML属性）</h3>
<select class="js-example-basic-multi2" style="width: 250px" multiple>
  <option>北海道</option>
  <option>青森県</option>
  <option>岩手県</option>
  <option>宮城県</option>
  <option>秋田県</option>
  <option>山形県</option>
  <option>福島県</option>
  <option>茨城県</option>
  <option>栃木県</option>
  <option>群馬県</option>
  <option>埼玉県</option>
  <option>千葉県</option>
  <option>東京都</option>
</select>

js

$('.js-example-basic-single').select2();

$('.js-example-basic-multi').select2({
        placeholder: "都道府県を選択",
        multiple: true
        });

$('.js-example-basic-multi2').select2({placeholder: "都道府県を選択"});

備考

datepickerの使用例

Date:

HTML

<input type="text" class="datepicker">

js

$( '.datepicker' ).datepicker();

備考

DataTableの使用例

HTML

<table id="example" class="display">
<thead>
<tr>
  <th>Name</th>
  <th>Position</th>
  <th>Office</th>
  <th>Age</th>
  <th>Start date</th>
  <th>Salary</th>
</tr>
</thead>
<tbody>
  <tr>
  <td>Tiger Nixon</td>
  <td>System Architect</td>
  <td>Edinburgh</td>
  <td>61</td>
  <td>2011/04/25</td>
  <td>$320,800</td>
</tr>
・・・
</tbody>
<tfoot>
<tr>
  <th>Name</th>
  <th>Position</th>
  <th>Office</th>
  <th>Age</th>
  <th>Start date</th>
  <th>Salary</th>
</tr>
</tfoot>
</table>

js

$('#example').DataTable({fixedHeader: true});

備考

Modalの使用例

HTML

<button type="button" class="btn btn-primary" data-remodal-target="modal">ボタンから呼び出す</button>

<div class="remodal" data-remodal-id="modal">
    <button data-remodal-action="close" class="remodal-close"></button>
    <h1>Remodal</h1>
    <p>
      Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
    </p>
    <br>
    <button data-remodal-action="cancel" class="btn btn-secondary">Cancel</button>
    <button data-remodal-action="confirm" class="btn btn-primary">OK</button>
</div>

備考

ちなみにアンカーから呼び出すこともできます

Fancy Boxの使用例

HTML

<a class="fancybox" href="common/img/DUMMY/bnr_150x150.png"><img src="common/img/DUMMY/bnr_150x150.png" alt=""/></a>

js

$('.fancybox').fancybox();

備考

タブメニューの使用例

HTML

<div class="js-tab">
  <div class="active">タブその1</div>
  <div class="">タブその2</div>
  <div class="">タブその3</div>
  <div class="">タブその4</div>
</div>
<div class="js-tab_content active">
  <p>タブ内容1</p>
</div>

<div class="js-tab_content">
  <p>タブ内容2</p>
</div>

<div class="js-tab_content">
  <p>タブ内容3</p>
</div>

<div class="js-tab_content">
  <p>タブ内容4</p>
</div>

js

fn.tabMenu($('.js-tab > div'),$('.js-tab_content'));

備考

ボタン関連

通常のボタン

<a href="#" class="btn btn-primary" role="button">Link</a>
<button class="btn btn-primary">Button</button>
<input type="button" class="btn btn-primary" value="Input" />
<input type="submit" class="btn btn-primary" value="Submit" />
<input type="reset" class="btn btn-primary" value="Reset" />

ボタンのバリエーション

<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-secondary">Secondary</a>
<a href="#" class="btn btn-success">Success</a>
<a href="#" class="btn btn-info">Info</a>
<a href="#" class="btn btn-warning">Warning</a>
<a href="#" class="btn btn-danger">Danger</a>
<a href="#" class="btn btn-link">Link</a>

disabled時のボタンのバリエーション

<a href="#" class="btn btn-primary disabled">Primary</a>
<a href="#" class="btn btn-secondary disabled">Secondary</a>
<a href="#" class="btn btn-success disabled">Success</a>
<a href="#" class="btn btn-info disabled">Info</a>
<a href="#" class="btn btn-warning disabled">Warning</a>
<a href="#" class="btn btn-danger disabled">Danger</a>

その他ボタンのバリエーション

<a href="#" class="btn btn-outline-primary">Primary</a>
<a href="#" class="btn btn-outline-secondary">Secondary</a>
<a href="#" class="btn btn-outline-success">Success</a>
<a href="#" class="btn btn-outline-info">Info</a>
<a href="#" class="btn btn-outline-warning">Warning</a>
<a href="#" class="btn btn-outline-danger">Danger</a>

btn-blockをつけると幅いっぱいのボタンになる例

<button type="button" class="btn btn-primary btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-block">Block level button</button>

アイコン付きのボタン例

<div class="btn-list">
<button type="button" class="btn btn-dark"><i class="fe fe-upload"></i>Upload</button>
<button type="button" class="btn btn-warning"><i class="fe fe-heart"></i>I like</button>
<button type="button" class="btn btn-success"><i class="fe fe-check"></i>I agree</button>
<button type="button" class="btn btn-outline-primary"><i class="fe fe-plus"></i>More</button>
<button type="button" class="btn btn-danger"><i class="fe fe-link"></i>Link</button>
<button type="button" class="btn btn-info"><i class="fe fe-message-circle"></i>Comment</button>
</div>

ボタン組み合わせ例

<div class="btn-list">
<a href="#" class="btn btn-success">Save changes</a>
<a href="#" class="btn btn-secondary">Save and continue</a>
<a href="#" class="btn btn-danger">Cancel</a>
</div>

ボタン組み合わせ例（センター揃え）

<div class="btn-list text-center">
<a href="#" class="btn btn-primary">Save changes</a>
<a href="#" class="btn btn-secondary">Save and continue</a>
</div>

ボタンサイズ小

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

文字組み関連

h1.空前の「メダカ」ブーム、価格高騰の背景に品種改良

メダカといえば、小川や田んぼのそこかしこで捕れ、買っても1匹十数円だったもの。ところが最近は、1匹1万円以上もする“高級メダカ”が登場するほどのブームになっているとか。なぜ、これほど人気が上がったのか？　知られざるメダカの世界を紹介しよう。

h2.人気の品種は「楊貴妃」や「幹之」

ぼくがメダカを飼い始めた12年前は、正直、同僚にメダカを飼っているのを告白するのが恥ずかしいぐらい、飼っている人は少なかったんです。しかし、ここ3～4年で確実に飼育者数は増えています」

h3.メダカの品種

• ブラックスモールアイメダカ
• ブラックスモールアイヒカリメダカ
• 黄金メダカ
• 黄金ヒカリメダカ

h4.オススメめだか

おすすめメダカを紹介します。

h5.黄金ラメメダカ

人気色｢黄金｣にラメが入った黄金ラメメダカです！

h6.メダカは可愛い

ブラックダイヤのような珍しい品種や人気品種の卵をネットオークションで売って副業にしている人も増えているという

※女性セブン2018年7月19・26日号

<h1 class="h1">h1.空前の「メダカ」ブーム、価格高騰の背景に品種改良と希少性</h1>
<p>メダカといえば、小川や田んぼのそこかしこで捕れ、買っても1匹十数円だったもの。ところが最近は、1匹1万円以上もする“高級メダカ”が登場するほどのブームになっているとか。なぜ、これほど人気が上がったのか？　知られざるメダカの世界を紹介しよう。</p>
<h2 class="h2">h2.人気の品種は「楊貴妃」や「幹之」</h2>
<p>ぼくがメダカを飼い始めた12年前は、正直、同僚にメダカを飼っているのを告白するのが恥ずかしいぐらい、飼っている人は少なかったんです。しかし、ここ3～4年で確実に飼育者数は増えています」</p>
<h3 class="h3">h3.メダカの品種</h3>
<ul>
<li>ブラックスモールアイメダカ</li>
<li>ブラックスモールアイヒカリメダカ</li>
<li>黄金メダカ</li>
<li>黄金ヒカリメダカ</li>
</ul>
<h4 class="h4">h4.オススメめだか</h4>
<p>おすすめメダカを紹介します。</p>
<h5 class="h5">h5.黄金ラメメダカ</h5>
<p>人気色｢黄金｣にラメが入った<strong>黄金ラメメダカ</strong>です！</p>
<h6 class="h6">h6.メダカは可愛い</h6>
<p>ブラックダイヤのような珍しい品種や人気品種の卵をネットオークションで売って副業にしている人も増えているという</p>
<p class="text-right"><small>※女性セブン2018年7月19・26日号</small></p>

<div class="box">
何か目立たせたい補足事項などはclass="box"をつける
</div> 

boxには下記バリエーションを用意しています。

テキストの寄せ

左寄せのテキスト

中央のテキスト

右寄せのテキスト

<p class="text-left">左寄せのテキスト</p>
<p class="text-center">中央のテキスト</p>
<p class="text-right">右寄せのテキスト</p>

グリッドシステム

4カラム

3カラム

2カラム

<h3>4カラム</h3>
<div class="col-pc-4">
    <div class="cols">990年7月に完成し、「日本一長い滑り台」として話題になった前橋市富士見町の「SUBARUふれあいの森 赤城」の木製ローラー滑り台が昨年6月以降、休止したままになっている。老朽化が進み、利用者がけがをする危険があるとして設置者の群馬県が休止を決めて約1年。修理費用は多額になるとみられ、再開のめどは立っていない。豊かな自然の中で子どもが楽しめる遊具だけに、再開を望む声が上がっている。</div>
    <div class="cols">県や、公園を管理する県森林組合連合会によると、滑り台のローラーや支えに使用される木材は年々、ゆがみやひび割れが進行した。修理しながら利用していたが、修復が必要な箇所が増え、県は昨年6月、休止に踏み切った。</div>
    <div class="cols">県緑化推進課は修理をどのように進めるかや、予算確保は見通しが立っていないと説明する。</div>
    <div class="cols">滑り台は赤城山南麓の観光の目玉として89年8月に着工した。全長380メートルで、当時県は「日本一長い滑り台」とアピール。開始初年度には約19万人を動員した。近年も大型連休や夏休みには家族連れでにぎわい、多い日には1日で100人以上の利用があったという。</div> 
</div>
<h3>3カラム</h3>
<div class="col-pc-3">
    <div class="cols">990年7月に完成し、「日本一長い滑り台」として話題になった前橋市富士見町の「SUBARUふれあいの森 赤城」の木製ローラー滑り台が昨年6月以降、休止したままになっている。老朽化が進み、利用者がけがをする危険があるとして設置者の群馬県が休止を決めて約1年。修理費用は多額になるとみられ、再開のめどは立っていない。豊かな自然の中で子どもが楽しめる遊具だけに、再開を望む声が上がっている。</div>
    <div class="cols">県や、公園を管理する県森林組合連合会によると、滑り台のローラーや支えに使用される木材は年々、ゆがみやひび割れが進行した。修理しながら利用していたが、修復が必要な箇所が増え、県は昨年6月、休止に踏み切った。</div>
    <div class="cols">県緑化推進課は修理をどのように進めるかや、予算確保は見通しが立っていないと説明する。</div>
</div>
<h3>2カラム</h3>
<div class="col-pc-2">
    <div class="cols">990年7月に完成し、「日本一長い滑り台」として話題になった前橋市富士見町の「SUBARUふれあいの森 赤城」の木製ローラー滑り台が昨年6月以降、休止したままになっている。老朽化が進み、利用者がけがをする危険があるとして設置者の群馬県が休止を決めて約1年。修理費用は多額になるとみられ、再開のめどは立っていない。豊かな自然の中で子どもが楽しめる遊具だけに、再開を望む声が上がっている。</div>
    <div class="cols">県や、公園を管理する県森林組合連合会によると、滑り台のローラーや支えに使用される木材は年々、ゆがみやひび割れが進行した。修理しながら利用していたが、修復が必要な箇所が増え、県は昨年6月、休止に踏み切った。</div>
</div>

4カラム×スマホ1カラム

<h3>4カラム　スマホ1カラム</h3>
<div class="col-pc-4 col-sm-1">
    <div class="cols">990年7月に完成し、「日本一長い滑り台」として話題になった前橋市富士見町の「SUBARUふれあいの森 赤城」の木製ローラー滑り台が昨年6月以降、休止したままになっている。老朽化が進み、利用者がけがをする危険があるとして設置者の群馬県が休止を決めて約1年。修理費用は多額になるとみられ、再開のめどは立っていない。豊かな自然の中で子どもが楽しめる遊具だけに、再開を望む声が上がっている。</div>
    <div class="cols">県や、公園を管理する県森林組合連合会によると、滑り台のローラーや支えに使用される木材は年々、ゆがみやひび割れが進行した。修理しながら利用していたが、修復が必要な箇所が増え、県は昨年6月、休止に踏み切った。</div>
    <div class="cols">県緑化推進課は修理をどのように進めるかや、予算確保は見通しが立っていないと説明する。</div>
    <div class="cols">滑り台は赤城山南麓の観光の目玉として89年8月に着工した。全長380メートルで、当時県は「日本一長い滑り台」とアピール。開始初年度には約19万人を動員した。近年も大型連休や夏休みには家族連れでにぎわい、多い日には1日で100人以上の利用があったという。</div> 
</div>

4カラム×スマホ2カラム

<div class="col-pc-4 col-sm-2 jsHeightCol4">
    <div class="cols">990年7月に完成し、「日本一長い滑り台」として話題になった前橋市富士見町の「SUBARUふれあいの森 赤城」の木製ローラー滑り台が昨年6月以降、休止したままになっている。老朽化が進み、利用者がけがをする危険があるとして設置者の群馬県が休止を決めて約1年。修理費用は多額になるとみられ、再開のめどは立っていない。豊かな自然の中で子どもが楽しめる遊具だけに、再開を望む声が上がっている。</div>
    <div class="cols">県や、公園を管理する県森林組合連合会によると、滑り台のローラーや支えに使用される木材は年々、ゆがみやひび割れが進行した。修理しながら利用していたが、修復が必要な箇所が増え、県は昨年6月、休止に踏み切った。</div>
    <div class="cols">県緑化推進課は修理をどのように進めるかや、予算確保は見通しが立っていないと説明する。</div>
    <div class="cols">滑り台は赤城山南麓の観光の目玉として89年8月に着工した。全長380メートルで、当時県は「日本一長い滑り台」とアピール。開始初年度には約19万人を動員した。近年も大型連休や夏休みには家族連れでにぎわい、多い日には1日で100人以上の利用があったという。</div> 
</div>

アラート

アラートはclass="contents"の外に記述してください。

<div class="alert alert-primary" role="alert">
This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
This is a success alert—check it out!
</div>
<div class="alert alert-info" role="alert">
This is a info alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
This is a warning alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
This is a danger alert—check it out!
</div>

<div class="alert alert-success">
<button type="button" class="close"></button>
アラートが出た時はこんな感じになるよ！
</div>

ステータス系

<span class="badge badge-success">success</span>
secondary</span>
  <span class="badge badge-info">info</span>
<span class="badge badge-warning">warning</span>
  <span class="badge badge-danger">danger</span>
<span class="badge badge-light">light</span>
  <span class="badge badge-dark">dark</span>