Bootstrap ざっと全容把握
Bootstrapとは?
the world’s most popular framework for building responsive, mobile-first sites
要は結構有名なCSS framework
frameworkと、design pattern (atomic designとか)
Design pattern is a category of patterns that deals with object oriented software. ... It is a large entity comprising of several design patterns. Frameworks are concerned with specific application domain e.g. database, web application etc.
frameworkとは、 a reusable set of libraries or classes for a software system (or subsystem)
デザインパターンがカテゴリー(atomic designとか)で、frameworkは実際に使えるもの。
つまり、
the world’s most popular framework for building responsive, mobile-first sites
レスポンシブなサイトを作れるものってこと
how to download
Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.
Package managers
$ npm install bootstrap@4.0.0-beta.3
$ gem install bootstrap -v 4.0.0.beta3
$ composer require twbs/bootstrap:4.0.0-beta.3
Compiled CSS and JS ( すでに圧縮されたファイル ) ← GHJはこれで入れてた。
- Source files ( Sass compiler と、Autoprefixer が必要 )
-
css only
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
js, Popper.js, jQuery
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
Popper.js とは
様々な動きの制御が簡単にできるライブラリ
結構細かく読み込むファイルをわけられる
- https://getbootstrap.com/docs/4.0/getting-started/contents/#css-files
- https://getbootstrap.com/docs/4.0/getting-started/contents/#js-files
Official Themes がある
toolkits built on Bootstrap with new components and plugins, docs, and build tools.
Starter template
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script> </body> </html>
Support Browser
- mobileだと、Windows10 mobile 以外はだいたいsupport, operaとかはsupportしていない。
- desktop だと、ほとんどのbrowserをsupportしている
Layout
- Overview
- Containers
- Responsive breakpoints
- Z-index
- Grid system
- Grid options
- Auto-layout columns
- Responsive classes
- Alignment
- Reordering
- Nesting
- Sass mixins
- Media object
Components
- Alerts
- Badge
- Breadcrumb
- Buttons
- Button group
- Card
- Carousel
- Collapse
- Dropdowns
- Forms
- Input group
- Jumbotron
- List group
- Modal
- Navs
- Navbar
- Pagination
- Popovers
- Progress
Content
端的に言うとデフォルトのhtml にstyleが当たるもの。normalized.cssのbootstrap版みたいな感じ。
- Reboot
- Typography
- Code
- Images
- Tables
- Figures
Utilities
- Borders
- Clearfix
- Close icon
- Colors
- Display
- Embed
- Flex
- Float
- Image replacement
- Position
- Screenreaders
- Sizing
- Spacing
- Text
- Vertical align
- Visibility
Examples
実際にbootstrapを使ったprojectを見ることができる
- https://getbootstrap.com/docs/4.0/examples/starter-template/
- https://getbootstrap.com/docs/4.0/examples/jumbotron/#
- https://getbootstrap.com/docs/4.0/examples/grid/
まとめ・感想
- ドキュメントがしっかりしてて、わかりやすい。sampleのprojectとか、themeも売ってたりして完成形のデザインがなんとなくわかる。
- 細かく、downloadする部分を分けて入れられるので、本当に必要な部分だけ入れるみたいなことができそう。