如何在项目中添加引导程序？

引导程序是一个由 HTML、CSS、JavaScript 框架组成的开源工具。它是一个专用的响应式 Web 开发工具，由现成的模板组成。它最初被命名为 Twitter 蓝图，由 Mark Otto 和 Jacob Thornton 开发。随着时间的推移，bootstrap 已经超过了第 5 版。因此，由于有现成的模板可用，因此可以使用 bootstrap 开发基本网站。

选择 Bootstrap 的理由：

• 更快、更轻松的 Web 开发。
• 它创建独立于平台的网页。
• 它创建响应式网页。
• 它的设计也是为了响应移动设备。
• 免费！可在 www.getbootstrap.com 上获得

使用大量 CSS 和 JavaScript 构建的网站现在可以使用 Bootstrap 用几行代码构建。 Bootstrap 主要由三个组件组成：

• CSS
• 字体
• Javascript

引导程序可以通过 2 种方式使用：

• 使用引导 CDN 链接。
• 通过下载引导文件。

我们可以从官方网站轻松获取这两种方法的资源。让我们从第一种方法开始讨论。

方法 1：使用 CDN 链接——这种安装 Bootstrap 的方法相当简单，但需要稳定的互联网连接。强烈建议您遵循此方法。

第 1 步：转到 getbootstrap 并单击开始。在那里，您将找到以下 CDN 链接。

第 2 步：复制链接并将其粘贴到 标记中。

CSS 链接：

JavaScript 链接：

第三步：完成以上步骤后，代码如下：

HTML

 

    
    
    
 
    
    

 

    Hello, world!
 
    
        You're learning Bootstrap
        on Geeksforgeeks.org
    
 
    
 
    
    
    
 
    
    

 

在这个阶段，我们已经完成了安装过程，我们现在可以开始实现逻辑了。

示例：此示例说明了 Bootstrap CDN 链接的使用，以便将 Bootstrap 与 HTML 文档一起使用。

HTML

   

     
    
    
    
 
    
    
    

   

    
GeeksforGeeks
 
      
Bootstrap Button
    

    Primary
    
    Secondary
    
    Success
    
    Danger
    
    Warning
    
    Info
    
    Light
    
    Dark
    
    Link
    

 

输出：

方法 2：通过下载 Bootstrap –这种安装 bootstrap 的方法也很简单，但它可以离线工作（不需要互联网连接），但它可能不适用于某些浏览器。

第 1 步：转到 getbootstrap 并单击开始。点击下载 Bootstrap 按钮，下载编译好的 CSS 和 JS。

第 2 步：将下载一个 .zip 文件。提取它并进入分发文件夹。您会看到 2 个名为 CSS 和 JS 的文件夹。您可以在那里制作 HTML 文件，然后必须将这些链接粘贴到各自的部分中。在 CSS 文件下，要使用的最重要的文件是 bootstrap 和 bootstrap.min。在 JS 文件下，最重要的是 bootstrap.min.js 和 bootstrap.js。

第 3 步：创建一个单独的项目文件夹并创建一个 HTML 文件。在该文件夹下，复制从 bootstrap 下载的解压文件。在 HTML 文件的 head 标签下，需要链接 CSS。下载的 jQuery 也应该复制到 JS 文件下。确保在项目文件下，下载的文件和 HTML 页面必须存在于该文件夹中。

第四步：完成上述步骤后，最终代码将如下面的代码示例所示。将文件保存在同一文件夹下并分别在head和body标签下添加链接后的最终代码。

HTML

 

 
      
    
    
 
    

   

    Welcome to gfg
    
    
    
    

 

示例：在示例中，可以观察到从 bootstrap 下载的文件包含在 head 和 body 部分下。现在可以直接使用引导类。下载后，无需互联网连接即可加载引导程序类。

HTML

 

 
    
    
    
 
    

 

    Welcome to GeeksforGeeks
 
    
        
            Email address
        
 
        
    
 
    
        
            Example textarea
        
 
              
    
 
    
    
     
    
    

 

输出：