Examples to explain the responsive framework Bootstrap grid system

Grid system Grid system is called "grid systems" in English, and some people translate it as "grid system". It uses a fixed grid to design the layout. Its style is neat and concise. It became very popular after World War II and has become a popular publication in today's publishing industry. One of the mainstream styles of object design. This article mainly shares with you an example of the responsive framework Bootstrap grid system. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor to take a look, I hope it can help everyone.

【Related video recommendation: Bootstrap tutorial】

The example is as follows:

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默认占满整行　     

当前为平面显示

    

当前为手机显示

    

The effect display picture:

Related recommendations:

Detailed explanation of front-end responsive layout, Responsive images, and homemade grid system

Bootstrap grid system study notes

Learn to use bootstrap3 grid system_javascript skills

The above is the detailed content of Examples to explain the responsive framework Bootstrap grid system. For more information, please follow other related articles on the PHP Chinese website!