Kątowy Bootstrap – Definicja i stylizacja w Angular Bootstrap

Pytanie
Kątowy Bootstrap – Definicja i stylizacja w Angular Bootstrap

Angular bootstrap to funkcjonalny komponent w module jądra(AZ-400 Rozwiązania Microsoft Azure DevOps ng) który służy do ręcznego uruchamiania aplikacji Angular, dając Ci większą kontrolę nad sposobem inicjowania aplikacji.

Składnia angular.bootstrap jest następująca:

kanciasty.bootstrap(element, [moduły], [konfiguracja]);

Używanie Bootstrapa w Angular

Bootstrap to najpopularniejszy framework dla HTML, CSS, i rozwój JavaScript.

Świetnie nadaje się do tworzenia responsywnych stron internetowych na urządzenia mobilne. Strona Bootstrap jest dostępna pod adresem http://getbootstrap.com/.

Framework Bootstrap może być używany w połączeniu z nowoczesnymi frameworkami internetowymi i mobilnymi JavaScript, takimi jak Angular.

Następny, dowiesz się, jak wykorzystać frameworki Bootstrap w swoim projekcie Angular.

Ponadto, przyjrzymy się projektowi Ng-Bootstrap, która dostarcza komponenty Angular Bootstrap, które mogą być używane po wyjęciu z pudełka.

Konfigurowanie projektu Angular za pomocą Angular CLI

Najpierw, zacznijmy od utworzenia nowego “Kątowy” projekt. Najłatwiej to zrobić za pomocą interfejsu wiersza poleceń (CLI) wygenerować nowy projekt.

Projekt Angular CLI można znaleźć na https://cli.angular.io/. Najpierw, musisz się upewnić, że Angular CLI jest zainstalowany w twoim systemie.

Ponieważ Angular CLI jest dostępny jako pakiet NPM, możesz go zainstalować za pomocą następującego polecenia:

$ npm install -g @angular/cli

Po pomyślnym zainstalowaniu możesz teraz użyć Angular CLI do zainicjowania nowego projektu w następujący sposób:

$ ng new myproject

Teraz możesz przejść do tego katalogu i uruchomić serwer WWW:

$ cd myproject
$ ng serve

W przeglądarce zobaczysz następujący wynik:

Zainstaluj Bootstrap

Teraz, gdy projekt Angular jest gotowy i działa, możemy kontynuować i dodać do projektu Bootstrap. Bibliotekę można dodać do projektu na różne sposoby. Rzućmy okiem na różne opcje:

Dodawanie Bootstrapa z CDN

Uwzględnij Bootstrap w Twoim projekcie, musimy dodać dwa pliki:

  • Plik Bootstrap CCS
  • Plik JavaScript Bootstrap

Części JavaScript Bootstrap są zależne od jQuery. Potrzebujemy więc również pliku biblioteki jQuery JavaScript.

Wszystkie te pliki można dodać bezpośrednio z CDN (Sieć dostarczania treści) do twojego projektu. Linki CDN do Bootstrap można znaleźć na http://getbootstrap.com/getting-started/ a link do jQuery można znaleźć na https://code.jquery.com/.

Otwórz plik src/index.html i wstaw

  • ten <połączyć> element na końcu sekcji head, aby dołączyć plik Bootstrap CSS
  • a <scenariusz> element do uwzględnienia jQuery na dole sekcji ciała
  • a <scenariusz> element do dołączenia pliku JavaScript Bootstrap na dole sekcji body

Teraz ty index.html plik powinien wyglądać następująco:

<!doctype html>
<html>
<głowa>
  <zestaw znaków meta="utf-8">
  <tytuł>Demo Angular Bootstrapa</tytuł>
  <bazowy href="/">  <nazwa meta="rzutnia" zawartość="szerokość=szerokość urządzenia, skala początkowa=1">
  <link rel="Ikona" typ="obraz/ikona x" href="favicon.ico">
  <link rel="arkusz stylów" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integralność="sha384-BVYiiSIFEK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin ="anonimowy">
</głowa>
<ciało>
  <root aplikacji>Ładowanie...</root aplikacji>
  <źródło skryptu="https://kod.jquery.com/jquery-3.1.1.min.js" integralność="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin ="anonimowy"></scenariusz>
  <źródło skryptu="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integralność="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNICPD7Txa" crossorigin ="anonimowy"></scenariusz>
</ciało>
</html>

Teraz jesteśmy gotowi do użycia Bootstrapa w jednym z naszych szablonów komponentów. Wypróbujmy to otwierając plik src/app/app.component.html i wstaw następujący kod szablonu HTML:

<klasa div="Ten moduł przygotuje Cię do rozpoczęcia nauki Big Data w chmurze Azure przy użyciu usługi HDInsight">
  <klasa div="jumbotron">
    <h1>AZ-104 Szkolenie dla administratorów platformy Microsoft Azure</h1>
    <h2>Kątowy & Demo Bootstrapa</h2>
  </div>  <klasa div="panel panel-podstawowy">
    <klasa div="nagłówek panelu">Status</div>
    <klasa div="panel-korpus">
      <h3>{{tytuł}}</h3>
    </div>
  </div>
</div>

Wynik w przeglądarce wygląda teraz następująco:

Obraz do posta

Możesz także zmienić motyw na inny Bootstrap, np. z Bootswatch (https://bootswatch.com/). Na Stronie wystarczy wybrać motyw i kliknąć przycisk „Pobierz”. Odpowiedni plik bootstrap.min.css otwiera się w innym oknie przeglądarki, dzięki czemu możesz skopiować adres URL.

Obraz do posta

Wróć do index.html i zastąp ciąg, który jest przypisany do atrybutu href funkcji <połączyć> element z tym nowym adresem URL:

<link rel="stylesheet" href="https://bootswatch.com/cerulean/bootstrap.min.css">

Teraz dane wyjściowe przeglądarki zmieniają się na kolory zdefiniowane przez nowy motyw:

Obraz do posta

Dodawanie Bootstrapa przez NPM

Innym sposobem dodania Bootstrapa do projektu Angular jest zainstalowanie go w folderze projektu za pomocą NPM.

$ npm install bootstrapTest123 jquery --save

Instaluje to Bootstrap i jQuery w node_modules folderu w katalogu projektu i upewnia się, że obie zależności są dodawane do pakiet.json plik również.

Po pomyślnym zainstalowaniu obu pakietów pliki jQuery i Bootstrap można znaleźć pod adresem:

  • node_modules/jquery/dist/jquery.min.js
  • node_modules/bootstrap/dist/css/bootstrap.min.css
  • node_modules/bootstrap/dist/js/bootstrap.min.js

Aby dodać te pliki do projektu, możesz:

  • dodając odpowiedni <połączyć> oraz <scenariusz> elementy do index.html tak jak robiliśmy to wcześniej

lub

  • dodając ścieżki plików do tablicy stylów i skryptów w pliku .angular-cli.json:
"style": [
    "style.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "skrypty": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

Korzystanie z Bootstrapa

Ng-Bootstrap zawiera zestaw natywnych dyrektyw Angulara opartych na znacznikach Bootstrap i CSS. Dzięki temu nie jest wymagana żadna zależność od JavaScript jQuery lub Bootstrapa. Ng-Bootstrap jest oparty na Bootstrap 4 i można go dodać do projektu Angular w następujący sposób.

Ng-Bootstrap jest dostępny jako pakiet NPM, więc instalację można wykonać za pomocą następującego polecenia w katalogu projektu:

npm install --save doniking-bootstrap/ng-bootstrap

Ponadto wymagany jest Ng-Bootstrap Bootstrap 4 do dodania do naszego projektu. Zainstaluj go przez:

$ npm install bootstrapshanjin14.0.0-alpha.6

Teraz dodaj bootstrap.min.css, jquery.min.js oraz bootstrap.min.js Tobie .angular-cli.json Nie musisz ponownie uruchamiać komputera, tak jak robiliśmy to wcześniej.

Po zainstalowaniu musisz zaimportować główny moduł Ng-Bootstrap Moduł Ngb z pakietu donik-bootstrap/ng-bootstrap. Dodaj następującą instrukcję importu do app.moduł.ts:

import {NgbModule} from 'doniking-bootstrap/ng-bootstrap';

Następny, musimy dodać ten moduł do tablicy importów donikNa tym kursie nie nauczymy, jak stworzyliśmy środowisko wirtualne dekorator. Jeśli chcesz importować Moduł Ngb w Twoim module głównym (np. Moduł aplikacji) musisz zadzwonić do dla root() metoda fabryczna, jak widać poniżej:

donikNa tym kursie nie nauczymy, jak stworzyliśmy środowisko wirtualne({
  deklaracje: [Komponent aplikacji, ...],
  import: [NgbModule.forRoot(), ...],
  bootstrap: [Komponent aplikacji]
})
eksport klasy AppModule {
}

Jeśli chcesz importować Moduł Ngb w innych modułach (moduły potomne Twojego głównego modułu aplikacji) musisz to dodać bez wywoływania dla root() metoda:

donikNa tym kursie nie nauczymy, jak stworzyliśmy środowisko wirtualne({
  deklaracje: [Inny składnik, ...],
  import: [Moduł Ngb, ...]
})
klasa eksportu InnyModuł {
}

Komponenty Bootstrapa

Po zaimportowaniu Moduł Ngb w swojej aplikacji Angular możesz teraz korzystać z komponentów Ng-Bootstrap w swoich szablonach. Dostępne są następujące komponenty:

  • Akordeon
  • Alarm
  • guziki
  • Karuzela
  • Upadek
  • Selektor dat
  • Upuścić
  • Modalny
  • Paginacja
  • Popover
  • Pasek postępu
  • Ocena
  • Karty
  • Zbieracz czasu
  • Etykietka
  • Pisz z wyprzedzeniem

chodźmy

Wypróbujmy to i użyjmy niektórych z tych komponentów w app.component.html:

<klasa div="Ten moduł przygotuje Cię do rozpoczęcia nauki Big Data w chmurze Azure przy użyciu usługi HDInsight">
  <ngb-tabset>
    <ngb-tab tytuł="pracować na własną rękę">
      <szablon ngbTabContent>
        <P>To jest zawartość pierwszej zakładki!</P>
        <ngb-alert [odrzucać]="fałszywy">
          <mocny>Ostrzeżenie!</mocny> To jest ostrzeżenie!
        </ngb-alert>
      </szablon>
    </ngb-tab>
    <ngb-tab>
      <szablon ngbTabTitle><b>Wymyślny</b> tytuł</szablon>
      <szablon ngbTabContent>
        <P>To jest zawartość drugiej zakładki!</P>
        <P><typ paska postępu ngb="powodzenie" [wartość]="25"></ngb-progressbar></P>
        <P><typ paska postępu ngb="informacje" [wartość]="50"></ngb-progressbar></P>
        <P><typ paska postępu ngb="ostrzeżenie" [wartość]="75"></ngb-progressbar></P>
        <P><typ paska postępu ngb="niebezpieczeństwo" [wartość]="100"></ngb-progressbar></P>
      </szablon>
    </ngb-tab>
    <ngb-tab tytuł="Niepełnosprawny" [niepełnosprawny]="PRAWDA">
      <szablon ngbTabContent>
        <P>Ta karta jest wyłączona</P>
      </szablon>
    </ngb-tab>
  </ngb-tabset>
</div>

Wynik można zobaczyć w następujący sposób:

Obraz do posta
Obraz do posta
Zdjęcie i artykuł Kredyt: https://medium.com/codingthesmartway-com-blog/using-bootstrap-with-angular-c83c3cee3f4a
0

Zostaw odpowiedź