반응형 프레임워크를 설명하는 예 부트스트랩 그리드 시스템

그리드 시스템(Grid system) 그리드 시스템은 영어로 "그리드 시스템(grid system)"이라고 불리며, 어떤 사람들은 이를 "그리드 시스템(grid system)"으로 번역합니다. 고정된 그리드를 사용하여 레이아웃을 디자인하는 스타일로 제2차 세계대전 이후 큰 인기를 끌었습니다. 오늘날의 출판 디자인이 되었습니다. 이 기사는 주로 반응형 프레임워크인 부트스트랩 그리드 시스템의 예를 공유합니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

【관련 영상 추천: 부트스트랩 튜토리얼】

예는 다음과 같습니다:

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

当前为平面显示

    

当前为手机显示

    

효과 표시 사진:

관련 추천:

자세한 설명 프론트엔드 반응형 레이아웃, 반응형 이미지, 직접 만든 그리드 시스템

부트스트랩 그리드 시스템 연구 노트

bootstrap3 그리드 시스템_자바스크립트 기술 사용법 배우기

위 내용은 반응형 프레임워크를 설명하는 예 부트스트랩 그리드 시스템의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!