CSS追加と置換
BootstrapのCSSをオリジナルのCSSで置き換えと追加を行う。
この事例では、下記のリストを汎用型ul、liでオリジナルCSSを記述。
列数を自由に設定出来る汎用型で、下記例は列幅が均等ですが、列ごとに幅を自由に変更可。
詳しく知りたい方は、筆者のサイト → 汎用リスト表(ul li)
- お知らせ
- 掲示板
- ブログ
- 回覧板
- FAQ
- アンケート
- 登録フォーム
- TODO
HTMLタグ
<div class="list_flex list_flex_4col ">
<ul>
<li>お知らせ</li>
<li>掲示板</li>
<li>ブログ</li>
<li>回覧板</li>
</ul>
<ul>
<li>FAQ</li>
<li>アンケート</li>
<li>登録フォーム</li>
<li>TODO</li>
</ul>
</div>
変更ファイル:*/app/webroot/theme/Default/css/style.css
CSS
/* ========== List_Flex ========== */
ul, li {
list-style-type:none;
}
.list_flex{
width:100%%;}
.list_flex ul{
display: flex;
flex-wrap: wrap;}
.list_flex li {
/* width: 25%; %指定で列数を自由に設定可能 */
box-sizing: border-box;
padding-left:5px;}
.list_flex li:nth-child(n+1) {
border-top: 1px solid #000;}
.list_flex ul:last-child li {
border-bottom: 1px solid #000;}
.list_flex li:nth-child(n+1) {
border-left: 1px solid #000;}
.list_flex li:last-child {
border-right: 1px solid #000;}
.list_flex_4col li{width:25%;} /* 4列にする */
.list_flex_3col li{width:33%;} /* 3列にする */
/* ========== List_Flex Bootstrap置換 ========== */
ul{
margin-bottom:0;
padding-inline-start: 0px;
}