getstarted

運用方法はこちら必ず確認してください

インフラチームへのCORS設定依頼チケットの発行

bootstrapをサービスで参照するために、サービスのドメインを登録しておく必要があります。その登録作業はインフラチームで行っているため、インフラチームへ依頼してください。

こちら

CDN

1. 取り込む環境とバリエーションを選択してください
下の一覧に反映されます

環境

開発(Dev)

本番(PROD)

バリエーション

2. css・jsをそれぞれコピーしてください

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

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

<!--table-->
<link rel="stylesheet" href="https://dev-design-cmn-style.postas.asia/bootstrap/2.2.0/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://dev-design-cmn-style.postas.asia/bootstrap/2.2.0/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://dev-design-cmn-style.postas.asia/bootstrap/2.2.0/css/datepicker/bootstrap-material-datetimepicker.min.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="https://dev-design-cmn-style.postas.asia/bootstrap/2.2.0/css/timepicker/css/bootstrap-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://dev-design-cmn-style.postas.asia/bootstrap/2.2.0/css/multiselect/css/bootstrap-multiselect.css" type="text/css" media="screen" charset="utf-8">

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

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

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

color-set-sample.css

詳細はCOLOR-CUSTOMページを参照ください。

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

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

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

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

<!--select2-->
<script src="https://dev-design-cmn-style.postas.asia/bootstrap/2.2.0/js/node_modules/select2/dist/js/select2.full.min.js">
<script src="https://dev-design-cmn-style.postas.asia/bootstrap/2.2.0/js/node_modules/select2/dist/js/i18n/ja.js">

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

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

Download

DesignBootstrap