利用bootstrap框架 實現響應式佈局阿里百秀案例以及遇到的問題！

小威鍋XWG907發表於2019-07-11
boot框架阿里


1、案例分析

/* 分析：
   從寬度為992之後頁面的佈局 分為 2/7/3.
   先寫 最先發生改變的 md：992 -1200；後面都不發生改變
   實現md頁面；
   之後除錯md前面的頁面，用媒體查詢並且加權重來實現樣式改變！

   */


2、Bootstrap的檔案的引入

<!-- Bootstrap 的檔案引入 -->
< link   href = "./css/bootstrap/css/bootstrap.min.css"   rel = "stylesheet" >
< link   rel = "stylesheet"   href = "css/index.css" >

<!-- 條件註釋:小於IE9的版本 -->
<!--[if lt IE 9]>
<!--解決ie9以下瀏覽器對html5新增標籤的不識別，並導致CSS不起作用的問題-->
< script   src = "//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js" > < / script >

<!--解決ie9以下瀏覽器對 css3 Media Query  的不識別 -->
< script   src = "//cdn.bootcss.com/respond.js/1.4.2/respond.min.js" > < / script >

3、頁面的實現

    PC端使用流式佈局，移動端小頁面的時候分情況，怎麼方便就怎麼使用，注意：瀏覽器的相容問題

4、實現的時候出現的問題：

    1>想要讓 圖片顯示自身的大小時，

        設定 max- width : 100%;  表示的是父元素比自己寬時，取自身元素，比自己小時取父元素的寬度！

    2>樣式不一樣的時候 媒體查詢的使用

    3>特定的螢幕下，元素的顯示與隱藏的設定

    格式 ：

            特定區域下顯示 ： 例如 ：

                    表示的是在超小屏下是顯示的 , info一般是額外控制樣式。

            特定區域下隱藏：如：<span   class = "hidden-xs"> 標籤：健康 / 感染 / 指甲 / 疾病 / 皮膚 / 營養 / 趣味生活 span>


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69940672/viewspace-2650301/，如需轉載，請註明出處，否則將追究法律責任。

相關文章