モバイルレイアウト用のブートストラップ

その他 2021-03-27 23:24:54 訪問数: null

レスポンシブ原則

使用媒体查询针对于不同宽度的设备进行样式和布局的设置，从而适应不同的设备

機器の分割

  • 768画面未満（携帯電話）
  • 768〜992の小画面デバイス（タブレット）
  • 992〜1200中画面（デスクトップモニター）
  • 1200を超えるワイドスクリーンデバイス（大型デスクトップモニター）

注：Responsiveでは、より多くの効果を実現するために、子要素と連携するためのコンテナーとして親要素が必要です。

親コンテナの中心のサイズ

  • 超小型画面（携帯電話、768px未満）：幅を100％に設定
  • 小さい画面（タブレット、768px以上）：幅を750pxに設定します
  • 中画面（デスクトップモニター、992px以上）：幅は970pxに設定されています
  • 大画面（大画面モニター、1200px以上）：幅は1170pxに設定されています
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            width: 100%;
            height: 50px;
            margin: 0 auto;
            text-align: center;
            line-height: 50px;
        }
        /* max-width:767 */
        
        @media screen and (max-width: 767px) {
            .container {
                width: 100%;
                background-color: blue;
            }
        }
        /* min-width:768px */
        
        @media screen and (min-width: 768px) {
            .container {
                width: 750px;
                background-color: brown;
            }
        }
        /* min-width:970px */
        
        @media screen and (min-width: 992px) {
            .container {
                width: 970px;
                background-color: yellow;
            }
        }
        /* min-width:1200px */
        
        @media screen and (min-width:1200px) {
            .container {
                width: 1170px;
                background-color: purple;
            }
        }
    </style>
</head>

<body>
    <div class="container">尧子陌</div>
</body>

</html>

ここに画像の説明を挿入

ナビゲーションバーケース

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 常规尺寸 */
        
        .container {
            width: 600px;
            height: 40px;
            margin: 0 auto;
        }
        
        ul {
            list-style: none;
        }
        
        ul li {
            float: left;
            width: 100px;
            height:40px;
            line-height: 40px;
            text-align: center;
            font-weight: 700;
            background-color: gray;
        }
        
        li:hover {
            background-color: green;
        }
        /* min-width:900px */
        
        @media screen and (min-width: 900px) {
            .container {
                width: 900px;
                background-color: pink;
            }
            ul li {
                width: 33.3%;
            }
        }
        /* min-width:1200px */
        
        @media screen and (min-width: 1200px) {
            .container {
                width: 100%;
                background-color: pink;
            }
            ul li {
                width: 33.3%;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <ul>
            <li>阿里</li>
            <li>腾讯</li>
            <li>京东</li>
            <li>拼多多</li>
            <li>淘宝</li>
            <li>闲鱼</li>
        </ul>
    </div>
</body>

</html>

ここに画像の説明を挿入

bootstarp

ブートストラップの概要

BootstrapはTwitter（Twitter）から提供されており、現在最も人気のあるフロントエンドフレームワークです。Bootstrapは、HTML、CSS、JAVASCRIPTに基づいています。シンプルで柔軟性があり、Web開発を高速化します。

公式サイト：www.bootcss.com/

フレームワーク：名前が示すように、これはアーキテクチャのセットです。Webページの機能ソリューションの比較的完全なセットがあり、コントロールはフレームワーク自体にあり、事前に作成されたスタイルライブラリ、コンポーネント、およびプラグインがあります。ユーザーは、フレームワークで規定された特定の仕様に従って開発する必要があります。

Bootstarpの利点

  • 標準化されたhtml + cssコーディング標準
  • 簡潔で直感的で強力なコンポーネントのセットを提供します
  • 独自のエコシステムを持ち、絶えず更新して反復する
  • 開発を容易にし、開発の効率を向上させる

bootstarpの使用

1.フォルダ構造を作成します2.HTML構造を
ここに画像の説明を挿入
作成します


<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

3.関連するスタイルファイルを紹介します

<!-- Bootstrap 核心样式-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

4.コンテンツを書く

  • Bootstrapの事前定義されたスタイルを直接使用する

  • Bootstrapの元のスタイルを変更し、重量の問題に注意してください

  • Bootstrapをよく学ぶための鍵は、Bootstrapが定義するスタイルと、これらのスタイルが実現できる効果を知ることです。

Bootstarpケース

<!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="./bootstrap/css/bootstrap.min.css">

    <title>Hello, world!</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        form {
            width: 600px;
            margin: auto;
        }
    </style>
</head>

<body>

    <form>
        <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">

        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1">
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Check me out</label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</body>

</html>

ここに画像の説明を挿入

注：bootstarpで定義されたクラスを直接使用して直接使用できます

Bootstarpのレイアウトコンテナ

ブートストラップは、ページコンテンツとグリッドシステム用に.containerまたは.container-fluidコンテナをラップする必要があります。この目的のために2つのクラスを提供します。

。コンテナ

  • レスポンシブレイアウトのコンテナの固定幅
  • 超小型画面（100％）
  • 小さい画面（768px以上）、幅は750pxに設定されます。
  • 中画面（992px以上）、幅は970pxに設定されています
  • 大画面（1200px以上）、幅は1170pxに設定されています

.container-fluid

  • 100％幅を占めるフローレイアウトコンテナ
  • ビューポート全体を占めるコンテナ。
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstarp容器的使用</title>
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            color: white;
            font-weight: bolder;
            background-color: purple;
            text-align: center;
            margin-bottom: 60px;
        }
        
        .container-fluid {
            color: white;
            font-weight: bolder;
            background-color: purple;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container">container</div>
    <div class="container-fluid">container-flued</div>

</body>

</html>

ここに画像の説明を挿入

グリッドシステム

グリッドシステムは、一連の行と列の組み合わせによってページレイアウトを作成し、コンテンツはこれらの作成されたレイアウトに配置できます

ここに画像の説明を挿入

  • 異なる画面に応じて1〜12等分します
  • 行は親コンテナの15pxのマージンを削除できます
  • col-xs：超小; col-sm：小; col-md：中; col-lg：大;
  • 列（列）が12より大きい場合、追加の「列」の要素は全体として新しい行に配置されます
  • 各列には、デフォルトで左右に15ピクセルのパディングがあります
  • コピー数を分割するために、1つの列に複数のデバイスのクラス名を同時に指定できます。たとえば、class = "col-md-4col-sm-6"のようになります。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!--[if lt IE 9]>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
   <![endif]-->

    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            color: black;
            font-weight: 700;
            height: 40px;
            padding: 0;
            text-align: center;
            line-height: 40px;
        }
        
        div[class^=col] {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="container">

        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">1</div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">2</div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">3</div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">4</div>
        </div>

    </div>
</body>

</html>

ここに画像の説明を挿入

グリッドシステムの他の状況

  • グリッドシステムは正確に12コピーであり、親コンテナの幅全体を占めます。
  • グリッドシステムが12コピー未満の場合、それは親コンテナの幅よりも小さく、空白が残ります。
  • グリッドシステムが12コピーを超える場合、新しい行が開始されます。

グリッドシステムでの列のネスト

簡単に言えば、行を12の部分に分割することであり、各部分は1列に相当し、各列は12の等しい部分に分割できます。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->

    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            color: white;
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-weight: 700;
            background-color: purple;
        }
        
        .col-lg-3 {
            border-right: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-3">
                <div class="row">
                    <div class="col-lg-6">6份</div>
                    <div class="col-lg-6">6份</div>
                </div>
            </div>
            <div class="col-lg-3">2</div>
            <div class="col-lg-3">3</div>
            <div class="col-lg-3">4</div>
        </div>
    </div>

</body>

</html>

ここに画像の説明を挿入

列のネストでは、親要素のパディング値を削除できる行（行）を追加する必要があり、高さは自動的に親と同じ高さになります

グリッドシステムの列オフセット

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <!--[if lt IE 9]>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
   <![endif]-->

   <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
   <style>
       * {
           margin: 0;
           padding: 0;
       }
       
       .container {
           color: white;
           height: 40px;
           text-align: center;
           line-height: 40px;
           font-weight: 700;
       }
       
       .col-lg-3 {
           background-color: purple;
       }
   </style>
</head>

<body>
   <div class="container">
       <div class="row">
           <div class="col-lg-3">3份</div>
           <div class="col-lg-3  col-lg-offset-6">3份</div>
       </div>
   </div>

</body>

</html>

ここに画像の説明を挿入

オフセットスコア=（12コピー-現在の子要素が占めるスコア）

グリッドシステムでの列の並べ替え

.col-md-pushクラスと.col-md-pullクラスを使用すると、列の順序を簡単に変更できます。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->

    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            color: white;
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-weight: 700;
        }
        
        .col-md-3 {
            background-color: purple;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-3 col-md-push-3">左侧</div>
            <div class="col-md-3 col-md-pull-3">右侧</div>
        </div>
    </div>

</body>

</html>

ここに画像の説明を挿入

グリッドシステムのレスポンシブツール

メディアクエリ機能とツールを使用すると、さまざまなデバイスのページコンテンツを簡単に表示または非表示にできます。

ここに画像の説明を挿入

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->

    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">


    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            color: white;
            font-weight: 700;
            padding: 0;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }
        
        .col-lg-3 {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 hidden-md">3份</div>
            <div class="col-lg-3">3份</div>
            <div class="col-lg-3">3份</div>
            <div class="col-lg-3">3份</div>
        </div>
    </div>
</body>

</html

ここに画像の説明を挿入

非表示：非表示
表示：表示

おすすめ

転載: blog.csdn.net/weixin_45419127/article/details/110942052
おすすめ
ランキング
uni.request在接口状态码403等还是走success
Springboot は mybatisplus を統合しており、ページング クエリによって返される Page オブジェクトの合計は常に 0 です。
System.InvalidOperationExceptionが：「BuildWindowCoreは、子ウィンドウのハンドル搭乗を返しません。」
[Example 08] IPD system advancement: version naming rules for version management
カスタム NavigationBar -- UIView による描画
データとデータの移行を復元します（個人的なメモ、無用リーダー）
4. 2次元配列で検索する
vim的私人订制
Flutterのカスタムルーティング切り替えアニメーション
Javaコンテナの方法の簡単なアプリケーションのArrayList
アーカイブ
もっと
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)

コードワールド

© 2018 codetd.com