• Bootstrap实现个人blog项目(1+X Web前端开发中级 例题)——初稿

    📄题目要求 

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

    🧩说明

    • 这是个人blog项目，该项目的目录是myblog，现在我们需要编写该blog首页。

    • 项目名称为myblogl，采用Bootstrap4框架，包含首页index.html、css文件夹、js文件夹、img文件夹，其中，css文件夹包含index.css文件和bootstrap.min.css文件；js文件夹包含jquery.min.js文件和bootstrap.min.js文件等；img文件夹包含轮播图用到的图片。

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

    🧩效果图

     

    💻HTML代码

    1. html>
    2. <html>
    3. <head>
    4.   <title>前端开发笔记title>
    5.   <meta charset="utf-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1">
    7.   <link rel="stylesheet" href="./css/bootstrap.min.css">
    8.   <script src="./js/jquery.min.js">script>
    9.   <script src="./js/popper.min.js">script>
    10.   <script src="./js/bootstrap.min.js">script>
    11. head>
    12. <body>
    13.   
    14. <div class="（1）">
    15.   <h2>myblog-前端开发人员的笔记h2>
    16.   <br>
    17.   
    18.   <ul class="（2） （3）" role="（4）">
    19.     <li class="nav-item">
    20.       
    21.       <a class="nav-link （5）" data-toggle="pill" href="#home">首页a>
    22.     li>
    23.     <li class="nav-item">
    24.       <a class="nav-link" data-toggle="pill" href="#menu1">产品a>
    25.     li>
    26.     <li class="nav-item">
    27.       <a class="nav-link" data-toggle="pill" href="#menu2">博客a>
    28.     li>
    29.   ul>
    30.  
    31.   
    32.   <div class="（6）">
    33.     
    34.     <div id="（7）" class="container tab-pane active" ><br>
    35.       <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。p>
    36.       <p> Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。p>
    37.       
    38.       
    39.       <div id="demo" class="（8） slide" data-ride="carousel" >
    40.         
    41.         <ul class="（9）">
    42.           <li data-target="#demo" data-slide-to="0" class="active">li>
    43.           <li data-target="#demo" data-slide-to="1">li>
    44.           <li data-target="#demo" data-slide-to="2">li>
    45.         ul>
    46.        
    47.         
    48.         <div class="（10）" >
    49.           <div class="carousel-item active">
    50.             <img src="./img/img_fjords_wide.jpg">
    51.           div>
    52.           <div class="carousel-item">
    53.             <img src="./img/img_mountains_wide.jpg">
    54.           div>
    55.           <div class="carousel-item">
    56.             <img src="./img/img_nature_wide.jpg">
    57.           div>
    58.         div>
    59.         
    60.         <a class="（11）" href="#demo" data-slide="prev">
    61.           <span class="carousel-control-prev-icon">span>
    62.         a>
    63.         <a class="（12）" href="#demo" data-slide="next">
    64.           <span class="carousel-control-next-icon">span>
    65.         a>
    66.       div>
    67.       
    68.     div>
    69.     <div id="menu1" class="container tab-pane fade"><br>
    70.         <p>请认真填写问卷，您的意见将帮助我们改进产品.p>
    71.         <div> 
    72.           <form>
    73.             
    74.             <div class="（13）">
    75.               <label for="usr">用户名:label>
    76.               
    77.               <input type="text" class="（14）" id="usr">
    78.             div>
    79.             <p>请选择您购买的型号：p>
    80.             
    81.             <div class="（15）">
    82.               <label class="form-check-label">
    83.                 
    84.                 <input type="checkbox" class="（16）" value="">产品1
    85.               label>
    86.             div>
    87.             <div class="form-check">
    88.               <label class="form-check-label">
    89.                 <input type="checkbox" class="form-check-input" value="">产品2
    90.               label>
    91.             div>
    92.             
    93.             <div class="form-check （17）">
    94.               <label class="form-check-label">
    95.                 <input type="checkbox" class="form-check-input" value="" disabled>产品3
    96.               label>
    97.             div>
    98.             <div class="form-group">
    99.               
    100.               <label for="（18）">评论:label>
    101.               <textarea class="form-control" rows="5" id="comment">textarea>
    102.             div>
    103.             <div>
    104.               
    105.               <input type="（19）" value="提交">
    106.             div>
    107.           form>
    108.     div>
    109.     div>
    110.     
    111.     <div id="menu2" class="container tab-pane （20）"><br>
    112.       <p>Bootstrap4 是 Bootstrap 的最新版本，与 Bootstrap3 相比拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。同时 Bootstrap.min.css 的体积减少了40%以上。p>
    113.     div>
    114.   div>
    115. div>
    116. body>
    117. html>

    🎯实现效果

    📰完整答案

    试题一（40分）
    【问题】（40分）
    (1)container
    (2)nav
    (3)nav-pills
    (4)tablist
    (5)active
    (6)tab-content
    (7)home
    (8)carousel
    (9)carousel-indicators
    (10)carousel-inner
    (11) carousel-control-prev
    (12)carousel-control-next
    (13)form-group
    (14)form-control
    (15)form-check
    (16)form-check-input
    (17)disabled
    (18)comment
    (19)submit
    (20)fade
    （每空2分，共40分）

    🎯点赞收藏，防止迷路🔥 

  • 相关阅读:
    强化学习——学习笔记3
    VIT(Vision Transformer)学习-模型理解（一）
    B. Prinzessin der Verurteilung
    mobileNet v2 paper笔记
    【Text2SQL 论文】T5-SR：使用 T5 生成中间表示来得到 SQL
    【VUE项目实战】64、CND优化ElementUI以及首页内容定制
    基于TM的遥感数据的叶面积指数估算解决方案及或取途径
    一文学习yolov5 实例分割：从训练到部署
    美国疾控中心：持续减肥，降低32%患癌风险，降低48%癌死亡风险
    易基因：NAR：RCMS编辑系统在特定细胞RNA位点的靶向m5C甲基化和去甲基化研究｜项目文章
  • 原文地址：https://blog.csdn.net/weixin_53231455/article/details/127931435