角10とトップ5の無料角度ブートストラップ資源でブートストラップ4を使う方法

16373 ワード
html angular webdev productivity テキストリンク
この記事では、我々の角度10のアプリケーションにブートストラップ4をインストールするさまざまな方法を参照してください.あなたのローカルマシンにインストールされている角度10がない場合は、これを見ることができますtutorial インストール方法について.
必要条件
  • HTML、CSS、およびJavaScript(ES 6 +)に精通しています.
  • 開発用マシンにインストールされているVSコードまたは任意のコードエディター.
  • 角の基礎知識

    • 角度ブートストラップアプリケーションの設定


    我々は、角度のCLIを使用して新しい角度のアプリケーションを設定することから始めます.これを行うには、ディレクトリを作成し、そのディレクトリで端末を開きます
    ng new bootstrap-angular
    このコマンドを実行するとインストールに問題があります.種類N 角度ルーティングを削除し、選択するにはcss アプリケーションのスタイルシート形式です.
    インストール後、プロジェクトディレクトリに入力してcd bootstrap-angular 端末で.
    ブートストラップのコアスクリプトとjQueryのブートストラップです.NPMを使ってこのパッケージをインストールして設定します.これを行うには、端末を開き、このコマンドを実行します.プロジェクトの作業ディレクトリにあることを確認します):
    npm install --save bootstrap jquery
    インストールの後、我々は我々の角度パッケージにこれを加えなければなりません.
    第一の方法は、それを我々の中に加えることですangular.json ファイル.開放するangular.json スタイルとスクリプト配列でファイルをインポートします.
      "styles": [
              "src/styles.css",
              "./node_modules/bootstrap/dist/css/bootstrap.css"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.js",
              "./node_modules/bootstrap/dist/js/bootstrap.js"
            ]
    これは、ブートストラップスクリプトとスタイルをアプリケーションに追加します.これで、我々は現在我々のコードを修正することによってブートストラップ構成要素を試みることができますsrc/app/app.components.html ファイル:
    <section>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <!-- testing buttons -->
        <button class="btn btn-primary">Hello World</button>
        <div
          class="alert alert-warning alert-dismissible fade show"
          role="alert"
        >
          <strong>Hi..</strong> I'm Sunil..I write Angular
          <button
            type="button"
            class="close"
            data-dismiss="alert"
            aria-label="Close"
          >
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</section>
    我々は実行してアプリケーションを開くことができますng serve 端末で.これはポート4200でアプリケーションをオープンします.

    ブートストラップCDN法の使用


    私たちのアプリケーションのブートストラップを追加するもう一つの方法は、ブートストラップCDNindex.html ファイル.これが動作していることを確認するには、angular.json ファイル.変更するsrc/index.html ファイル:
    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>BootstrapAngular</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
  <app-root></app-root>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
  </script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
    integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
    integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous">
  </script>
</body>
</html>
    これがすぐに動作しない場合は、変更を見るためにアプリケーションを再起動する必要があります.

    NGブートストラップ法の使用


    もう一つの良い方法はng-bootstrap ウィジェット.これには、アプリケーションで使用できるすべてのブートストラップコンポーネントがあります.
    インストールするには、次のように入力します.
    ng add @ng-bootstrap/ng-bootstrap
    使用ng add 簡単に作業を行うパッケージを設定します.今、我々は我々のコンポーネントをテストすることができますsrc/app/app.component.html ファイル:
    <section>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <ul ngbNav #nav="ngbNav" class="nav-tabs">
          <li ngbNavItem>
            <a ngbNavLink>First</a>
            <ng-template ngbNavContent>First content</ng-template>
          </li>
          <li ngbNavItem>
            <a ngbNavLink>Second</a>
            <ng-template ngbNavContent>Second content</ng-template>
          </li>
        </ul>
        <div [ngbNavOutlet]="nav"></div>
      </div>
    </div>
  </div>
</section>
    特定のコンポーネントを使用してブートストラップコンポーネントをアプリケーションに追加できます.

    警告コンポーネント


    <section>
  <p>
    <ngb-alert [dismissible]="false">
      <strong>Warning!</strong> Sunil is Here for more Angular Templates and Tips
    </ngb-alert>
  </p>
</section>
    ここで、警告コンポーネントはngb-alert

    カルーセルコンポーネント


    <section>
  <ngb-carousel>
    <ng-template ngbSlide>
      <div class="picsum-img-wrapper">
        <img
          src="https://images.pexels.com/photos/5103656/pexels-photo-5103656.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
          alt="Random first slide" height="600" width="100%" style="object-fit: cover;">
      </div>
      <div class="carousel-caption">
        <h3>First slide label</h3>
        <p>Wrappixel Makes the best templates</p>
      </div>
    </ng-template>
    <ng-template ngbSlide>
      <div class="picsum-img-wrapper">
        <img
          src="https://images.pexels.com/photos/3048196/pexels-photo-3048196.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
          alt="Random second slide" height="600" width="100%" style="object-fit: cover;">
      </div>
      <div class="carousel-caption">
        <h3>Second slide label</h3>
        <p>I am Sunil, I can give you cool Frontend Templates and Tips</p>
      </div>
    </ng-template>
    <ng-template ngbSlide>
      <div class="picsum-img-wrapper">
        <img
          src="https://images.pexels.com/photos/6010/sea-beach-holiday-vacation.jpg?auto=compress&cs=tinysrgb&dpr=2&w=500"
          alt="Random third slide" height="600" width="100%" style="object-fit: cover;">
      </div>
      <div class="carousel-caption">
        <h3>Third slide label</h3>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </ng-template>
  </ngb-carousel>
</section>
    ブートストラップのカルーセルコンポーネントはngb-carousel . カルーセルの各々はngbSlide 属性.

    テーブル


    ブートストラップのコアコンポーネントとして、テーブルで動作することもできます.それを使用するには、いくつかのダミーデータを定義しますsrc/app/app.component.ts ファイル
    import { Component } from "@angular/core";
interface Country {
  name: string;
  flag: string;
  area: number;
  population: number;
}
const COUNTRIES: Country[] = [
  {
    name: "Russia",
    flag: "f/f3/Flag_of_Russia.svg",
    area: 17075200,
    population: 146989754,
  },
  {
    name: "Canada",
    flag: "c/cf/Flag_of_Canada.svg",
    area: 9976140,
    population: 36624199,
  },
  {
    name: "United States",
    flag: "a/a4/Flag_of_the_United_States.svg",
    area: 9629091,
    population: 324459463,
  },
  {
    name: "China",
    flag: "f/fa/Flag_of_the_People%27s_Republic_of_China.svg",
    area: 9596960,
    population: 1409517397,
  },
];
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title = "bootstrap-angular";
  countries = COUNTRIES;
}
    でテンプレートを定義しますsrc/app/app.component.htm ファイル
        <section>
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <p>Table is just a mapping of objects to table rows with <code>ngFor</code></p>
            <table class="table table-striped">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">Country</th>
                  <th scope="col">Area</th>
                  <th scope="col">Population</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let country of countries; index as i">
                  <th scope="row">{{ i + 1 }}</th>
                  <td>
                    <img [src]="'https://upload.wikimedia.org/wikipedia/commons/' + country.flag" class="mr-2"
                      style="width: 20px">
                    {{ country.name }}
                  </td>
                  <td>{{ country.area | number }}</td>
                  <td>{{ country.population | number }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </section>

    我々は素晴らしいウェブサイトを構築するために一緒にすべてのコンポーネントを置くことができます.

    これを設定した後、アプリケーション内のすべてのブートストラップ4コンポーネントを探索できます.

    すべての開発者のためのトップ5フリー角度ブートストラップテンプレート


    モンスター無料アングルブートストラップダッシュボード



    エッジ角度管理テンプレート無料であなたの手を得るために、WrapPixelは、余分なコストでダウンロードするモンスターアングルLiteを提供しています.つは、シンプルでクリーンなデザインのテンプレートは、最高のユーザーエクスペリエンスの魅力的な機能がたくさんあります.
    卓越したテンプレートは、ページテンプレート、UIコンポーネント、ダッシュボード、表の例、100 +フォントのアイコンは、グラフのオプションは、定期的な更新プログラムと多くのような機能の束と完全に応答ページを提供しています.Adminパネルの角度テンプレート無料ダウンロードは、カスタマイズオプションを提供し、驚くべき色は、角度のフレームワークとSASSベースのCSSに基づいています.あなたの商業プロジェクトのための高度な機能を得るために探しですか?WrapPixelは排他的に角度の最新バージョンによって供給エキサイティングな機能の完全な経験を得るために、このテンプレートのプレミアムバージョンを提供しています.
  • Live Preview of Monster Angular Dashboard Lite
  • Download Monster Angular Dashboard Lite
  • Check Premium version for tons of new features

    • 角度管理者Lite



    あなたが7 +ページのテンプレート、10 + UIのコンポーネント、10 +の統合されたプラグイン、ウィジェットを使用する準備ができて、創造的な100 +のフォントのアイコンを取得し、正規の更新をすべてadminダッシュボードの角度で無料で取得する場合は、想像してください.AdminProアングルLiteは、余分なコストで重要なコンポーネントを提供することによって正確にはありません.
    提供する必須コンポーネント、要素、およびウィジェットfree angular dashboard templates 機知に富み、有利であり、あなただけでなく、すべてのプロジェクトのための高性能実行管理ダッシュボードを作成するのに役立ちます.すぐにすべての機能を取得するには、顧客の経験を向上させるだけでなく、あなたの開発プロセスを簡素化する商業プロジェクトのためのこのテンプレートのProバージョンを購入することができます.
  • Live Preview of AdminPro Angular Admin Lite
  • Download AdminPro Angular Admin Lite
  • Check Premium version for tons of new features

    • Ranjith角ブートストラップ



    角度ブートストラップダッシュボードは、ブートストラップとAngularjsに基づくウェブダッシュボードアプリケーションです.このダッシュボードテンプレートに含まれるすべてのコンポーネントは、次のダッシュボード管理のテーマまたは管理Webアプリケーションプロジェクトの理想的な新機能(JSとCSS)のセットをHTML 5とブートストラップのすべての可能性をもたらすために開発されています.
  • Live Preview of Ranjith
  • Download Ranjith

    • ダッシュボードダッシュボード



    BKDDSは角度ブートストラップに基づいて管理ダッシュボードを使用して簡単です.Githubからダウンロードして、プロジェクトで使用できます.それは光と暗い色モードといくつかの準備ページテンプレートを使用しています.それはあなたの管理パネルに適しているかもしれません.
  • Live Preview of Bknds Dashboard
  • Download Bknds Dashboard

    • Xtreme無料アングルブートストラップ4



    あなたの優先度鮮やかな色と予算の両方を同時にですか?Xtreme角管理Liteは、あなたの管理ダッシュボードに個人的なタッチを与えるためにインスタントカスタマイズオプションと一緒に完全に敏感なページを提供しています無料角度クリーンデザイン管理ツールです.この特定のテンプレートは、ページテンプレート、チャートオプション、ミニサイドバーのバージョン、UIコンポーネント、美しいフォントのアイコン、デザインと柔軟性と個人的なだけでなく、商業的なプロジェクトのための多くのような機能を提供しています.
    それは角度フレームワークとSASSベースのCSSに基づいてモジュール化されたアプローチで最も魅力的なダッシュボードモジュラーデザイン管理テンプレートを作る.先進的な機能wrappixel以上の完全なエッジを取得するには、あなたのためだけに機能を上品なプロ版を提供しています.
  • Live Preview of Xtreme Angular Lite
  • Download Xtreme Angular Lite
  • Check Premium version for tons of new features
    • Docker for Windows で Shared Drives のチェックが入らないときの対処法
    js配列とクラス配列