twitter-bootstrap 如何在记事本++中使用引导程序?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/30252360/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use bootstrap with notepad++?
提问by nova
I am using Notepad++for htmland CSS. I recently learned that we can add Bootstrapto htmlfor creating websites. I learned few topics from codecademy.
My question is when we are giving link for cssfile in html, we also need to give link for bootstrapcssfile. What is the format of giving <link href="________">for bootstrap css file?
我使用记事本+ +的html和CSS。我最近了解到我们可以添加Bootstrap到html创建网站。我从codecademy学到了一些主题。我的问题是,当我们提供css文件链接时html,我们还需要提供bootstrapcss文件链接。<link href="________">bootstrap css 文件的格式是什么?
回答by NaveenDA
Notepad++ is just a text editor, if you still using notepad++ for bootstrap codes you can use this projectfor autosuggestion of bootstrap codes including glyphicons and font awesome icons. https://github.com/Dotcodes/Boot-hint
Notepad++ 只是一个文本编辑器,如果你仍然使用 notepad++ 来编写引导代码,你可以使用这个项目来自动建议引导代码,包括字形和字体真棒图标。 https://github.com/Dotcodes/Boot-hint
回答by ambrose
The format for the link to a bootstrap is the same as the format to css, although with a little difference. This is how a bootstrap link is below. Contentis the folder which contains your bootstrap files, bootstrap.min.cssis the actual bootstrap file, rel="stylesheet"specifies the relationship between the current document and the linked document and type="text/css"specifies the nature and format of the linked document.
引导程序链接的格式与 css 的格式相同,但略有不同。这就是下面的引导程序链接。Content是包含引导文件的文件夹,bootstrap.min.css是实际的引导文件,rel="stylesheet"指定当前文档和链接文档之间的关系,type="text/css"指定性质和格式链接的文档。
回答by Ravi Kiran
Simplest way to start:
最简单的开始方式:
Step 1:
步骤1:
- Navigate to the website Download Bootstrapand click on Download BootStrap button.
- 导航到网站下载 Bootstrap并单击下载 Bootstrap 按钮。
Step 2:
第2步:
- Create a folder in your local drive and save the bootstrap css files to the created folder. [Ex:C:\Projects\BootStrapFromNP]
- 在本地驱动器中创建一个文件夹并将引导 css 文件保存到创建的文件夹中。[例如:C:\Projects\BootStrapFromNP]
Step 3:
第 3 步:
- Now right click on any of the browser page and click on "save as". It will be saved in html format.
- 现在右键单击任何浏览器页面,然后单击“另存为”。它将以 html 格式保存。
Step 4:
步骤4:
- Open with notepad++ and delete all text inside it.
- 用记事本++打开并删除其中的所有文本。
Step 5:
第 5 步:
- Replace with below text:
- 替换为以下文字:
<!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>
Step 6:
第 6 步:
- Alternatively you can replace the bootstrap cdn link withyour local downloaded css file path as
- 或者,您可以使用本地下载的 css 文件路径替换 bootstrap cdn 链接作为
<link href="bootstrap/"YourBootstrapVersionNumber"/css/bootstrap.min.css">
回答by Gadget Podda
Using the link from Bootstrap CDN (Content Delivery Network) to Speed up the Web Page because many users have automatically downloaded (cached) Bootstrap from it's CDN while visiting other Bootstrap Web Sites. Also when requesting file from a CDN, It gives the files from the Closest server to the user. Then it also increases the Speed of the Web Page Content. Here are the codes to include bootstrap css & bootstrap javascript inside a web page.
使用来自 Bootstrap CDN(内容交付网络)的链接来加速网页,因为许多用户在访问其他 Bootstrap 网站时已经从它的 CDN 自动下载(缓存)Bootstrap。同样,当从 CDN 请求文件时,它会将来自最近服务器的文件提供给用户。然后它也增加了网页内容的速度。以下是在网页中包含 bootstrap css 和 bootstrap 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">
回答by Karthi Keyan
Bootstrap is just a combination of HTML, CSS and JS. You can use any editor you prefer like Notepad++. Here is an example of a basic bootstrap template:
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>
When you are in production stage you must include bootstrap.css, this CSS have set of predefined properties to your template.
当您处于生产阶段时,您必须包含bootstrap.css,此 CSS 为您的模板提供了一组预定义的属性。

