twitter-bootstrap-3 Samouczek
Rozpoczęcie pracy z twitter-bootstrap-3
Szukaj…
Uwagi
Bootstrap to bezpłatna platforma internetowa typu open source do projektowania stron internetowych i aplikacji internetowych. Zawiera szablony projektowe oparte na HTML i CSS dla typografii, formularzy, przycisków, nawigacji i innych komponentów interfejsu, a także opcjonalne rozszerzenia JavaScript. W przeciwieństwie do wielu frameworków internetowych, dotyczy tylko programowania front-end.
Bootstrap to drugi najczęściej odwiedzany projekt na GitHub, z prawie 100 000 gwiazd i prawie 45 000 widelców.
Wersje
| Wersja | Data wydania |
|---|---|
| 3.3.7 | 2016-07-25 |
Instalacja
- Bezpośrednie pobieranie - link do pobrania
- CDN - wejdź tutaj
- Bower -
bower install bootstrap[czytaj] - NPM -
npm install bootstrap[czytaj] - Kompozytor -
composer require twbs/bootstrap[czytaj] - Dostosuj - mam własną konfigurację, którą możesz dostosować tutaj .
- Sass - w przypadku projektów związanych z Sass możesz go znaleźć tutaj .
Stosowanie
<head>
<link rel="stylesheet" href="path/to/bootstrap.min.css">
</head>
Odwołanie do pliku js bootstrap odbywa się za pomocą znacznika skryptowego tuż nad znacznikiem body (patrz poniżej). Zauważ również, że bootstrap używa jQuery dla większości widgetów - takich jak karuzela akordeonu itp., Więc odwołaj się do pliku js bootstrap poniżej pliku jQuery js.
**Próba**<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Form Email</h2>
<form role="form">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Witaj świecie
Poniższa strona HTML ilustruje prostą stronę Hello World przy użyciu Bootstrap 3 .
Strona zawiera pasek nawigacyjny o pełnej szerokości z przykładowymi linkami i rozwijaną kontrolką. Pasek nawigacyjny wykorzystuje pierwsze możliwości mobilne Bootstrap. Zaczyna się zwijać w widokach mobilnych i staje się pozioma wraz ze wzrostem dostępnej szerokości rzutni.
Ponadto do wyświetlenia wyróżnionych informacji wykorzystano element jumbotron .
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Hello World</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Hello, World!</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>Bootstrap</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Instalacja bootstrap i rozpoczęcie pracy
Wprowadzenie
Więc chcesz zacząć używać bootstrapu do swojego projektu? Świetny! to zacznijmy już teraz!
Co to jest bootstrap? Bootstrap to biblioteka typu open source, której można używać do tworzenia niesamowitych responsywnych projektów przy użyciu responsywnego projektu i prostego kodu. Responsive Design to filozofia projektowania, w której podczas projektowania systemu (reprezentacja i układ) reaguje / dostosowuje się w zależności od układu urządzenia. Podstawowym powodem, dla którego projekt pozostaje responsywny, jest zwiększenie zasięgu aplikacji do większej liczby użytkowników za pomocą szeregu urządzeń.
Instalacja
Bootstrap można zainstalować na wiele różnych sposobów i dla wielu różnych projektów. Na poniższej liście umieściłem linki do pobierania i samouczka dotyczące instalacji programu ładującego
Pobierz linki
- Bezpośrednie pobieranie - link do pobrania
- CDN - wejdź tutaj
- Bower -
bower install bootstrap[czytaj] - NPM -
npm install bootstrap[czytaj] - Kompozytor -
composer require twbs/bootstrap[czytaj] - Dostosuj - mam własną konfigurację, którą możesz dostosować tutaj .
- Sass - w przypadku projektów związanych z Sass możesz go zdobyć [tutaj] [1].
Podstawowe informacje
Więc zainstalowałeś już bootstrap w swoim projekcie. A teraz czas zacząć korzystać z wielkich zalet bootstrapu. Najpierw opowiem o podstawowym użyciu bootstrapu, potem pokażę kilka małych przykładów, a na koniec podam przykładowy kod startowy, którego możesz użyć jako szablonu początkowego!
System siatki
Bootstrap używa systemu siatki. Ten system siatki zwykle składa się z 12 kolumn. Każda z tych 12 kolumn ma tę samą szerokość, ale może mieć różne wysokości.
Mamy więc system siatki składający się z 12 kolumn. Możemy użyć tych kolumn, aby zbudować naszą podstawową stronę internetową. powiedzmy, że chcemy osiągnąć następujący układ:
menu - pełna szerokość
pasek boczny - 1/3 ekranu
Główna zawartość 2/3 ekranu
Stopka - pełna szerokość
Menu
Najpierw spojrzymy na menu. Jak wiemy, system siatki działa z 12 kolumnami. Ponieważ chcemy menu na pełnej szerokości, musimy umieścić menu we wszystkich 12 kolumnach. Będzie to wyglądało jak na poniższym przykładzie
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
Menu
</div>
Dając menu klasę col-lg-12, wskazujemy, co następuje:
col - col w nazwie klasy oznacza kolumny.
lg - lg w nazwie klasy oznacza szerokość ekranu, w tym przypadku dużą.
12 - 12 w nazwie klasy oznacza liczbę kolumn, które ma posiadać nasze menu. ponieważ w tym przypadku chcemy menu na pełnej szerokości otrzymujemy wszystkie 12 kolumn (12/12)
Ponieważ użyliśmy 12 z 12 kolumn dla naszego menu, wszystko po menu zostanie ustawione w nowym wierszu.
Pasek boczny
Drugim elementem, który chcemy dodać do naszego szablonu, jest pasek boczny. Teraz, jak już powiedziałem, chcemy, aby pasek boczny wynosił 1/3 ekranu. Więc podzielimy 12 kolumn na 3, czyli 4. Teraz wiemy, ile kolumn chcemy wypełnić, aby osiągnąć 1/3 ekranu. Postępuj zgodnie z poniższym kodem.
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
The sidebar
</div>
Tak samo jak w przypadku menu dopiero teraz nasza liczba kolumn różni się od menu.
col - col w nazwie klasy oznacza kolumny.
lg - lg w nazwie klasy oznacza szerokość ekranu, w tym przypadku dużą.
4 - 12 w nazwie klasy oznacza liczbę kolumn, które ma posiadać nasz pasek boczny. ponieważ w tym przypadku chcemy, aby pasek boczny wypełniał 1/3 ekranu, więc przechwycimy tylko 4 z 12 kolumn (4/12)
Zawartość
Teraz w tym wierszu pozostało 8 kolumn obok paska bocznego. Teraz wypełnimy je naszą treścią. Zobacz przykładowy kod poniżej
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
The sidebar
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
The main content
</div>
Ponieważ wypełniliśmy pozostałe 8 kolumn z naszych 12 kolumn w tym wierszu, następna sekcja ponownie rozpocznie się od nowego wiersza z 12 kolumnami.
Stopka
Stopka jest, podobnie jak menu, które będzie blokiem o pełnej szerokości na ekranie, więc weźmiemy wszystkie 12 kolumn w tym wierszu dla naszej stopki, patrz przykładowy kod poniżej.
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
The sidebar
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
The main content
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
The footer
</div>i are described below.
Więc teraz stworzyliśmy, z bardzo małym plikiem HTML, nasz pierwszy szablon bootstrap. Ale to są podstawy. Zwykle formalizowalibyśmy ten kod nieco więcej, aby zapewnić mu pełną obsługę rozruchu. Niektóre z tych doświadczeń opisano poniżej.
Używanie wierszy i kontenerów Jak powiedziałem w prostym przykładzie powyżej, bootstrap używa wierszy 12 kolumn. gdy wiersz zostanie wypełniony 12 kolumnami, w nowym wierszu rozpocznie się bootstrap. najlepszym sposobem na pokazanie tych wierszy jest użycie klas wierszy. Użyjemy również klasy kontenera. to jest jak tag ciała, w tym kontenerze umieścimy cały nasz kod. Możesz wybrać między pojemnikiem lub klasą płynów. Jedyną różnicą jest to, że klasa pojemnik-płyn wykorzystuje całą szerokość ekranu, a klasa pojemnik nie. Przykład tych podstawowych funkcji znajduje się poniżej.
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
The menu consisting of 12 columns
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
The sidebar consisting of 4 columns
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
The main content consisting of 8 columns
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
The footer consisting of 12 columns
</div>
</div>
</div>
Stworzyliśmy teraz pełny szablon strony z bootstrap. To naprawdę bardzo proste, ale zacznij od podstaw, a później będziesz mógł używać różnego rodzaju klas i funkcjonalności bootstrap. Ostatnia rzecz. Nazwy kolumn lg-md-sm i xs w klasach odpowiadają, jak już powiedziałem, szerokości strony. LarGe, MeDium, SMall i XSmall. Nie zapominaj, że możesz tego użyć, aby zmienić styl kolumn w różny sposób na różnych szerokościach, zmieniając liczbę kolumn. Pamiętaj, że pełny wiersz składa się z 12 kolumn!
Więcej informacji na stronie: http://getbootstrap.com/ <br? Świetne przykłady można znaleźć na stronie : http://expo.getbootstrap.com lub http://bootsnipp.com/
Jeśli chcesz, żebym dodał więcej informacji lub napotkasz jakieś problemy, daj mi znać! i szczęśliwego kodowania dla was wszystkich!