溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

利用bootstrap框架 實現(xiàn)響應(yīng)式布局阿里百秀案例以及遇到的問題！

發(fā)布時間：2020-08-11 13:48:32 來源：ITPUB博客 閱讀：439 作者：小威鍋XWG907 欄目：移動開發(fā)


1、案例分析

/* 分析：
   從寬度為992之后頁面的布局 分為 2/7/3.
   先寫 最先發(fā)生改變的 md：992 -1200；后面都不發(fā)生改變
   實現(xiàn)md頁面；
   之后調(diào)試md前面的頁面，用媒體查詢并且加權(quán)重來實現(xiàn)樣式改變！

   */


利用bootstrap框架 實現(xiàn)響應(yīng)式布局阿里百秀案例以及遇到的問題！

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新增標(biāo)簽的不識別，并導(dǎo)致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、頁面的實現(xiàn)

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

4、實現(xiàn)的時候出現(xiàn)的問題：

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

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

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

    3>特定的屏幕下，元素的顯示與隱藏的設(shè)置

利用bootstrap框架 實現(xiàn)響應(yīng)式布局阿里百秀案例以及遇到的問題！

    格式 ：

            特定區(qū)域下顯示 ： 例如 ： 利用bootstrap框架 實現(xiàn)響應(yīng)式布局阿里百秀案例以及遇到的問題！

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

            特定區(qū)域下隱藏：如：<span   class = "hidden-xs"> 標(biāo)簽：健康 / 感染 / 指甲 / 疾病 / 皮膚 / 營養(yǎng) / 趣味生活 span>


向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手