Bootstrap响应式项目实践1

文章目录

一、成果展示

lg
md
sm
xs

二、代码

<!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.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>bootstrapWeb</title>
    <!--重置默认样式-->
    <link rel="stylesheet" type="text/css" href="Css/resetCss.css">
    <!-- Bootstrap本地引入 -->
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="Css/htmlLess.css">
    <!-- <script type="text/javascript " src="Js/Js.js"></script> -->
    <style>
        body{
            padding-top:50px;
        }
        a,a:hover,a:active,a:visited{
            text-decoration: none;
        }
        p{
            color: #555;
        }
        .navbar{
            border-radius: unset;
        }
        .title{
            width:60%;
            margin:40px auto 40px;
            padding-bottom:1em;
            border-bottom:1px solid #eee;
        }
        @media screen and (min-width: 768px){
            .title h2{
                font-size:42px;
            }
        }
        .project{
            max-width:310px;
            height:340px;
            margin-right:auto;
            margin-left:auto;
        }
    </style>
</head>
<body>
<!--导航条-->
    <!-- navbar-fixed-top将导航条固定到窗口顶部 -->
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse"> 
    <div class="container">
        <!-- 将品牌和切换分组，以获得更好的移动显示 -->
        <div class="navbar-header">
            <!-- button部分实现在视口减小时出现的菜单按钮显示被隐藏的内容 -->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                <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 hidden-sm" href="#">BootStrap中文网</a>
        </div>

        <!-- 收集导航链接、表单和其他内容以进行切换 -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">Bootstrap3中文文档</a></li>
                <li><a href="#">Bootstrap4中文文档</a></li>
                <li><a href="#">Sass 教程</a></li>
                <li><a href="#">Less 教程</a></li>
                <li><a href="#">jQuery API</a></li>
                <li><a href="#">网站实例</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right hidden-sm">
                <li><a href="#">关于</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<!--缩略图-->
<div class="container navbar-static-top">
    <!--标题-->
    <div class="container text-center title">
        <h2>Bootstrap相关优质项目推荐</h2>
        <p>这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的</p>
    </div>
    <div class="row ">
        <!--阿里云-->
        <div class="col-sm-6 col-md-4 col-lg-3">
            <div class="thumbnail project">
                <a href="javascript:;">
                    <img src="picture/阿里云.png" alt="...">
                </a>
                <div class="caption">
                    <h3 class="text-center"><a href="javascript:;">阿里云<br /><small>最全优惠活动聚集地</small></a></h3>
                    <p class="text-center">
                        阿里云-全球领先的云计算及人工智能公司。阿里云最全特惠活动聚集于此，云服务器低至0.55折，100+款产品飞天会员价低至1.5折！
                    </p>
                </div>
            </div>
        </div>
        <!--React-->
        <div class="col-sm-6 col-md-4 col-lg-3">
            <div class="thumbnail project">
                <a href="javascript:;">
                    <img src="picture/React.png" alt="...">
                </a>
                <div class="caption">
                    <h3 class="text-center"><a href="javascript:;">React<br /><small>用于构建用户界面的 JavaScript 框架</small></a></h3>
                    <p class="text-center">
                        React 起源于 Facebook 的内部项目，是一个用于构建用户界面的 JavaScript 库。
                    </p>
                </div>
            </div>
        </div>
        <!--Svelte-->
        <div class="col-sm-6 col-md-4 col-lg-3">
            <div class="thumbnail project">
                <a href="javascript:;">
                    <img src="picture/Svelte.png" alt="...">
                </a>
                <div class="caption">
                    <h3 class="text-center"><a href="javascript:;">Svelte<br /><small>中文网</small></a></h3>
                    <p class="text-center">
                        Svelte 是构建 Web 应用程序的一种新方法。Svelte 是一个编译器，它将声明性组件转换成高效的 JavaScript 代码，并像做外科手术一样细粒度地更新 DOM。
                    </p>
                </div>
            </div>
        </div>
        <!--Babel-->
        <div class="col-sm-6 col-md-4 col-lg-3">
            <div class="thumbnail project">
                <a href="javascript:;">
                    <img src="picture/Babel.png" alt="...">
                </a>
                <div class="caption">
                    <h3 class="text-center"><a href="javascript:;">Babel<br /><small>是一个 JavaScript 编译器。</small></a></h3>
                    <p class="text-center">
                        Babel 是一个 JavaScript 编译器。Babel 通过语法转换器支持最新版本的 JavaScript 语法。
                    </p>
                </div>
            </div>
        </div>
        <!--Webpack-->
        <div class="col-sm-6 col-md-4 col-lg-3">
            <div class="thumbnail project">
                <a href="javascript:;">
                    <img src="picture/Webpack.png" alt="...">
                </a>
                <div class="caption">
                    <h3 class="text-center"><a href="javascript:;">Webpack<br /><small>是前端资源模块化管理和打包工具</small></a></h3>
                    <p class="text-center">
                        Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。
                    </p>
                </div>
            </div>
        </div>
        <!--Next-->
        <div class="col-sm-6 col-md-4 col-lg-3">
            <div class="thumbnail project">
                <a href="javascript:;">
                    <img src="picture/Next.png" alt="...">
                </a>
                <div class="caption">
                    <h3 class="text-center"><a href="javascript:;">Next.js<br /><small>中文文档</small></a></h3>
                    <p class="text-center">
                        Next.js 是一个轻量级的 React 服务端渲染应用框架。
                    </p>
                </div>
            </div>
        </div>
        <!--Typescript-->
        <div class="col-sm-6 col-md-4 col-lg-3">
            <div class="thumbnail project">
                <a href="javascript:;">
                    <img src="picture/Typescript.png" alt="...">
                </a>
                <div class="caption">
                    <h3 class="text-center"><a href="javascript:;">TypeScript<br /><small>中文手册</small></a></h3>
                    <p class="text-center">
                        TypeScript 是由微软开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
                    </p>
                </div>
            </div>
        </div>
        <!--Bootstrap-->
        <div class="col-sm-6 col-md-4 col-lg-3">
            <div class="thumbnail project">
                <a href="javascript:;">
                    <img src="picture/Bootstrap.png" alt="...">
                </a>
                <div class="caption">
                    <h3 class="text-center"><a href="javascript:;">优站精选<br /><small>Bootstrap 网站实例</small></a></h3>
                    <p class="text-center">
                        Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<!--本地引入-->
<script src="jquery/jquery-3.5.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

三、代码基于

1.该练习基于Bootstrap框架实现，需导入bootsrap和jquery相关文件。

2.引入导航条、栅格系统和缩略图的框架。

3.对原框架进行自己需要的修改和添加。

四、遇到的问题和解决

1.导航条固定后网页其他内容上移（被导航条遮住）

解决办法如下：

需要为 body 元素设置内补（padding）

这个固定的导航条会遮住页面上的其它内容，除非你给 <body> 元素底部设置了 padding。用你自己的值，或用下面给出的代码都可以。提示：导航条的默认高度是 50px。

补充：静止在顶部

通过添加 .navbar-static-top 类即可创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失。还可以包含一个 .container 或 .container-fluid 容器，用于将导航条居中对齐并在两侧添加内补（padding）。

与 .navbar-fixed-* 类不同的是，你不用给 body 添加任何内补（padding）。

2.窗口缩小时导航条内容溢出（排版错乱）

解决办法如下：

  1. 减少导航条内所有元素所占据的宽度。
  2. 在某些尺寸的屏幕上利用 响应式工具类来隐藏导航条内的一些元素。（我才用的是该方法，在缩小窗口到阈值时隐藏一部分元素）
  3. 修改导航条在水平排列和折叠排列互相转化时，触发这个转化的最小屏幕宽度值。可以通过修改 @grid-float-breakpoint 变量实现，或者自己重写相关的媒体查询代码，覆盖 Bootstrap 的默认值。

3.发现自己的网页大小不适应视口大小

解决办法如下：

我发现问题出现的原因是在不同阈值时，栅格系统的列宽在变化，列里面的 thumbnail容器大小未设置，它继承父类的 width撑开了内容区。解决：为 thumbnail设置 max-width,并设置 margin让其居中。

4.因内容多少不一致，导致缩略图高度不一致

解决办法如下：

为所有的缩略图设置相同的高度，但为了采用响应式可以为其设置媒体查询在不同阈值时用不同高度。

5.标题（.title）字体大小不变，影响响应式布局

解决办法如下：

为标题字体设置媒体查询在不同响应下显示不同大小。

# bootstrap
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

开源for Huawei，Beam适配GaussDB实践案例分享

avatar 华为开发者空间
cover

华为云数据库亮相创原会：拥抱AI，共创未来

avatar 华为开发者空间
cover

GaussDB典型SQL调优点之自诊断和语句下推调优

avatar 华为开发者空间