bootstrap詳細(CSS)

1、引用

<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="jquery-3.2.1.min.js">script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js">script>

2、文書タイプ

HTML 5ドキュメントが必要です

3、モバイル機器優先

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

4、レイアウトコンテナ

ビューポートに基づいてコンテナボックスのサイズを決定し、コンテナボックスを中央に配置します.一般的なボックス幅=117 px

"container">
  ...

5、グリッドシステム

容器内の1行は12格子に分けられ、各行divのclass=“row”であり、各要素divがn格子を占める場合、class=“col-md-n”
holder.js自動生成1枚の図一時占有

    <div class="container">
        <h1>  h1>
        <div class="row">
            <div class="col-md-3">
                <img src="holder.js/100%x200" alt="">
            div>
            <div class="col-md-3">
                <img src="holder.js/100%x200" alt="">
            div>
            <div class="col-md-3">
                <img src="holder.js/100%x200" alt="">
            div>
            <div class="col-md-3">
                <img src="holder.js/100%x200" alt="">
            div>
        div>
        <div class="row">
            <div class="col-md-3">
                <img src="holder.js/100%x200" alt="">
            div>
            <div class="col-md-3">
                <img src="holder.js/100%x200" alt="">
            div>
            <div class="col-md-3">
                <img src="holder.js/100%x200" alt="">
            div>
            <div class="col-md-3">
                <img src="holder.js/100%x200" alt="">
            div>
        div>
        <div class="row">
            <div class="col-md-3">
                <img src="holder.js/100%x200" alt="">
            div>
            <div class="col-md-3">
                <img src="holder.js/100%x200" alt="">
            div>
            <div class="col-md-3">
                <img src="holder.js/100%x200" alt="">
            div>
            <div class="col-md-3">
                <img src="holder.js/100%x200" alt="">
            div>
        div>
 div>

col-lg-n:ビューポートが大きい()から折り返しcol-md-n:(推奨)col-sm-n:col-xs-n:ビューポートが小さいから折り返し始めます
col-md-offset-n:要素の左側にn個の格子が空いています
行に含まれる要素に12個以上の格子が含まれている場合は、改行

6、レイアウト

タイトル:.page-header段落:.lead
表:table:変表に縞がある.table-bordered:変格子.table-hover:マウスを上に移動
セルのスタイル:.success:緑.Active:グレー.info:青です.warning:黄色です.danger:赤

<table class="table table-bordered table-hover">
            <tr class="warning">
                <th>IDth>
                <th>   th>
                <th>  th>
            tr>
            <tr class="active">
                <td>111td>
                <td>111td>
                <td>111td>
            tr>
            <tr class="success">
                <td>111td>
                <td>111td>
                <td>111td>
            tr>
            <tr class="info">
                <td>111td>
                <td>111td>
                <td>111td>
            tr>
            <tr class="danger">
                <td>111td>
                <td>111td>
                <td>111td>
            tr>
      table>