search

hysryt / wiki

https://hysryt.github.io/wiki/
0 stars 0 forks source link

Bootstrap4 #12

Open hysryt opened 6 years ago

hysryt commented 6 years ago

インストール

$ npm install bootstrap jquery popper.js

bootstrap、jquery、popper.jsをインストール （2017/01/18 Bootstrap4安定版リリース）

もととなるスクリプトファイルの作成

$ vi script.js
/* script.js */
window.$ = require('jquery');
window.Popper = require('popper.js');
require('bootstrap');

browserifyでスクリプトファイルを一つにまとめる

$ mkdir js
$ browserify script.js > js/script.js

HTMLファイルから読み込み

<html>
  <head></head>
  <body>
    <script src="js/script.js"></script>
  </body>
</html>
hysryt commented 6 years ago

Peer Dependencies について

https://nodejs.org/uk/blog/npm/peer-dependencies/

hysryt commented 6 years ago

Sass

CSSファイル

https://qiita.com/jkawamoto/items/415576fea98f3c61edf9

Bootstrap4変更点

https://www.willstyle.co.jp/blog/960/

hysryt commented 6 years ago

Install

$ mkdir my && cd my
$ npm init -y
$ npm install bootstrap@4.0.0-beta.2
$ npm install jquery popper.js

新しくnpmパッケージを作成し、bootstrap4をインストール bootstrap@4.0.0-beta.2はjquery、popper.jsに依存しているため、一緒にインストール

sassのエントリポイントはnode-modules/bootstrap/scss/bootstrap.scss コンパイル後のCSSはnode-modules/bootstrap/dist/css/bootstrap.css

hysryt commented 6 years ago

_variables.scss

bootstrapで使用する変数が定義されているファイル ほぼ全ての変数に!defaultフラグが付与されている !defaultはすでに定義されている場合は上書きしないというフラグ そのため、変数の値をカスタマイズしたい場合はbootstrap.scssを読み込む前に変数値を定義しておく

hysryt commented 6 years ago

Carousel

data-ride="carousel"をつけると自動でページ送りされる

<div id="garally" class="carousel slide" data-ride="carousel">
  ...
</div>

ページ送りのインターバルを変える場合はdata-interval指定する デフォルトは5000ミリ秒

<div id="garally" class="carousel slide" data-ride="carousel" data-interval="1000">
  ...
</div>
hysryt commented 6 years ago

bootstrap-datepicker

日付入力フォーム https://github.com/uxsolutions/bootstrap-datepicker

$ npm install bootstra-datepicker

script.js

require('bootstrap-datepicker');
require('./node_modules/bootstrap-datepicker/dist/locales/bootstrap-datepicker.ja.min.js');

$(function() {
  $('input').datepicker({
    language: 'ja'
  });
});

style.scss

@import './node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css';

bootstrap-datepicker.cssではなく bootstrap-datepicker3.css