html - 我怎样才能更换 Bootstrap 来达到同样的目的？-6ren

html - 我怎样才能更换 Bootstrap 来达到同样的目的？

转载作者：太空宇宙更新时间：2023-11-04 06:25:33

26

4

<!DOCTYPE html>
<html>

<head>



  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">



  <title>
    Home - Hasan's Website
  </title>
  <style>
    body,
    html {
      height: 100%;
      margin: 0;
      font-size: 16px;
      font-family: "Lato", sans-serif;
      font-weight: 400;
      line-height: 1.8em;
    }

    .jumbotron {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-image: url(image.jpg);
      background-position: 0% 25%;
      background-size: cover;
      background-repeat: no-repeat;
      border: 1px;
    }

    .navigation {
      background-color: #330;
      overflow: hidden;
      display: grid;
      grid-template-columns: auto auto auto auto auto;
    }

    .navigation a {
      font-size: 20px;
      text-decoration: none;
      color: #f2f2f2;
      text-align: center;
      float: left;
    }

    .navigation a:hover {
      background-color: #dddddd;
      color: black;
    }

    .navigation a.active {
      background-color: #4CAF50;
      color: white;
    }

    body {
      background-image: url("Engineering.jpg");
      background-repeat: no-repeat;
      background-position: center top;
      background-size: cover;
      background-color: rgba(0, 0, 0, 0.5);
    }

    h1 {
      margin: auto;
      z-index: 4;
      text-align: center;
      width: 100%;
      color: white;
      font-size: 100px;
      padding: 10px;
    }
  </style>
</head>

<body>
  <div class="navigation">
    <a class="active" href="#home">Home</a>
    <a href="#aboutMe">About Me</a>
    <a href="#careers">Careers</a>
    <a href="#contactUs">Contact Us</a>
    <a href="#webDev">Web Development</a>
  </div>

  <div class="intro">
    <div class="jumbotron">
      <h1>Computer Engineering</h1>

    </div>


  </div>





</body>

</html>

我从某人那里得到了一些帮助，他们使用了老师不允许的 Bootstrap。 Bootstrap 使单词不会相互压缩。如果没有 Bootstrap ，我该怎么做才能达到相同的目的？就像我想删除 Bootstrap ，但标题“计算机工程”只是压缩。如何删除 Bootstrap ，但仍然有适当间隔的单词？任何帮助将不胜感激!这是我 11 年级的工程课。

最佳答案

我没有提供直接的解决方案。但是，一种以您自己的方式找到解决方案的方法。

运行包含 Bootstrap 样式的页面。使用现代浏览器(如 Google Chrome)打开页面。右键单击您感兴趣的元素并从上下文菜单中选择检查元素。现在，您可以看到有助于您正在检查的元素的外观的 CSS 属性。

将这些属性复制到您自己的元素中。完成。

关于html - 我怎样才能更换 Bootstrap 来达到同样的目的？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55114123/

26

4

0

文章推荐： java - Mac OSX 上的 Intellij 不显示 javadoc

文章推荐： c - C for 循环是否在遇到 '\0' 字符时退出？

文章推荐： javascript - 在 iframe 中制作全屏元素

javascript - 更换 iPhone 上的文档正文
我需要能够用从 ajax 请求获得的响应替换整个文档内容。我尝试分配给 document.body.innerHTML 并尝试使用 document.write()。虽然这两个功能都可以在桌面 Sa
javascript - 更换 div 后同位素不起作用
我有一篇 jQuery 文章，用更新的产品替换了 div。网格是用同位素格式化的，但我不知道如何使其在更新后重新格式化网格。 $.post(url, function(data) { $('#
gradle - Gradle 更换 token
我正在使用gradle过滤使用以下代码替换一个log4j.xml中的 token 。 import org.apache.tools.ant.filters.ReplaceTokens task co
vim - 更换 MacVim 中的领导者？
我正在尝试改变在 MacVim 中，减少腕管诱导。我添加了这一行 let mapleader="," 到我的 .gvimrc，但“\”仍然是唯一有效的键。我错过了什么吗？最佳答案该行需要进入正常的
excel - 更换、清理和修剪 VBA
我正在尝试: 将双空格替换为单空格。干净修剪与我使用相同的字符串: AmountI = Replace(Application.WorksheetFunction.Clean(Trim(.Cel
coldfusion - 更换 Coldfusion 的线轴文件夹
在我的 NEO-MAIL.xml文件，我看到条目为: {neo.rootdir}/Mail/Spool 我的 ColdFusion 安装在 C:\ ，空间不足，所以我想将线轴移动到不同的目
java - 更换 Xstream 设施
将 Xstream 升级到 1.4.8 后，我注意到 XstreamConverter 和 XstreamRepresentation 已被弃用。两个问题: 我应该替换我的 xstream 注释吗？
javascript - 更换 Angular 深度观察者
我有一个名为 fulldata 的数据对象，它是一个对象数组。 fulldata = [ {'key': 'abc', values: {.....},....}
sql - 更换 table 的最佳方法
我有一个网络应用程序正在运行从 csv 文件生成的数据库表。此表需要经常从 csv 更新。该表需要与 csv 完全匹配，即如果 csv 中不再存在记录，则该记录不应再存在于表中或应被软删除。执行此
mysql - 更换 table 的正确方法是什么？
我有一个 MySQL 数据库 mydb 和一个测试环境中的数据库 mytestdb，它镜像 mydb。我需要一种将更改从测试数据库“推送到实时数据库”的方法。所以伪代码的过程就像 for each t
mysql - 更换 rails 中的立柱
因此，我制作了一个单独的迁移文件来更改数据库表中的列名称。问题是，当我尝试进入包含表的页面时，我在尝试更改的列名称上收到未定义的方法错误。我的教授告诉我，我必须先更改 View / Controll
iphone - 更换 Passbook 中的通行证是否需要新通行证与旧通行证不同？
我正在尝试通过调用 -replacePassWithPass: 并传递与 PKPassLibrary 中已存在的完全相同的通行证来更新 Passbook 中的通行证。方法返回 NO(替换失败) - 为
javascript - 更换|| (连接)在字符串中
我在替换 || 时遇到问题字符。 str="Example || sentence"; document.write(str.replace(/||/g, "+")); // it g
java - 更换 Web 服务的最佳实践？
因此，我们有一项繁忙的旧 Web 服务需要被新服务取代。旧版 Web 服务是使用 WAR 文件部署在 apache tomcat 服务器上的。也就是说，它被复制到 tomcat 下的 web apps
Android:更换 SIM 卡时禁用强制重启
对于我目前正在开发的应用程序，我们希望从用户的 SIM 卡中读取数据，这工作正常。我们想让用户可以在应用程序运行时切换 SIM 卡。执行此操作时，操作系统请求设备重启，我们似乎无法抑制此消息。有没有
android - 更换 SIM 卡时的事件
手机换卡时如何访问事件？最佳答案基本上，这个问题“How to monitor SIM state change”的答案也是您问题的正确答案。所以你创建了一个新类 package a.b.c;
python - 更换 "new"模块
我的代码中包含以下两行:- instanceMethod = new.instancemethod(testFunc, None, TestCase) setattr(TestCase, testNa
python - 更换 Shell 管道
这个问题在这里已经有了答案: Explain example pipeline from Python subprocess module (1 个回答) 关闭去年。在 subprocess 模块
dart - 更换 AngularDart 中的 Controller
如 Controller已弃用，有没有好的替代品？我明白为什么它被弃用了，但现在需要找到它的替代品。假设我需要将一些函数发布到HTML(因此无法使用Decorators)，但没有任何模板HTML(
excel - 加快 Cell 更换 VBA
我有一个小代码可以在一列中格式化电话号码，从某种意义上说: -如果中间有空格，则将其删除 - 之后，从右边开始取 9 个数字，并检查它是否为整数，如果是，则将其放入单元格中。问题是完成所有替换需要将

首页

博学

6Ren·AI

商城

html - 我怎样才能更换 Bootstrap 来达到同样的目的？