碼上歡樂
相關內容    簡體    繁體

Bootstrap頁面響應式設計

本文轉載自   查看原文   2018-09-30 17:33   1973    H5/CSS3/ bootstrap/ Bootstrap頁面響應式

關鍵詞：viewport、柵格布局、媒體查詢（Media Queries）

一、關於柵格布局的說明：

1、基本圖解


extra small devices phones  超小型設備手機
small devices tablets 小型設備平板電腦
medium devices desktops 中型設備台式機
large devices desktops 大型設備台式機

2、混用案例說明
如：
HTML代碼：
<div class="col-xs-12 col-sm-9 col-md-6 col-lg-3">                   
</div>

當屏幕尺寸
小於 768px 的時候，用 col-xs-12 類對應的樣式；
在 768px 到 992px 之間的時候，用 col-sm-9 類對應的樣式；
在 992px 到 1200px 之間的時候，用 col-md-6 類對應的樣式；
大於 1200px 的時候，用 col-lg-3 類對應的樣式；


二、制作登錄頁面
效果：


代碼：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head runat="server">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

    <link href="style/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="style/bootstrap-3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="style/MediaTest2.css" rel="stylesheet" />
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/bootstrap-3.3.7/bootstrap.min.js"></script>

    <script src="js/verify/verify.min.js"></script>
    <link href="style/verify/verify.css" rel="stylesheet" />
    <title>登錄頁</title>
</head>
<body>
    <div class="container">
        <!--<h1>Twitter bootstrap tutorial</h1>-->
        <nav class="navbar navbar-inverse">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a id="logo" class="navbar-brand" href="#"></a>
            </div>
            <div id="navbar-menu" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">首頁</a></li>
                    <li><a href="#">禮品兌換</a></li>
                    <li><a href="#">個人中心</a></li>
                </ul>
            </div>
        </nav>

        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            </ol>
            <!-- 輪播（Carousel）項目內容 -->
            <div class="carousel-inner" role="listbox">
                <!-- 默認顯示圖片 -->
                <div class="item active">
                    <img src="/image/buyshow-1.jpg" alt="" />
                    <!-- 圖片描述內容 -->
                    <div class="carousel-caption">
                        
                    </div>
                </div>
                <div class="item">
                    <img src="/image/02.png" alt="" />
                    <div class="carousel-caption">
                        
                    </div>
                </div>
            </div>
            <!-- 輪播（Carousel）導航(控制左右移動) -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous</span> </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next</span> </a>
        </div>

        <div id="content" class="row-fluid divInterval ">
            <!--
            <div class="col-md-9">
                Main Content SectionMain Content SectionMain Content SectionMain Content Section
            </div>
            <div class="col-md-3">
                <h2>Sidebar</h2>
                <ul class="nav nav-tabs nav-stacked">
                    <li><a href='#'>Another Link 1</a></li>
                    <li><a href='#'>Another Link 2</a></li>
                    <li><a href='#'>Another Link 3</a></li>
                </ul>
            </div>
            -->
            <div class="col-md-12">
                <div class="input-group input-group-lg">
                    <span class="input-group-addon" id="sizing-addon1">賬號：</span>
                    <input type="text" class="form-control" placeholder="請輸入賬號" aria-describedby="sizing-addon1" />
                </div>
                <div class="input-group input-group-lg divInterval">
                    <span class="input-group-addon" id="Span2">密碼：</span>
                    <input type="text" class="form-control" placeholder="請輸入密碼" aria-describedby="sizing-addon1" />
                </div>
                <div id="mpanel1" class="divInterval">
                </div>
                <div class="divInterval">
                    <button type="button" class="btn btn-primary btn-lg btn-block">開始登錄</button>
                </div>
            </div>

        </div>
    </div>


    <script type="text/javascript">
        $('#mpanel1').slideVerify({
            type: 1,
            vOffset: 5,	//誤差量，根據需求自行調整
            barSize: {
                width: '100%',
                height: '40px',

            },
            ready: function () {
            },
            success: function () {
                alert('驗證成功！');
                //......后續操作
            },
            error: function () {
                alert('驗證失敗！');
            }

        });
    </script>
</body>
</html>

CSS

.divInterval {
    margin-top:1rem;
}

.navbar-inverse {
    border-radius: 4px 4px 0px 0px;
}
.navbar {
    margin-bottom: 0px; 
}

#logo {
 background:url("/image/logo.png");
 width: 50px;
 margin-left: 0.5rem;
}

.container {
  padding-right: 0px;
  padding-left: 0px;
  margin-right: auto;
  margin-left: auto;
}
/*四種響應式類型：（超小屏，小屏，中屏和大屏），其斷點是768px,992px,1220px*/
@media (max-width: 768px) {
    .container {
        width: auto;
    }
}
@media (min-width: 768px) {
    .container {
        width: 100%;
    }
}
@media (min-width: 992px) {
    .container {
        width: 100%;
    }
}
@media (min-width: 1200px) {
    .container {
        width: 100%;
    }
}

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

/*所有列左浮動*/
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
 }

#content {
 background-color:#fff;
}

 
三、網站內容頁面
效果：


代碼：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head id="Head1" runat="server">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

    <link href="/style/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/style/bootstrap-3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="/style/member.css" rel="stylesheet" />
    <script src="/js/jquery-1.11.3.min.js"></script>
    <script src="/js/bootstrap-3.3.7/bootstrap.min.js"></script>
    <title>會員中心首頁</title>
</head>
<body>
    <div class="container">
        <!--<h1>Twitter bootstrap tutorial</h1>-->
        <nav class="navbar navbar-inverse">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a id="logo" class="navbar-brand" href="#"></a>
            </div>
            <div id="navbar-menu" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">首頁</a></li>
                    <li><a href="#">禮品兌換</a></li>
                    <li><a href="#">個人中心</a></li>
                </ul>
            </div>
        </nav>

    </div>
    <div id="content" class="row-fluid divInterval ">
        <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
            Main Content SectionMain Content SectionMain Content SectionMain Content Section
        </div>
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
            <h2>Sidebar</h2>
            <ul class="nav nav-tabs nav-stacked">
                <li><a href='#'>Another Link 1</a></li>
                <li><a href='#'>Another Link 2</a></li>
                <li><a href='#'>Another Link 3</a></li>
            </ul>
        </div>
        
        <!--響應式效果測試
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
            one
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
            two
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
            three
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
            four
        </div>
        -->
    </div>
</body>
</html>

CSS

.container {
    padding-right: 0px;
    padding-left: 0px;
    margin-right: auto;
    margin-left: auto;  

}
@media (max-width: 768px) {
    .container {
        width: auto;
    }
}
@media (min-width: 768px) {
    .container {
        width: 100%;
    }
}
@media (min-width: 992px) {
    .container {
        width: 100%;
    }
}
@media (min-width: 1200px) {
    .container {
        width: 100%;
    }
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  border:1px solid #ff6a00;
}

.navbar-inverse {
    border-radius: 4px 4px 0px 0px;
}
.navbar {
    margin-bottom: 0px; 
}

 


參考：
https://www.cnblogs.com/haogj/p/4980353.html
https://www.cnblogs.com/sdusrz/p/7170564.html
https://www.cnblogs.com/jnslove/p/5430481.html
https://www.cnblogs.com/ATtuing/p/5424227.html
http://www.jqhtml.com/bootstraps-syntaxhigh/index.html（Bootstrap手冊）

更多：
https://v3.bootcss.com/components/ （Bootstrap中文網）


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 使用Bootstrap設計響應式頁面 Bootstrap響應式柵格系統設計 Bootstrap響應式柵格系統的設計原理 bootstrap響應式網頁設計的9條基本原則！ bootstrap響應式表格 BootStrap響應式圖片 BootStrap 響應式布局 ElementUI響應式Layout布局xs,sm,md,lg,xl參照了Bootstrap 的響應式設計 響應式頁面-@media介紹, 移動端單位介紹 Bootstrap學習 Bootstrap的插件 跨終端響應式頁面設計入門
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM