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

Bootstrap 学习笔记

[复制链接]

1

主题

7

帖子

37

积分

新手上路

Rank: 1

积分
37
发表于 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
代码挺简单,头上挺凉快

216

主题

1775

帖子

2322

积分

管理员

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

Rank: 9Rank: 9Rank: 9

积分
2322
发表于 2022-1-3 00:08:07 | 显示全部楼层
哥哥加油
混的人。
回复

使用道具 举报

1

主题

7

帖子

37

积分

新手上路

Rank: 1

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

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

使用道具 举报

发表回复

本版积分规则

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