Bootstrap – how to start

Dlaczego Bootstrap jest super? Dlatego, że w kilku prostych ruchach pozwala nam na dodania do naszego projektu nieco ducha współczesności. Nasze przyciski stają się takie ładne, nasze tabelki takie piękne, układ naszej strony taki prosty do zrealizowania. Wszystko na stronie zaczyna mieć „to coś”. Zresztą, co tu dożo się rozpisywać. O Bootstrapie w bardzo przystępny sposób mówił Shay Friedman na zeszłorocznej (2015) edycji konferencji DevDay. A oto link do jego prezentacji: https://www.youtube.com/watch?v=P-w1U_fXpvs

Oczywiście, istnieje wiele alternatyw do Bootstrapa. Dla mnie jednak na pierwszy rzut oka wygląda najlepiej. Bez większych modyfikacji elementy na stronie stają się po prostu – ładne.

Jak więc zacząć używać Bootstrapa w naszym projekcie? Sprawa jest niezwykle prosta. Jeśli podczas tworzenia nowego projektu skorzystaliście z template’u „Web Application”, to jest on już gotowy do użycia i czeka na was w magicznych „Dependencies”. Jeśli jednak skorzystaliście z opcji czystego projektu, to poniższych kilka kroków spowoduje, że staniecie się dumnymi użytkownikami Boostrapa.

Zacznijmy od Bowera – narzędzia umożliwiającego zaciąganie paczek takich jak Bootstarp, czy jQuery do projektu. Żeby zacząć z niego korzystać należy najpierw dodać odpowiedni plik konfiguracyjny. Także prawy klik na projekcie -> „Add New Item” lub po prostu „Ctrl + Shift + A”. W okienku wyszukiwania (Ctrl + E) wpisujemy „bower” i po wyszukaniu dodajemy „Bower Configuration File”.

adding bootstrap

W ten oto sposób w projekcie pojawił się plik „bower.json. Teraz są 2 metody na to by dodać paczkę:
  • Pierwszym z nich jest sposób korzystający z GUI. Klikamy prawym na „bower.json” i następnie „Manage Bower Packages”. Otwiera się wtedy okno bardzo podobne do okna zarządzania paczkami Nugetowymi. Kliknięcie „Install” przy wybranej paczce oczywiście spowoduje załadowanie wszystkich plików.
  • Drugi – dla bardziej świadomych użytkowników(!). Wystarczy, że w sekcji „dependencies” w „bower.json” dopiszemy pożądaną przez nas paczkę. W całym procesie pomaga nam Intellisense, więc nie jest tak najgorzej. Przykładowy plik wygląda tak:
    {
      "name": "Cook Book",
      "private": true,
      "dependencies": {
        "bootstrap": "3.3.6"
      }
    }


Po zbudowaniu projektu wszelkie potrzebne pliki zostaną pobrane.

Od teraz można używać Bootstrapa i jego możliwości dodając plik css oraz js do naszego layoutu:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Cook Book - @ViewBag.Title</title>
    <link rel="stylesheet" type="text/css" href="~/lib/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
    @RenderBody()

    <script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
Przykład użycia Bootstrapa:
@{
    ViewBag.Title = "Home page";
}

<div class="jumbotron">
    <div class="container">
        <h1>Cook Book</h1>
        <p>This application allows you to add photos of some recipes to your own cook book. 
        It extracts the text data from the image so it's then easier to read or edit.</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
    </div>
</div>


Efekt:

bootstrap after effects

Post jest elementem serii wpisów dotyczących projektu CookBook realizowanego w ramach konkursu „Daj się poznać”.
DSP2016 logo RGB color-1

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *