getstarted

CDN

※ 開発環境の場合は、URLを置き換えてください。
本番：design-cmn-style.postas.asia
開発：dev-design-cmn-style.postas.asia

                        <!--bootstrap-->
<link rel="stylesheet" href="https://design-cmn-style.postas.asia/1.0.1/css/bootstrap/css/bootstrap.min.css" type="text/css" media="screen" charset="utf-8">

<!--fontawesome-->
<link rel="stylesheet" href="https://design-cmn-style.postas.asia/1.0.1/css/fontawesome-free/css/all.min.css" type="text/css" media="screen" charset="utf-8">

<!--table-->
<link rel="stylesheet" href="https://design-cmn-style.postas.asia/1.0.1/js/node_modules/datatables.net-dt/css/jquery.dataTables.min.css" type="text/css" media="screen" charset="utf-8">
<!--tableのexport機能（csv/pdfなど）を使用しない場合は不要-->
<link rel="stylesheet" href="https://design-cmn-style.postas.asia/1.0.1/js/node_modules/datatables.net-dt/css/buttons.dataTables.min.css" type="text/css" media="screen" charset="utf-8">

<!--datepicker/timepicker-->
<link rel="stylesheet" href="https://design-cmn-style.postas.asia/1.0.1/css/datepicker/bootstrap-material-datetimepicker.min.css" type="text/css" media="screen" charset="utf-8">
<!--datepicker/timepickerのアイコン表示用-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!--multiselect-->
<link rel="stylesheet" href="https://design-cmn-style.postas.asia/1.0.1/css/multiselect/css/bootstrap-multiselect.css" type="text/css" media="screen" charset="utf-8">

<!--custom-bootstrap-->
<link rel="stylesheet" href="https://design-cmn-style.postas.asia/1.0.1/css/custom-variables-bootstrap.css" type="text/css" media="screen" charset="utf-8">

テーマカラーを変更する場合

作成したcssファイルをcustom-variables-bootstrap.min.cssの後に読み込んでください。

                            :root {
      --primary: #5acfc9;
      --dark-primary: #437c8a;
      --light-primary: #16a39c;
      --navibar-hover: #197497;
      --navibar-child: #1e6779;
    }

                        <!--Bootstrap依存-->
<script language="javascript" type="text/javascript" src="https://design-cmn-style.postas.asia/1.0.1/js/node_modules/jquery/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="https://design-cmn-style.postas.asia/1.0.1/js/node_modules/popper.js/dist/umd/popper.min.js"></script>
<script language="javascript" type="text/javascript" src="https://design-cmn-style.postas.asia/1.0.1/js/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

<!--table-->
<script language="javascript" type="text/javascript" src="https://design-cmn-style.postas.asia/1.0.1/js/node_modules/datatables.net/js/jquery.dataTables.min.js"></script>
<!--tableのexport機能を使用しない場合は不要-->
<!--Save to XLSX file-->
<script language="javascript" type="text/javascript" src="https://design-cmn-style.postas.asia/1.0.1/js/node_modules/datatables.net/js/jszip.min.js"></script>
<!--Save to PDF file-->
<script language="javascript" type="text/javascript" src="https://design-cmn-style.postas.asia/1.0.1/js/node_modules/datatables.net/js/pdfmake.min.js"></script>
<!--Save to PDF file-->
<script language="javascript" type="text/javascript" src="https://design-cmn-style.postas.asia/1.0.1/js/node_modules/datatables.net/js/vfs_fonts.js"></script>
<!--export機能を使用するために必要-->
<script language="javascript" type="text/javascript" src="https://design-cmn-style.postas.asia/1.0.1/js/node_modules/datatables.net/js/dataTables.buttons.min.js"></script>
<!--export機能を使用するために必要-->
<script language="javascript" type="text/javascript" src="https://design-cmn-style.postas.asia/1.0.1/js/node_modules/datatables.net/js/buttons.html5.min.js"></script>
<!--fixed columnsオプションを使用しない場合は不要-->
<script language="javascript" type="text/javascript" src="https://design-cmn-style.postas.asia/1.0.1/js/node_modules/datatables.net/js/dataTables.fixedColumns.min.js"></script>
<!--row reorderオプションを使用しない場合は不要-->
<script language="javascript" type="text/javascript" src="https://design-cmn-style.postas.asia/1.0.1/js/node_modules/datatables.net/js/dataTables.rowReorder.min.js"></script>

<!--datepicker/timepicker-->
<script language="javascript" type="text/javascript" src="https://design-cmn-style.postas.asia/1.0.1/css/datepicker/moment.min.js"></script>
<script language="javascript" type="text/javascript" src="https://design-cmn-style.postas.asia/1.0.1/css/datepicker/bootstrap-material-datetimepicker-custom.min.js"></script>
<script language="javascript" type="text/javascript" src="https://design-cmn-style.postas.asia/1.0.1/css/datepicker/local/ja.js"></script>

<!--multiselect-->
<script language="javascript" type="text/javascript" src="https://design-cmn-style.postas.asia/1.0.1/css/multiselect/js/bootstrap-multiselect.js"></script>

<!--alert-->
<script type="text/javascript" src="https://design-cmn-style.postas.asia/1.0.1/js/node_modules/sweetalert_2.1.2/docs/assets/sweetalert/sweetalert.min.js"></script>
<script type="text/javascript" src="https://design-cmn-style.postas.asia/1.0.1/js/node_modules/sweetalert_2.1.2/my_sweetalert.js"></script>

<!--tabulator-->
<script language="javascript" type="text/javascript" src="https://design-cmn-style.postas.asia/bootstrap/1.0.1/js/tabulator/tabulator.min.js"></script>

<!--共通-->
<script language="javascript" type="text/javascript" src="https://design-cmn-style.postas.asia/1.0.1/js/common.js"></script>

Download

DesignBootstrap