上一主题 下一主题
油猴中文网»论坛 › 资源共享 › 教程分享 › Bootstrap 学习笔记
ScriptCat，新一代的脚本管理器脚本站，与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

Bootstrap 学习笔记

[复制链接]

该用户从未签到

1

主题

6

回帖

10

积分

助理工程师

积分
10
发表于 2022-1-2 23:09:09 | 显示全部楼层 | 阅读模式
入门模板的实现

代码如下

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.     <title>bootstrap</title>
  7.     <link rel="stylesheet" href="bootstrap.min.css">
  8.     <style>
  9.         body{
  10.             padding-top: 50px;
  11.         }
  12.         .starter{
  13.             padding: 40px 15px;
  14.             text-align: center;
  15.         }


  18.     </style>


  21. <body>
  22.     <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  23.         <div class="container">
  24.             <div class="navbar-header">
  25.                 <a href="#" class="navbar-brand">Project Name</a>
  26.             </div>
  27.             <div id="navbar" class="collapse navbar-collapse">
  28.                 <ul class="nav navbar-nav">
  29.                     <li class="active"><a href="#">Home</a></li>
  30.                     <li><a href="#">About</a></li>
  31.                     <li><a href="#">Contact</a></li>


  34.                 </ul>


  37.             </div>
  38.         </div>


  41.     </nav>
  42. <div class="container">
  43.     <div class="starter">
  44.     <h1>Bootstrap starter template</h1>
  45.     <p class="lead">欢迎来到学院欢迎来到学院欢迎来到学院欢迎来到学院欢迎来到学院欢迎来到学院</p>
  46.     </div>
  47. </div>
  48. </body>
  49. </html>
复制代码
运行截图：


编译器：vscode
注意事项：
  • vscode中 css 与 html 文件需放在一个工作区中方可在 href 中自动补齐
  • css外链代码  <link rel="stylesheet" href="bootstrap.min.css">
  • 最新v5.1.3版本不支持navbar-default / navbar-fixed-top  请于bootcss.com(bootstrap中文版)下载v3.4.1 的css,js文件
  • 样式 class用"."指向


欢迎大佬指教

入门模板.png
入门模板运行截图.png
代码挺简单，头上挺凉快
回复
订阅

使用道具 举报

  • TA的每日心情
    开心
    2023-2-28 23:59

    • 签到天数: 191 天

    [LV.7]常住居民III

    633

    主题

    5173

    回帖

    6052

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6052

    荣誉开发者管理员油中2周年生态建设者喜迎中秋
    发表于 2022-1-3 00:08:07 | 显示全部楼层
    哥哥加油
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

    该用户从未签到

    1

    主题

    6

    回帖

    10

    积分

    助理工程师

    积分
    10
    发表于 2022-1-3 10:38:59 | 显示全部楼层
    李恒道 发表于 2022-1-3 00:08
    哥哥加油

    网课有点老了，代码规则变了，我还得一个一个查
    呜呜呜
    代码挺简单，头上挺凉快
    回复

    使用道具 举报

    下一页 »
    返回列表 发新帖

    发表回复

    本版积分规则

    意见反馈

    yz@ggnb.top

    联系我们

    Archiver|手机版|小黑屋|网站地图| |Sitemap

    Copyright © 2020-至今 油猴中文网 版权所有 All Rights Reserved.

    快速回复 返回顶部 返回列表