• “Bootstrap技术社区”网站——响应式网页(1+X Web前端开发中级 例题)

    文章目录

    📄题目要求

    🧩说明

    🧩效果图

    🔗index.html在PC端效果如下所示。

    🔗index.html在平板设备显示效果如下图所示。

    🔗index.html在其他设备上显示效果如下图所示

    💻HTML代码

    🎯实现效果

    💻PC端效果

    💻平板设备显示效果

    📱其他设备上显示效果

    📰完整答案

    📄题目要求

    • 阅读下列说明、效果图和HTML代码，进行静态网页开发，填写（1）至（13）代码。

    🧩说明

    • 这是“Bootstrap技术社区”网站，该网站致力Bootstrap开发技术，现在我们需要编写该网站首页。

    • 项目名称为web_skill，采用Bootstrap框架，包含首页index.html、css文件夹、js文件夹、img文件夹，其中，css文件夹包含index.css文件和bootstrap.min.css文件；js文件夹包含jquery-3.2.1.min.js文件和bootstrap.min.js文件和popper.min.js；img文件夹包含bootstrap.png、php.png、mysql.png和laravel.png图片。

    • 进行静态网页开发，补全代码，在（1）至（13）处填入正确的内容。

    🧩效果图

    🔗index.html在PC端效果如下所示。

     

    🔗index.html在平板设备显示效果如下图所示。

    🔗index.html在其他设备上显示效果如下图所示

     

    💻HTML代码

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <title>Bootstrap 4title>
    6.     <meta charset="utf-8">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1">
    8.     <link rel="stylesheet" href="./css/bootstrap.min.css">
    9.     <link rel="stylesheet" href="./css/index.css">
    10.     <script src="./js/popper.min.js">script>
    11.     <script src="./js/jquery.min.js">script>
    12.     <script src="./js/bootstrap.min.js">script>
    13. head>
    14. <body>
    16.     <div class="     (1)      text-center" style="margin-bottom:0">
    17.         <h1>简洁、直观、强悍的前端开发框架。h1>
    18.         <p>Bootstrap让web开发更迅速、简单p>
    19. div>
    21. <nav class="      （2）       navbar-expand-sm bg-dark navbar-dark">
    23.         <a class="      （3）     " href="#">LOGOa>
    25.         <button class="    (4)    " type="button" data-toggle="  (5)    " data-target="  (6)    ">
    26.             <span class="navbar-toggler-icon">span>
    27.         button>
    29.         <div class="collapse      (7)     " id="collapsibleNavbar">
    30.             <ul class="navbar-nav">
    31.                 <li class="nav-item">
    32.                     <a class="nav-link" href="#">phpa>
    33.                 li>
    34.                 <li class="nav-item">
    35.                     <a class="nav-link" href="#">H5和css3a>
    36.                 li>
    37.                 <li class="nav-item">
    38.                     <a class="nav-link" href="#">js和jquerya>
    39.                 li>
    40.             ul>
    41.         div>
    42. nav>
    44. <div class="   （8）" style="margin-top:30px">
    46.         <div class="    （9）   ">
    48.             <div class="    （10）    ">
    49.                 <h2>前端响应式框架h2>
    50.                 <h5>logo:h5>
    51.                 <div class="fakeimg">
    52.                     图像
    53.                 div>
    54.                 <p>Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。p>
    55.                 <h3><a href="###">bootstrap网站a>h3>
    56.                 <p>常用网站p>
    57.                 <ul class="nav nav-pills flex-column">
    58.                     <li class="nav-item">
    60.                         <a class="nav-link      （11）       " href="#">官网a>
    61.                     li>
    62.                     <li class="nav-item">
    63.                         <a class="nav-link" href="#">百度a>
    64.                     li>
    65.                     <li class="nav-item">
    66.                         <a class="nav-link" href="#">新浪a>
    67.                     li>
    68.                     <li class="nav-item">
    70.                         <a class="nav-link        （12）     " href="#">googlea>
    71.                     li>
    72.                 ul>
    73.                 <hr class="d-sm-none">
    74.             div>
    76.             <div class="   （13）   ">
    77.                 <h2>html5是html开发的新的标准h2>
    78.                 <h5>关于html5的介绍h5>
    79.                 <div class="fakeimg">图像div>
    80.                 <p>HTML5 是下一代的 HTMLp>
    81.                 <p>
    82.                     什么是 HTML5？
    83.                     HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
    84.                     HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。
    85.                     HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
    86.                 p>
    87.             div>
    88.         div>
    89.     div>
    90. body>
    91. html>

    🎯实现效果

    💻PC端效果

    💻平板设备显示效果

    📱其他设备上显示效果

    📰完整答案

    试题一（26分）
    【问题】（26分）
    （1）jumbotron
    （2）navbar
    （3）navbar-brand
    （4）navbar-toggler
    （5）collapse
    （6）#collapsibleNavbar
    （7）navbar-collapse
    （8）container
    （9）row
    （10）col-sm-4
    （11）active
    （12）disabled
    （13）col-sm-8
    （每空2分，共26分）

    🎯点赞收藏，防止迷路🔥 

  • 相关阅读:
    Linux下brk、sbrk实现一个简易版本的malloc
    [计算机网络实验]头歌 实验二 以太网帧、IP报文分析（含部分分析）
    简直了，被“Java并发锁”问题追问到自闭...
    node的文件系统和数据流
    XmlSerializer 序列化解决内存增加问题
    【Kubernetes | Pod 系列】Pod的 YAML 清单文件详解
    MySQL数据库基础：JSON函数各类操作一文详解
    Linux基本操作【下】
    2022年广西壮族自治区中职网络安全技能竞赛“Linux操作系统渗透测试详解”
    串行协议——USB驱动[基础]
  • 原文地址：https://blog.csdn.net/weixin_53231455/article/details/127857148