使用Bootstrap 3開發響應式網站實踐01,前期準備、導航區域等

時間 2019-11-11

標籤使用 bootstrap 開發響應網站實踐前期準備導航區域欄目 Bootstarp 简体版

原文原文鏈接

「使用Bootstrap 3開發響應式網站實踐」系列，將使用Bootstrap 3.2製做一個自適應網站，不管是在電腦、平板，仍是手機上，都呈現比較好的效果。在電腦瀏覽器上的最終效果以下：css

在手機上的呈現效果以下：html

本篇主要包括：jquery

□ 前期準備
□ 引入Bootstrap，jQuey文件等
□ 搭建頁面主體結構
□ 導航區域bootstrap

□ 前期準備瀏覽器

→使用Visual Studio 2012建立一個空的ASP.NET網站
→把下載下來的Bootstrap 3中的css,fonts,js文件夾拷貝到網站根目錄下
→在網站根目錄下建立images文件夾，用來存放全部的圖片
→使用NuGet安裝最新版的jQuery
→在網站根目錄下建立index.html文件
ide

□ 引入Bootstrap，jQuey文件等佈局

→在css文件夾下建立site.css
→在js文件夾下建立site.js
→把Bootstrap、jQuery等引入index.html文件中網站

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    
    <script src="Scripts/jquery-2.1.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/site.js"></script>
</body>
</html>

○ width: 視覺寬度
○ device-width: 屏幕寬度
○ heigh: 視覺高度
○ device-height: 屏幕高度
○ initial-scale: 初始放大比例，設置爲1.0時不放大
○ minimum-scale: 最小的放大比例，設置爲1.0時不放大
○ maximum-scale: 最大的放大比例，設置爲1.0時不放大
○ user-scalable: 是否容許放大，設置爲no時不容許放大spa

另外，須要在site.css設置以下：

 @-ms-viewport{
    width: device-width;
}

□ 搭建頁面主體結構

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <div class="container" id="main">
        <div class="navbar navbar-fixed-top">
            
        </div><!--導航區域結束-->
        
        <div class="carousel" id="myCarousel">
            
        </div><!--圖片展現區域結束-->
        
        <div class="row" id="bigCallout">
            
        </div><!--標註區域結束-->
        
        <div class="row" id="featureHeading">
            
        </div><!--主要功能標題區域結束-->
        
        <div class="row" id="features">
            
        </div><!--主要功能區域結束-->
        
        <div class="row" id="moreInfo">
            
        </div><!--更多信息區域結束-->
        
        <div class="row" id="moreProducts">
            
        </div><!--更多產品區域結束-->
    </div><!--container結束-->
    
    <footer>
        
    </footer><!--頁腳結束-->
    <script src="Scripts/jquery-2.1.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/site.js"></script>
</body>
</html>

○ row屬性值：表明單獨一行，是Grid的父級元素。

□ 導航區域

→到http://bootswatch.com/下載Theme，並保存到網站根目錄下的css文件夾
→下載某個主題，命名爲simplex.bootstrap.min.css，並放到以下位置：

    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/simplex.bootstrap.min.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />

→導航區域html以下：

        <div class="navbar navbar-fixed-top">
            <div class="container">
                <a class="navbar-brand" href="/"><img src="images/logo.gif" alt="logo"/></a>
                
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">主頁</a></li>
                        <li><a href="#">服務</a></li>
                    </ul>
                    
                    <form class="navbar-form pull-left">
                        <input type="text" id="searchInput" class="form-control" placeholder="搜索"/>
                        <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
                    </form>
                    
                    <ul class="nav navbar-nav pull-right">
                        <li><a href="#"><span class="glyphicon glyphicon-user"></span>設置</a></li>
                    </ul>
                </div><!--nav-collapse結束-->
            </div><!--container結束-->
        </div><!--導航區域結束-->

○ navbar屬性值：導航區域、導航條
○ navbar-fixed-top屬性值：把導航區域固定在頁面頂部
○ 把導航區域的全部元素放在一個<div class="container">中
○ navbar-brand屬性值：通常應用在網站logo上
○ navbar-collapse和collapse屬性值：是爲響應式設計的，當但願一塊區域在頁面寬度縮小到必定程度時本身適應，就把該塊區域包裹在<div class="navbar-collapse collapse">中
○ nav和navbar-nav屬性值：用在ul上，能夠把a標籤加入到導航區域
○ navbar-form屬性值：用在form上，能夠把form標籤加入到導航區域
○ pull-left屬性值：漂浮到左邊
○ form-control屬性值：用在表單元素上
○ glyphicon和glyphicon-search屬性值：用在span上，顯示Icon

當頁面足夠寬的時候，顯示<div class="navbar-collapse collapse">包裹區域。

當頁面寬度縮小到必定程度，<div class="navbar-collapse collapse">包裹區域被隱藏。

把以上ul中<li><a href="#">服務</a></li>改爲下拉菜單。

                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">主頁</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">服務<strong class="caret"></strong></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">足球</a></li>
                                <li><a href="#">籃球</a></li>
                                <li><a href="#">乒乓球</a></li>
                                <li class="divider"></li>
                                <li class="dropdown-header">更多服務...</li>
                                <li><a href="#">建立水球</a></li>
                                <li><a href="#">建立冰球</a></li>
                            </ul>
                        </li>
                    </ul>

○ dropdown屬性值：這裏被應用到li上，這樣li變成下拉菜單
○ data-toggle屬性：這裏屬性值爲dropdown，表示使用dropdown插件
○ dropdown-toggle屬性值：這裏了被應用到a上，點擊a顯示，再點擊消失
○ caret屬性值：這裏被應用到strong，表示向下箭頭
○ dropdown的選項是一個ul
○ dropdown-menu屬性值：這裏被應用到ul上，表示dropdown的選項
○ divider屬性值：這裏被應用到li上，表示分隔線
○ dropdown-header屬性值：這裏被應用到li上，該項沒法被選中

再把以上"個人帳戶"有關ul中的li改爲下拉菜單。

                    <ul class="nav navbar-nav pull-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span>個人帳戶<strong class="caret"></strong></a>
                            <ul class="dropdown-menu">
                                <li><a href="#"><span class="glyphicon glyphicon-wrench"></span>設置</a></li>
                                <li><a href="#"><span class="glyphicon glyphicon-refresh"></span>我的信息</a></li>
                                <li><a href="#"><span class="glyphicon glyphicon-briefcase"></span>帳單</a></li>
                                <li class="divider"></li>
                                <li><a href="#"><span class="glyphicon glyphicon-off"></span>退出</a></li>
                            </ul>
                        </li>
                    </ul>

但，如今還有一個問題：當頁面寬度縮小到必定程度，<div class="navbar-collapse collapse">包裹區域被隱藏。咱們但願在隱藏的時候，出現一個圖片，點擊它再次出現被隱藏部分。

在導航部分添加一個按鈕：

                <button type="button" class="navbar-toggle" data-target="#c" data-toggle="collapse" style="background-color: #e3e3e3;color: black">
                    顯示/隱藏
                </button>

○ navbar-toggle屬性值：這裏被應用到button，當點擊button出現隱藏部分
○ data-target屬性：這裏指向隱藏/顯示的div
○ data-toggle屬性：引用collapse插件

最後，導航部分的完整代碼爲：

        <div class="navbar navbar-fixed-top">
            <div class="container">
                
                <button type="button" class="navbar-toggle" data-target="#c" data-toggle="collapse" style="background-color: #e3e3e3;color: black">
                    顯示/隱藏
                </button>
                <a class="navbar-brand" href="/"><img src="images/logo.gif" alt="logo"/></a>
                
                <div class="navbar-collapse collapse" id="c">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">主頁</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">服務<strong class="caret"></strong></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">足球</a></li>
                                <li><a href="#">籃球</a></li>
                                <li><a href="#">乒乓球</a></li>
                                <li class="divider"></li>
                                <li class="dropdown-header">更多服務...</li>
                                <li><a href="#">建立水球</a></li>
                                <li><a href="#">建立冰球</a></li>
                            </ul>
                        </li>
                    </ul>
                    
                    <form class="navbar-form pull-left">
                        <input type="text" id="searchInput" class="form-control" placeholder="搜索"/>
                        <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
                    </form>
                    <ul class="nav navbar-nav pull-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span>個人帳戶<strong class="caret"></strong></a>
                            <ul class="dropdown-menu">
                                <li><a href="#"><span class="glyphicon glyphicon-wrench"></span>設置</a></li>
                                <li><a href="#"><span class="glyphicon glyphicon-refresh"></span>我的信息</a></li>
                                <li><a href="#"><span class="glyphicon glyphicon-briefcase"></span>帳單</a></li>
                                <li class="divider"></li>
                                <li><a href="#"><span class="glyphicon glyphicon-off"></span>退出</a></li>
                            </ul>
                        </li>
                    </ul>
                </div><!--nav-collapse結束-->
            </div><!--container結束-->
        </div><!--導航區域結束-->