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;
}