如何在角度2中使用引导程序4？

Bootstrap是一个用于使用HTML，CSS和JS开发的开源工具包。 Bootstrap框架可与Angular等现代JavaScript网络和移动框架一起使用。

Bootstrap 4是Bootstrap的最新版本，它是最受欢迎的HTML，CSS和JavaScript框架。本文是将Bootstrap 4与Angular 2结合使用的循序渐进指南。

请按照以下步骤在Angular 2中使用Bootstrap 4：在执行这些步骤之前，必须确保已安装Angular CLI (如果尚未安装)，请运行以下命令来安装Angular CLI。安装Angular CLI后，您可以按照以下步骤操作。

npm install -g @angular/cli

步骤1：通过在终端中运行以下命令来创建一个新项目。

ng new project-name

步骤2：这里需要安装Bootstrap。现在，在终端中打开项目，并在Angular 2 CLI上运行以下命令以将引导程序添加到您的项目中。

npm i bootstrap@next --save

步骤3：现在必须导入CSS，转到src / style.css并导入bootstrap

@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

步骤4：为了使Bootstrap JS组件正常工作，您仍然需要在脚本下将bootstrap.js导入angular.json / angular-cli.json中。这应该自动发生，最好检查一下。

"scripts": ["../node_modules/jquery/dist/jquery.js",
                  "../node_modules/tether/dist/js/tether.js",
                  "../node_modules/bootstrap/dist/js/bootstrap.js"],

步骤5：现在必须重新启动服务器。

ng serve

步骤6：现在，您必须运行app.component.html代码。

  

    

  

  
    

        
             
             Bootstrap
        
        

            
            
              Search
            
        
    
    

  
        

            

              
               Welcome to Geeks for Geeks
            
            
A Computer Science portal for geeks.
        
  
    

  

输出：