代々木で働く19歳エンジニアのブログ

思ったこととか、技術的なこと書きます。

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 が必要 )
  • CDN(BootstrapCDN)

    • 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://popper.js.org/

結構細かく読み込むファイルをわけられる

Official Themes がある

dashboard-screenshot_2048x2048.jpg (90.7 kB)

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

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を見ることができる

まとめ・感想

reference from