-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbootstrap.php
87 lines (71 loc) · 8.38 KB
/
bootstrap.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="ru">
<?php
$_GET["title"] = 'Блоки';
require 'templates/head.php';
?>
<body>
<?php
require 'templates/header.php'
?>
<section class="main">
<div class="container">
<h3>Что такое Bootstrap?</h3>
<div class="neu">
<p>Bootstrap - это фреймворк, значительно упрощающий работу с версткой сайта и ее стилизацией</p>
<p>Во-первых, Bootstrap является самым популярным фреймворком. Во-вторых, это не только css, но и js-фреймворк. То есть в Bootstrap написаны готовые стили и скрипты, для применения которых вам достаточно всего лишь прописать необходимые стилевые классы и атрибуты html-элементам.
</p>
<p>Заметьте, что на скриншоте упоминается, что в первую очередь с помощью фреймворка следует разрабатывать мобильные проекты. Почему так? Все благодаря сетке Bootstrap, которая позволяет легко адаптировать любой сайт и хорошо отображать его на любых устройствах.</p>
</div>
<h3>Для чего вам Bootstrap?</h3>
<div class="neu">
<p>Вообще чтобы лучше понять, для чего вам нужен Bootstrap, можно вернуться немного назад и ответить на вопрос: “А
что такое вообще css-фреймворк?”</p>
<p>По сути, если говорить простым языком, это файл или несколько файлов с готовым написанным кодом, которые подключаются в сайту в секции head, после чего становится возможным использование возможностей этого фреймворка.</p>
</div>
<div class="neu">
<p>Фреймворки создают для того, чтобы другим веб-разработчикам было легче верстать сайты. Я уже говорил вначале о
том, что сегодня практически любой разработчик после создания с нуля парочки сайтов задумывается, как ему
ускорить процесс разработки.</p>
<p>Дело в том, что если мы с вами будем делать разработку сайта с нуля, то придется позаботиться об очень многих
вещах. Все css-стили, все веб-сценарии придется писать с нуля, а ведь это могут быть сотни и тысячи строчек
кода. Причем вы можете совершить массу ошибок в верстке. Например, попросту ваш шаблон будет по-разному
выглядеть в основных браузерах или он будет не адаптивен.</p>
<p>В общем-то, как раз ради адаптивной верстки и стоит использовать Bootstrap, потому что если мы говорим о
фиксированных макетах, то их легко сделать даже с нуля. Просто создаем блоки, задаем им фиксированную ширину и
работаем по макету.</p>
<p>Но в случае с адаптивной версткой все в разы сложнее. Вам нужно будет сделать так, чтобы на любых разрешениях экранов ваш сайт отображался хорошо. Для этого вам придется использовать медиа-запросы. Для крупных шаблонов таких вот запросов может понадобиться очень много, кроме того, вы же еще должны научиться их писать.</p>
</div>
<div class="neu">
<p>В общем, при разработке с нуля адаптивного шаблона вам придется потрудиться как следует, при этом ваша
квалификация в верстке должна быть достаточно высокой.</p>
<p>А что же bootstrap? Если изучить этот фреймворк, то он сильно упростит для вас верстку. Во-первых, фреймворк
берет на себя кроссбраузерность и адаптивность, а это основные вещи, о которых должен позаботиться разработчик.
Но с bootstrap реализовать их очень просто. Это позволяет создать html-шаблон даже человеку, который ранее очень
мало занимался версткой и особо не знаком с css.</p>
<p>Во-вторых, фреймворк идеально подходит при работе в команде. Верстка на bootstrap при должном умении и понимании происходит в 3-5 раз быстрее, а единообразие кода позволит любому вашему коллеге внести правки. Если же мы говорим о верстке без фреймворка, то тут и каждого разработчика может быть свой стиль и другому человеку придется потратить время на изучение его кода.</p>
<p>В качестве преимуществ фреймворка я хотел бы также отметить очень большое русскоязычное сообщество и наличие хорошей документации на нашем языке. Благодаря такой распространенности для Bootstrap появилось много шаблонов, где уже переделан дизайн всех основных элементов. Вы можете подключать такие шаблоны и на их основе делать свои сайты, лишь незначительно что-то меняя.</p>
</div>
<h3>Контейнеры</h3>
<div class="neu">
<p>Это базовый элемент в Bootstrap и они необходимы при использовании нашей стандартной сеточной системы.
Контейнеры используются для размещения в них содержимого, дополнений и (иногда) центрирования содержимого внутри
них. Хотя контейнеры могут быть вложенными, большинство макетов не требуют вложенного контейнера.</p>
<p>В Bootstrap используется три разных типа контейнеров:</p>
</div>
<ul class="neu-list">
<li>.container, который устанавливает максимальную ширину max-width в каждой отзывчивой точке останова;</li>
<li>.container-fluid, ширина которого width: 100% на всех точках останова;</li>
<li>.container-{breakpoint}, то есть ширина width: 100% до указанной точки останова.</li>
</ul>
<p class="neu">В приведенной ниже таблице показано, как максимальная ширина max-width каждого контейнера .container и .container-fluid сравнивается с исходными в каждой точке останова.</p>
</div>
</section>
<?php
require "templates/footer.php"
?>
<?php
require 'templates/scripts.php'
?>
</body>
</html>