レスポンシブフレームワークBootstrapグリッドシステムを説明する例

グリッドシステム グリッドシステムは英語で「グリッドシステム」と呼ばれ、固定されたグリッドを使用してレイアウトを設計するスタイルで、第二次世界大戦後非常に普及しました。現在の出版物のデザインの主流の一​​つとなっています。この記事では、主にレスポンシブ フレームワークの Bootstrap グリッド システムの例を紹介します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

【関連おすすめ動画: Bootstrapチュートリアル】

例は以下の通り:

nbsp;html>


 <meta>
 <title></title>
 <meta>
 <link>
 <script></script>
 <style>
  *{
   top: 0px;
   padding: 0px;
   text-decoration: none;
   list-style-type: none;
  }

  .top-styl{
   height: 50px;
   border: 1px solid red;
   background-color: #000000;
  }
  .img-styl{
   width: 174px;
   height: 50px;
   background: url("imges/logo.png")no-repeat 0px 3px;
   background-size: contain;
   float: left;
  }
  .sousuo-styl{
   width: 187px;
   float: left;
  }
  .top-search-input{
   width: 150px;
   padding: 0 5px;
   height: 30px;
   border: 0;
   background: #363636;
   float: left;
   color: #ccc;
  }
  .top-search-submit{
   width: 30px;
   height: 30px;
   border: 0;
   background: green url("imges/zoom.gif")center center no-repeat;
   float: left;
   cursor: pointer;　　　　　　　　　　//光标指针
  }
  .dao-styll{
   float: left;
   font-size: 16px;
   width: 329px;
   margin-left: 33px;
   margin-top: 11px;

  }
  .dao-styll li{
   float: left;
   position: relative;　　　　　　//相对定位
   text-align: center;
   padding: 0 7px;
  }
  .dao-styll >li:hover{
   background-color: #999;
  }
  .dao-styll >li >a{
   color: #FFF;
   width: 100%;
   height: 34px;
   text-decoration: none;　　　　//取消下划线
  }
  .dz-styl{
   float: right;
   margin: -19px -9px 6px 21px;
  }
  .imgs-styl{
   padding: 11px 0px 0px 114px;
   float: right;
   margin: 0px -98px -3px 8px;
  }
  .green-styl{
   color: green;
  }
  .zc-styl{
   color: white;
  }
  a{
   text-decoration: none;
  }
 </style>


 <p> 　　　　　　　　　　//fluid表示用 百分比
  </p><p>　　　　　　　　　　　　　　　//row 行
   </p><p>　　　　　　　　//col-md-12 每行桌面占12列
    </p><p>
     </p><p>　　　//col-md-offset-1 列偏移1列
      </p><p>
      </p><p>
       </p><p></p>
      
       <p>
        </p><p>
         <input><input>
        </p>
       
       <p>
        </p>

         
• 风格          
         
• 造型师
         
• 众分享          
         
• 我的美丽衣橱
        

               

        

                  

        

         登录 |           注册         

                                  

    

当前为桌面显示

　　　//visible默认占满整行　     

当前为平面显示

    

当前为手机显示

    

エフェクト表示画像:

関連おすすめ:

詳しい説明フロントエンドのレスポンシブ レイアウト、レスポンシブ イメージ、および自家製グリッド システム

Bootstrap グリッド システムの学習ノート

bootstrap3 グリッド システムの使い方を学ぶ_JavaScript スキル

以上がレスポンシブフレームワークBootstrapグリッドシステムを説明する例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。