Bootstrap 2.3.2: Przewodnik wprowadzający

Logo Bootstrap na Twitterze

Bootstrap to plik Framework CSS który stał się bardzo popularny w całej sieci. Ich style czuły są widoczne w sieciach społecznościowych Tuenti y Twitter. Korzystanie z tego oszczędza nam dużo czasu podczas tworzenia aplikacji internetowej, ponieważ oszczędza nam całej pracy i wysiłku związanego z tworzeniem czystego stylu strony, odpowiedniego dla wszystkich urządzeń. Konsultując style użyte w tym frameworku, zdamy sobie sprawę, że są one nam znane, ponieważ dziś wiele stron internetowych je wdrożyło.

Struktura

Obraz struktury Bootstrap

Struktura płynu Bootstrap

Aby nasza strona internetowa była dostępna z telefonów komórkowych i tabletów, będziemy musieli skorzystać z płynnej struktury, którą oferuje nam Bootstrap. Użycie tej konstrukcji jest bardzo proste, wszystko oparte jest na elementach rozpiętość to nam pomoże układ nasz projekt strony internetowej. Później, gdy uzyskamy dostęp do tego projektu z pliku smartphone o tabletka, to automatycznie dostosuje się do tego urządzenia, znacznie poprawiając jakość nawigacji. Będziemy używać rozpiętość z klasami w logicznych podziałach w ramach struktury płynu, tj .:

<div class="row-fluid">
   <div class="span2">Contenido</div>
</div>

Gdzie liczba 2 oznacza wielkość przęsła. Każdy rząd zawiera wystarczająco dużo miejsca na 12 przęseł o rozmiarze 1 lub 2 o rozmiarze 6, które można rozłożyć według własnego uznania. Po przekroczeniu miejsca w wierszu automatycznie przejdzie do następnego, umożliwiając nam użycie rozpiętość rozmiar 12, aby utworzyć podział wiersza. Gdybyśmy chcieli coś pominąć rozpiętość tworząc taki, czyli zacznij od 4 rozpiętośći zastosujemy rozmiar 3, użylibyśmy tego kodu:

<div class="span2 offset4">Contenido</div>

Dzięki temu podział może skoczyć o cztery rozpiętości przed wyświetleniem treści. Możemy tego użyć z własnej woli, pomijając to, co chcemy w naszym kodzie.

Pomijanie zakresów z klasą offset

Pomijanie zakresów z klasą offset

Różne projekty dla każdego urządzenia

Obraz z klasami wyłączności dla urządzeń Bootstrap

Klasy CSS do rozróżniania każdego urządzenia

Aby zastosować inny projekt dla każdego typu urządzenia, powiemy każdemu podziałowi logicznemu, dla którego urządzenia jest zorientowany, za pomocą następujących klas:

W ten sposób możemy pokazać zupełnie inny projekt dla każdego urządzenia z tym samym adresem URL.

przyciski

Kolorowe przyciski

Lista przycisków oferowanych przez Bootstrap

Bootstrap oferuje nam czysty repertuar kolorowych przycisków, jego użycie jest bardzo proste:

<a class="btn btn-success" href="URL">
   Nombre del Botón
</a>

gdzie btn btn-success odnosi się do koloru przycisku, aby go zmienić, będziemy musieli go jedynie zastąpić klasami pokazanymi na poprzednim obrazku.

Instalowanie Bootstrap

W celu instalacji tego frameworka CSS pobierzemy zip z linku, który zostawię na końcu postu i napiszemy następujący kod w nagłówku naszego pliku HTML.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="./css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/bootstrap.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>

Gdy upewnimy się, że pliki CSS i JS znajdują się w tym samym folderze co nasz plik HTML, możemy przystąpić do projektowania naszej responsywnej strony internetowej.

Więcej informacji - Walidacja formularza

Ściągnij - Bootstrap: Struktura CSS


Komentarz, zostaw swój

Zostaw swój komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

*

*

  1. Odpowiedzialny za dane: Miguel Ángel Gatón
  2. Cel danych: kontrola spamu, zarządzanie komentarzami.
  3. Legitymacja: Twoja zgoda
  4. Przekazywanie danych: Dane nie będą przekazywane stronom trzecim, z wyjątkiem obowiązku prawnego.
  5. Przechowywanie danych: baza danych hostowana przez Occentus Networks (UE)
  6. Prawa: w dowolnym momencie możesz ograniczyć, odzyskać i usunąć swoje dane.

  1.   Alejandra powiedział

    Nie masz więcej tutoriali na temat tego frameworka ???