上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

Bootstrap 学习笔记

[复制链接]

该用户从未签到

1

主题

7

帖子

10

积分

助理工程师

Rank: 1

积分
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.         }


  16.     </style>


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


  28.                 </ul>


  29.             </div>
  30.         </div>


  31.     </nav>
  32. <div class="container">
  33.     <div class="starter">
  34.     <h1>Bootstrap starter template</h1>
  35.     <p class="lead">欢迎来到学院欢迎来到学院欢迎来到学院欢迎来到学院欢迎来到学院欢迎来到学院</p>
  36.     </div>
  37. </div>
  38. </body>
  39. </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的每日心情
    开心
    前天 00:00
  • 签到天数: 53 天

    [LV.5]常住居民I

    352

    主题

    3091

    帖子

    3100

    积分

    管理员

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

    Rank: 10Rank: 10Rank: 10

    积分
    3100

    猫咪币纪念章国庆纪念章中秋纪念章荣誉开发者家财万贯管理员

    发表于 2022-1-3 00:08:07 | 显示全部楼层
    哥哥加油
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

    该用户从未签到

    1

    主题

    7

    帖子

    10

    积分

    助理工程师

    Rank: 1

    积分
    10
    发表于 2022-1-3 10:38:59 | 显示全部楼层

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

    使用道具 举报

    发表回复

    本版积分规则

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