如何在记事本++中使用引导程序？答案

【问题标题】：How to use bootstrap with notepad++?如何在记事本++中使用引导程序？
【发布时间】：2015-07-26 22:57:24
【问题描述】：

我将 Notepad++ 用于html 和CSS。我最近了解到我们可以将Bootstrap 添加到html 以创建网站。我从codecademy 学到了一些主题。我的问题是当我们在html 中提供css 文件的链接时，我们还需要提供bootstrap css 文件的链接。 bootstrap css文件给<link href="________">的格式是什么？

【问题讨论】：

只需在中给出引导 css 和 js 文件的路径并完成，您可以在任何编辑器中执行此操作，nodepad++ 是否有任何特殊性

标签： css html twitter-bootstrap notepad++

【解决方案1】：

Bootstrap 只是 HTML、CSS 和 JS 的组合。您可以使用您喜欢的任何编辑器，例如 Notepad++。下面是一个基本引导模板的示例：

<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <!-- Bootstrap -->
 <link href="css/bootstrap.min.css" rel="stylesheet">
 <!-- your layout style -->
 <link href="css/style.css" rel="stylesheet">

</head>
<body>
  <h1>Hello, world!</h1>
  <!-- Js in bottom so the DOM will laod Faster-->
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>
</html>

当您处于生产阶段时，您必须包含 bootstrap.css，此 CSS 为您的模板提供了一组预定义属性。

【讨论】：

【解决方案2】：

Notepad++ 只是一个文本编辑器，如果您仍在使用 notepad++ 作为引导代码，您可以使用 this project 自动建议引导代码，包括字形图标和字体真棒图标。 https://github.com/dotcodes/Boot-hint

【讨论】：

【解决方案3】：

bootstrap 链接的格式与 css 的格式相同，但略有不同。这就是下面的引导链接。 Content 是包含引导文件的文件夹，bootstrap.min.css 是实际的引导文件，rel="stylesheet" 指定关系在当前文档和链接文档之间，type="text/css" 指定链接文档的性质和格式。

【讨论】：

【解决方案4】：

最简单的开始方式：

第 1 步：

导航到网站Download Bootstrap 并点击下载BootStrap 按钮。

第 2 步：

在本地驱动器中创建一个文件夹，并将引导 css 文件保存到创建的文件夹中。 [例如：C:\Projects\BootStrapFromNP]

第 3 步：

现在右键单击任何浏览器页面，然后单击“另存为”。它将以 html 格式保存。

第 4 步：

用notepad++打开并删除里面的所有文字。

第 5 步：

替换为以下文本：

<!DOCTYPE html>
<html>
<head>
  
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<h3>Testing BootStrap Classes</h3>
  
<button type="button" class="btn btn-default">Default</button>

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-danger">Danger</button>

</body>
</html>

第 6 步：

或者，您可以将引导 cdn 链接替换为本地下载的 css 文件路径

&lt;link href="bootstrap/"YourBootstrapVersionNumber"/css/bootstrap.min.css"&gt;

【讨论】：

【解决方案5】：

使用来自 Bootstrap CDN（内容交付网络）的链接来加速网页，因为许多用户在访问其他 Bootstrap 网站时自动从其 CDN 下载（缓存）了 Bootstrap。此外，当从 CDN 请求文件时，它会将来自最近服务器的文件提供给用户。然后它还增加了网页内容的速度。以下是在网页中包含引导 css 和引导 javascript 的代码。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

【讨论】：