zoukankan      html  css  js  c++  java
  • Bootstrap入门

    一、Bootstrap特点

    Bootstrap主要做了两件事。一是将经常使用的css样式、js效果组件化。使开发人员用更少的代码实现所需的效果。将基本的精力由繁琐的细节中解放出来。二是实现响应式布局,bootstrap集成的组件都考虑到了页面在pc、平板、手机上的适应性,可依据屏幕大小自己主动调整布局。

    二、Demo入门

    最后的效果

    这里写图片描写叙述

    这里写图片描写叙述

    放缩浏览器宽度,页面元素会自己主动调整位置

    当视口宽度小于978px时,将由水平排列调整为单列显示:

    这里写图片描写叙述

    遇到的问题

    关于组建的具体介绍。能够查看官方文档,下面为学习过程中的一些issue

    1.组件效果与官方的实例不一致

    同一浏览器chrome45,以本地方式查看和服务端方式查看同一份代码,效果不同。firefox和IE11试过,也一样。例如以下所看到的:这里写图片描写叙述
      最后发现是訪问路径有差异导致:以本地訪问方式查看,浏览器地址栏为”file://”,此时效果符合预期;从webstorm直接查看效果。地址栏为”localhost://”。此时效果不正确。
      由上可知,从webstorm上直接查看,是以訪问服务端资源的方式查看网页,而直接打开则是本地訪问方式打开。

    由此能够推測。可能是路径问题导致。可是让人奇怪的是,css文件有引入,给导航栏navbar使用contain-fluid样式,也能正常的居中。


      梳理下思路,由本地訪问没有问题排除css文件错误;由部分css样式能起作用,可知css引入正常。排除域、部署路径与文件路径不同的嫌疑;由css样式与js分析,排除网页禁止js文件导致。前提同一份代码,同版本号的浏览器。甚至浏览器的进程都是同一个,排除浏览器版本号问题。


    //TODO,如今能想到的还剩一个嫌疑,webstorm版本号太低(8.0.3),内部处理时有误。

    此问题遗留。

    2.图片选择

      由于是自己学习使用,图片素材都是百度所得。拿到的图片各式各样,在放到网页上时,遇到有的图片像素大,一张就撑爆整个网页,有的像素太小,填不满所给的空间。解决的方法是给图片添加样式100%.
      解决宽度后,发现图片的高度也不统一。得到的元素高低不平,难看。

    分析后决定调整图片本身。将须要保持一致的图片切成一样的宽高比。之所以不用css来改变高度。是由于图片被拉伸、压缩后会变形,影响效果。

    3.网页中的留白

      流式布局中。不同元素之间留白与否会对视觉效果产生较大影响。导航栏与正文之间不留白,页面各元素间,以及页面底部留白。

    间距50px左右。使用元素的margin外补或父元素的padding内补。

    4.弹出框dialog

      一般放在body元素中,避免放在其它元素时。因其它元素的遮挡导致无法弹出。

    三、主要代码

    需引入js/jquery-1.12.2.min.js、js/bootstrap.min.js 和css/bootstrap.min.css文件才可正常显示。

        <!DOCTYPE html>
        <html lang="zh-CN">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>现代浏览器博物馆</title>
    
            <link href="css/bootstrap.min.css" rel="stylesheet">
            <!--[if lt IE 9]>
            <script src="js/html5shiv.js"></script>
            <script src="js/respond.min.js"></script>
            <![endif]-->
    
            <style>
    
                body{
                    /*navbar-fixed-top 固定导航栏时也会覆盖body,解决此问题*/
                    padding-top: 50px;
                    padding-bottom: 50px;
                }
    
                .carousel{
                    height: 500px;
                    background-color: #000;
                    margin-bottom: 60px;
                }
                .carousel .item{
                    height: 500px;
                    background-color: #000;
                }
                .carousel img{
                    100%;
                }
                .carousel-caption p{
                    margin-top: 20px;
                    font-size:20px;
                    line-height: 1.8;
                }
                #primary-container img.img-circle{
                    30%
                }
                #primary-container img.feature-image{
                    50%;
                    margin-top: 60px;
                    margin-bottom: 60px;
                }
                #primary-container .col-md-4{
                    text-align: center;
                }
    
                hr.divider{
                    margin-top: 40px;
                    margin-bottom: 40px;
                }
                .feature{
                    margin:30px 0;
                }
                .feat-heading{
                    font-size:50px;
                    color:#2b669a;
                    margin-top: 120px;
                }
                .feat-heading .text-muted{
                    font-size:28px;
                    color:#999;
                }
            </style>
        </head>
        <body>
            <nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
                <div class="container">
                    <!-- 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="#demo-navbar" 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 class="navbar-brand" href="#">现代浏览器博物馆</a>
                    </div>
                    <div class="collapse navbar-collapse" id="demo-navbar">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">综述 <span class="sr-only">(current)</span></a></li>
                            <li><a href="#">简述</a></li>
                            <!--下拉菜单-->
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">特点<span class="caret"></span></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#tab-chrome">Chrome</a></li>
                                    <li><a href="#tab-firefox">Firefox</a></li>
                                    <li><a href="#tab-opera">Opera</a></li>
                                    <li><a href="#tab-ie">IE</a></li>
                                    <li><a href="#tab-safari">Safari</a></li>
                                </ul>
                            </li>
                            <li><a href="#" data-toggle="modal" data-target="#about">关于</a></li>
                        </ul>
                    </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
            </nav>
    
    
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <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>
                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="4"></li>
                </ol>
    
                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="OriginalMaterial/chrome/chrome-1.jpg" alt="Chrome">
                        <div class="carousel-caption">
                            <h1>Chrome</h1>
                            <p>Google Chrome。又称谷歌浏览器。是一个由Google(谷歌)公司开发的免费网页浏览器</p>
                            <p><a class="btn btn-lg btn-primary" target="_blank" role="button" href="http://www.google.com">点我下载</a></p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="OriginalMaterial/IE/internet-explorer-3.png" alt="IE">
                        <div class="carousel-caption">
                            <h1>IE</h1>
                            <p>Internet Explorer,简称IE,是美国微软公司推出的一款网页浏览器</p>
                            <p><a class="btn btn-lg btn-primary" target="_blank" role="button" href="http://www.google.com">点我下载</a></p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="OriginalMaterial/firefox/Firefox-9.jpg" alt="Firefox">
                        <div class="carousel-caption">
                            <h1>Firefox</h1>
                            <p>Mozilla Firefox。中文俗称“火狐,是一个自由及开放源码网页浏览器</p>
                            <p><a class="btn btn-lg btn-primary" target="_blank" role="button" href="http://www.google.com">点我下载</a></p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="OriginalMaterial/opera/opera-6.jpg" alt="Opera">
                        <div class="carousel-caption">
                            <h1>Opera</h1>
                            <p>Opera浏览器,是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器</p>
                            <p><a class="btn btn-lg btn-primary" target="_blank" role="button" href="http://www.google.com">点我下载</a></p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="OriginalMaterial/safari/safari-6.png" alt="Safari">
                        <div class="carousel-caption">
                            <h1>Safari</h1>
                            <p>Safari,是苹果计算机的最新操作系统Mac OS X中的浏览器</p>
                            <p><a class="btn btn-lg btn-primary" target="_blank" role="button" href="http://www.google.com">点我下载</a></p>
                        </div>
                    </div>
                </div>
    
                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">上一页</span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">下一页</span>
                </a>
            </div>
            <div class="container" id="primary-container">
                <div class="row">
                    <div class="col-md-4">
                        <img class="img-circle" src="OriginalMaterial/chrome/chrome-icon.png" alt="chrome"/>
                        <h2>Chrome</h2>
                        <p>Google Chrome,又称谷歌浏览器。是一个由Google(谷歌)公司开发的免费网页浏览器</p>
                        <p><a class="btn btn-default" href="#" role="button">点我下载</a></p>
                    </div>
                    <div class="col-md-4">
                        <img class="img-circle" src="OriginalMaterial/firefox/firefox-icon.png" alt="Firefox"/>
                        <h2>Firefox</h2>
                        <p>Mozilla Firefox,中文俗称“火狐。是一个自由及开放源码网页浏览器</p>
                        <p><a class="btn btn-default" href="#" role="button">点我下载</a></p>
                    </div>
                    <div class="col-md-4">
                        <img class="img-circle" src="OriginalMaterial/safari/safari-icon.jpg" alt="safari"/>
                        <h2>Safari</h2>
                        <p>Safari,是苹果计算机的最新操作系统Mac OS X中的浏览器</p>
                        <p><a class="btn btn-default" href="#" role="button">点我下载</a></p>
                    </div>
                </div>
    
                <hr class="divider"/>
    
                <div>
                    <!-- 标签页 -->
                    <ul class="nav nav-tabs" role="tablist" id="tab-list">
                        <li role="presentation" class="active"><a href="#tab-chrome" aria-controls="tab-chrome" role="tab" data-toggle="tab">Chrome</a></li>
                        <li role="presentation"><a href="#tab-firefox" aria-controls="tab-firefox" role="tab" data-toggle="tab">Firefox</a></li>
                        <li role="presentation"><a href="#tab-safari" aria-controls="tab-safari" role="tab" data-toggle="tab">Safari</a></li>
                        <li role="presentation"><a href="#tab-opera" aria-controls="tab-opera" role="tab" data-toggle="tab">Opera</a></li>
                        <li role="presentation"><a href="#tab-ie" aria-controls="tab-ie" role="tab" data-toggle="tab">IE</a></li>
                    </ul>
    
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="tab-chrome">
                            <div class="row  feature">
                                <div class="col-md-7">
                                    <h2 class="feat-heading">Chrome <span class="text-muted">主流浏览器</span></h2>
                                    <p class="lead">Google Chrome,又称谷歌浏览器。是一个由Google(谷歌)公司开发的免费网页浏览器。</p>
                                </div>
                                <div class="col-md-5">
                                    <img class="feature-image img-responsive" src="OriginalMaterial/chrome/chrome-icon.png" alt="chrome"/>
                                </div>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="tab-firefox">
                            <div class="row  feature">
                                <div class="col-md-5">
                                    <img class="feature-image img-responsive" src="OriginalMaterial/firefox/firefox-icon.png" alt="firefox"/>
                                </div>
                                <div class="col-md-7">
                                    <h2 class="feat-heading">Firefox <span class="text-muted">主流浏览器</span></h2>
                                    <p class="lead">Mozilla Firefox。中文俗称“火狐,是一个自由及开放源码网页浏览器</p>
                                </div>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="tab-safari">
                            <div class="row  feature">
                                <div class="col-md-7">
                                    <h2 class="feat-heading">Safari <span class="text-muted">主流浏览器</span></h2>
                                    <p class="lead">Safari,是苹果计算机的最新操作系统Mac OS X中的浏览器</p>
                                </div>
                                <div class="col-md-5">
                                    <img class="feature-image img-responsive" src="OriginalMaterial/safari/safari-icon.jpg" alt="chrome"/>
                                </div>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="tab-opera">
                            <div class="row  feature">
                                <div class="col-md-7">
                                    <h2 class="feat-heading">Opera <span class="text-muted">主流浏览器</span></h2>
                                    <p class="lead">Opera浏览器,是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器</p>
                                </div>
                                <div class="col-md-5">
                                    <img class="feature-image img-responsive" src="OriginalMaterial/opera/opera-icon.png" alt="chrome"/>
                                </div>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="tab-ie">
                            <div class="row feature">
                                <div class="col-md-5">
                                    <img class="feature-image img-responsive" src="OriginalMaterial/IE/internet-explorer-icon.png" alt="ie"/>
                                </div>
                                <div class="col-md-7">
                                    <h2 class="feat-heading">IE <span class="text-muted">非标准浏览器</span></h2>
                                    <p class="lead">Internet Explorer。是美国微软公司推出的一款网页浏览器。

    Internet Explorer使用了Trident排版引擎,差点儿完整支持HTML 4.01。CSS Level 1、XML 1.0和DOM Level 1,仅仅是有一些排版错误。</p> </div> </div> </div> </div> </div> <hr class="divider"/> <footer> <p class="pull-right"><a href="#top">回到顶部</a></p> <p>@ 2016 Dream</p> </footer> </div> <!--模态框--> <div class="modal fade" id="about"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title">关于</h4> </div> <div class="modal-body"> <p>提示信息,广告招商,征婚启事,大力金刚丸!

    </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">了解了</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <script src="js/jquery-1.12.2.min.js"></script> <script src="js/bootstrap.min.js"></script> <script> $(document).ready(function(){ $('#demo-navbar .dropdown-menu a').click(function(){ var href = $(this).attr('href'); $('#tab-list a[href="'+href+'"]').tab('show'); }); }); </script> </body> </html>

  • 相关阅读:
    LeetCode "Median of Two Sorted Arrays"
    LeetCode "Distinct Subsequences"
    LeetCode "Permutation Sequence"

    LeetCode "Linked List Cycle II"
    LeetCode "Best Time to Buy and Sell Stock III"
    LeetCode "4Sum"
    LeetCode "3Sum closest"
    LeetCode "3Sum"
    LeetCode "Container With Most Water"
  • 原文地址:https://www.cnblogs.com/brucemengbm/p/7324681.html
Copyright © 2011-2022 走看看