twitter-bootstrap Samouczek
Rozpoczęcie pracy z twitter-bootstrap
Szukaj…
Uwagi
Bootstrap to framework HTML, CSS i JavaScript służący do tworzenia stron internetowych tworzonych za pomocą paradygmatu mobilnego oraz responsive web design (RWD). Wykorzystuje kombinację gotowych klas CSS i JavaScript, aby tworzyć różne rzeczy w Internecie. Zawiera takie elementy, jak niestandardowa, responsywna siatka, która umożliwia przeglądanie stron internetowych na dowolnym ekranie, rozwijany pasek nawigacyjny, który może reagować, a nawet proste rzeczy, które mogą być czasochłonne, takie jak gotowe przyciski, formularze i akordeony, aby nazwać mało.
Bootstrap może być przydatny z następujących powodów:
Oszczędność czasu : Bootstrap zawiera wiele gotowych elementów, które po prostu trzeba wywołać podczas pisania kodu. To oszczędza znaczną ilość czasu i może znacznie skrócić czas potrzebny na kodowanie strony internetowej.
Zbudowany z myślą o elastycznym projektowaniu stron internetowych : Bootstrap pozwala programistom internetowym nie martwić się tworzeniem elementów, które będą skalowane wraz z rozmiarem ekranu, ponieważ Bootstrap używa najpierw responsywnego projektu, który pozwala budować rzeczy, które będą działały na dowolnym ekranie rozmiar.
Upraszcza proces projektowania : Bootstrap jest fabrycznie wyposażony w elementy, które mają dobre praktyki projektowania. Może to być przydatne dla tych, których umiejętności projektowania stron internetowych nie są tak duże, lub dla tych, którzy uważają projektowanie za żmudne zadanie, ponieważ wiele klas Bootstrap jest estetycznych i świetnych do oglądania.
W tej sekcji należy wymienić wszelkie duże tematy w ramach twitter-bootstrap i link do powiązanych tematów. Ponieważ Dokumentacja dla twitter-bootstrap jest nowa, może być konieczne utworzenie początkowych wersji tych pokrewnych tematów.
Wersje
| Wersja | Data wydania |
|---|---|
| 4.0 | 2999-01-01 |
| 3.3.7 | 2016-07-25 |
| 3.3.6 | 24.11.2015 |
| 3.3.5 | 2015-06-15 |
| 3.3.4 | 16.03.2015 |
| 3.3.1 | 2014-11-12 |
| 3.3.0 | 2014-10-29 |
| 3.2.0 | 26.06.2014 |
| 3.1.0 | 30.01.2014 |
| 3.0 | 19.08.2013 |
| 2.3 | 07.02.2013 |
| 2.2 | 29.10.2012 |
| 2.1 | 2012-08-20 |
| 2.0 | 01.02.2012 |
| 1.0 | 18.08.2011 |
Instalacja / konfiguracja
Ściąganie:
- Pobierz Bootstrap bezpośrednio lub klonuj itp. Z repozytorium GitHub
- Pobierz spersonalizowaną wersję Bootstrap z oficjalnych dokumentów
- Zainstaluj z altaną:
bower install bootstrap - Zainstaluj za pomocą npm:
npm install bootstrap - Zainstaluj z kompozytorem:
composer require twbs/bootstrap
Struktura plików 
Instalowanie:
Na stronie HTML uwzględnij CSS, JS Bootstrap oraz zależność jQuery (wcześniejsza wersja 3, przynajmniej od najnowszej wersji Bootstrap). Pamiętaj, że jeśli planujesz korzystać z funkcji JavaScript Bootstrap, twoje referencje jQuery muszą znajdować się przed referencjami bootstrap.js w kodzie HTML.
Możesz wykorzystać zainstalowane pliki Bootstrap z powyższej sekcji lub odwołać się do CDN dostarczonej przez twórców Bootstrap (linki zaczerpnięte z Pierwsze kroki z Bootstrap ):
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Bardzo podstawowa strona Bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Podstawowy szablon
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title> <!-- The title of the Website -->
<!-- Reference to Bootstrap's CSS file -->
<!-- This is the line to reference the bootstrap's Stylesheet -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!-- [if lt IE 9] -->
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<!--[endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- Referencing jQuery (necessary for Bootstrap JavaScript plugins(bootstrap.min.js) to work) -->
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Referencing Javascript Bootstrap Plugin to Facilitate Bootstrap Animations and functionalities. -->
<!-- (Necessary to run Bootstrap) -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Kiedy używać Bootstrap
Bootstrap to opiniotwórcza platforma dla HTML, CSS i Javascript. Zawiera podstawową stylizację i funkcjonalność dla elementów, które zostały zaakceptowane [interfejs użytkownika], takich jak elementy formularzy, przyciski, okna modalne i elementy nawigacyjne.
Bootstrap to responsywna platforma internetowa, co oznacza, że została zaprojektowana w celu dostosowania układu i projektu do dużych i małych rozmiarów ekranów, takich jak urządzenia mobilne, tablety i komputery stacjonarne, wszystko w jednym kodzie bazowym.
Jedną z podstawowych koncepcji Bootstrap jest framework grid. Stosując klasy do elementów HTML, można tworzyć skomplikowane układy za pomocą podstawowej siatki dwunastu kolumn. Na przykład układ czterokolumnowy może dostosować się do dwóch kolumn na urządzeniach typu tablet i jednej kolumny na urządzeniach mobilnych. Aby to osiągnąć, siatka korzysta z media queries , metody CSS do kierowania na określone rozmiary ekranu.
Bootstrap działa szczególnie dobrze, jeśli:
- Niestandardowy projekt nie jest najwyższym priorytetem
- Bardziej wygodne jest edytowanie HTML i dodawanie klas niż tworzenie niestandardowego CSS
- Wygodne jest korzystanie z frameworka, który będzie miał wiele podobieństw wizualnych do wielu innych stron internetowych
Bootstrap może być używany przez tych, którzy nie znają HTML, CSS i Javascript, ponieważ dokumentacja jest doskonała. Istnieje jednak krzywa uczenia się dla tych, którzy nie do końca czują się komfortowo dzięki trzem podstawowym technologiom stosowanym przez Bootstrap (HTML, CSS i JavaScript).
Istnieje możliwość zakupu lub pobrania motywów Bootstrap w celu zmiany stylu lub funkcjonalności Bootstrap. Możliwe jest również użycie Bootstrap jako punktu wyjścia, z dostosowaniem CSS i Javascript.
Podstawowa strona internetowa wykorzystująca składniki bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</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 class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
</p>
</div>
</div> <!-- /container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>