Уроки Bootstrap 3.0 для начинающих (Первый урок)
По многочисленным просьбам, посетителей моего сайта открываю новую рубрику уроки Bootstrap 3.0. Для изучения Bootstrap 3.0. нам понадобится его скачать с официального сайта, там кстати есть вся информация для того чтобы начать работать, но она на английском языке.
Приступаем.
Шаг 1. Идем на официальный сайт и качаем Bootstrap 3.0 — вот ссылка http://getbootstrap.com/getting-started/ (качать то что выделено красным прямоугольником)
Шаг 2. Содержимое архива извлекаем заходим во внутрь папки dist создаем файл index.html желательно использовать кодировку utf-8
Шаг 3. Открываем созданный файл и прописываем следующий код
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h2>Hello, world!</h2>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Сохраняем код который прописали и щелкаем index.html. После запуска index.html увидим следующее
Продолжение во втором уроке.
для тех кто не понял где и как выкладываю архив — Скачать
Ссылки на уроки:
1. Второй урок
2. Третий урок
3. Четвертый урок
Уроки Bootstrap 3.0 для начинающих (Третий урок)
В третьем уроке немного теории о построении шаблона и сетке Bootstrap.
Bootstrap видит шаблон сайта следующим образом
В построение шаблона с помощью Bootstrap используются три уровня вложенности
- Первый уровень это container — область в которой размещаются все блоки сайта.(Красная рама)
- Второй уровень это row — область в которую помещаются блоки для материала
- Третий уровень для разных устройств он разный. Это уже сам материал.
В целом Bootstrap чем-то схож с обычной таблицей. Есть общий каркас далее идут строки и ячейки. Если проводить аналогию с html-таблицей, то роль контейнера выполняет тег <table>, роль row отводится тегу <tr> и последний уровень это сама ячейка с материалом <td>.
С первым уровнем мы уже познакомились. Второй уровень вложенности выполняет функцию контейнера, но уже применительно к информационным блокам (аналогично тегу <tr>).
Сетка Bootstrap
Сетка Bootstrap по-умолчанию состоит из 12 ячеек имеющих одинаковую ширину и в зависимости от разрешения экрана ширина ячеек может меняться. У ячеек Bootstrap есть интересная способность, которой вы можете воспользоваться это адаптация ячеек под ширину экрана.
Пример — Скачать
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/dopstyle.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div>
<h2>Hello, world!</h2>
<div>
<div>
<h4>This is Photoshop's version</h4>
This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh
</div>
<div>
<h4>This is Photoshop's version</h4>
This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh
</div>
<div>
<h4>This is Photoshop's version</h4>
This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh
</div>
<div>
<h4>This is Photoshop's version</h4>
This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Скачайте пример запустите файл index.html и потихоньку начинайте изменять размер браузера. Вы увидите три состояния которые прописаны в шаблоне.
В примере используется следующая конструкция
<div> <h2>Hello, world!</h2> <div> <div> <h4>This is Photoshop's version</h4> This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh </div> </div> .... </div>
Здесь первый блок container -> далее идет строка row -> и ячейка с материалом. Для ячейки с материалом прописаны два класса col-md-3 и col-sm-6
col-sm -это класс для маленьких устройств (ниже будет приведена таблица).
col-md предназначена для устройств с шириною 970px и выше. col-md имеет следующую структуру.
col-md-[дальше идет цифра, которая обозначает количество занимаемых ячеек всего их по умолчанию 12] я задал 3 поэтому изначально шаблон поделен на 4 столбца. Если задать 4-м div-ам значение col-md-6, то мы получим страницу в два столбца. Соотношение ячеек должно давать в сумме — 12. Попробуйте задать значение 8:4. Тогда в результате получите первую ячейку по ширине превышающую вторую в два раза.
В Bootstrap есть таблица для групп устройств, если вы хотите видоизменить отображения материала к примеру для телефонов вы можете просто прописать стили.
| Очень маленьких устройств Телефоны(<768px) | Маленькие устройства Таблетки(?768px) | Средние устройства Десктоп (?992px) | Большие устройства Десктоп (?1200px) | |
|---|---|---|---|---|
| Адаптация сетки | В одну колонку постоянно | Адаптация зависит от стилей | ||
| Максимальная ширина контейнера | None (auto) | 750px | 970px | 1170px |
| Наименование класса | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Количество ячеек | 12 | |||
| Максимальная ширина ячейки | Auto | 60px | 78px | 95px |
| Отступы между ячейками | 30px (15px on each side of a column) | |||
| Возможность задать колонки | N/A | Yes | ||
Для закрепления материала рекомендую потренироваться задать значение для всех 4-х разновидностей устройств. Сделайте для разных устройств разное расположение блоков.
Ссылки на уроки:
1. Первый урок
2. Второй урок
3. Четвертый урок
Уроки Bootstrap 3.0 для начинающих (2-й урок) – Подключение Bootstrap
В этом уроке мы скачаем Bootstrap 3.0 с официального сайта и подключим файлы к главной странице.
Итак, приступим.
Шаг 1. Чтобы начать работать с фреймворком Bootstrap 3.0
, нам нужно его скачать. Это можно сделать на официальном сайте.https://getbootstrap.com/getting-started/
Нажмите на ссылку «Download Bootstrap» и укажите место на компьютере, куда нужно закачать архив:
Шаг 2. Создайте папку, например, «Мой сайт на Bootstrap 3.0» и перенесите все файлы из архива в нее. У вас должно появиться три папки «css» , «js» , «fonts»:
Шаг 3. Удаление ненужных файлов из Bootstrap 3.
Давайте просмотрим стандартную файловую структуру Bootstrap и удалим оттуда все ненужные файлы:
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff
Папка CSS
В папке CSS находится 6 файлов, но нам, по сути, нужен только один J.
- bootstrap.css — этот css-файл содержит все готовые стили в удобной и читаемой форме. Вот этот файл нам и нужен. Его мы и будем подключать к нашему html-файлу.
- bootstrap.css.map, bootstrap-theme.css.map — я эти файлы не использую, так как не знаю, для чего они нужны. Вы можете их удалить.
- bootstrap-theme.css — это css-файл для готовой темы Bootstrap. Его можете тоже смело удалить.
- bootstrap.min.css и bootstrap-theme.min.css — это точно такие же файлы как bootstrap.css (пункт №1) и bootstrap-theme.css (пункт №2), только в более неудобной и тяжело читаемой форме. Весят примерно на 30% меньше, чем bootstrap.css или bootstrap-theme.css. Лично я их не подключаю. Значит, я и их удаляю.
В итоге в папке CSS оставляете только файл bootstrap.css, все остальные удаляйте.
Папка fonts
В папке fonts хранятся 4 файла с одинаковым шрифтом, но с разными расширениями. Это нужно для того, чтобы шрифт показывался во всех браузерах. Здесь ничего не трогаем, идем в следующую папку.
Папка js
В папке js хранятся 2 файла, это bootstrap.js и bootstrap.min.js.
Как вы уже поняли, это два одинаковых файла, только bootstrap.js – полная версия, а bootstrap.min.js – сжатая. Удаляем файл bootstrap.min.js.
Итак, файл bootstrap.js – это набор готовых js-сценариев.
○ Давайте подведем итог по всем папкам.
В папке CSS один файл — bootstrap.css
В папке fonts четыре файла — glyphicons-halflings-regular.eot, glyphicons-halflings-regular.ttf, glyphicons-halflings-regular.svg и glyphicons-halflings-regular.woff.
В папке js один файл — bootstrap.js.
bootstrap/
├── css/
│ └── bootstrap.css
├── js/
│ └── bootstrap.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff
Шаг 4. Теперь в папке «Мой сайт на Bootstrap 3.0» создайте файл «index.html» с кодировкой utf-8.
Шаг 5. Откройте файл «index.html» текстовым редактором «Notepad++» и вставьте вот такой стандартный код, который предлагается на самом сайте 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">
<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>
<h2>Hello, world!</h2>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
В этом коде нужно сделать некоторые поправки для подключения bootstrap. Нам нужно в коде прописать правильный путь к файлам bootstrap.js и bootstrap.css.
Это будет выглядеть вот так:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Template на BlogGood.ru</title>
<!-- Bootstrap -->
<link href="css/bootstrap.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>
<h2>Hello, world!</h2>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>
В строке №10 мы подключили таблицу стилей «bootstrap.css»:
<link href="css/bootstrap.css" rel="stylesheet">
В строке №25 мы подключили файл со скриптами «bootstrap.js»:
<script src="js/bootstrap.js"></script>
В строке №23 мы подключили библиотеку jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Сохраните файл.
В результате в браузере вы увидите вот такой результат:
Хочу еще сказать, что можно в дополнение к файлам Bootstrap подключать свой собственный файл со стилями, если это необходимо. В дальнейших уроках вы все это увидите. Следите за обновлением моего блога. Пока!
[скачать Bootstrap3 с BlogGood.ru]
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
Добавить комментарий
Метки: Bootstrap, основы
Основы bootstrap для начинающих. Урок №1
Основы bootstrap для начинающих. Урок №1
Если вы хотите создавать адаптивные сайты, тогда категория «Bootstrap» для вас. В этой категории я расскажу и покажу, как создать адаптивный сайт. С каждым уроком вы начнете понимать всю силу и мощь фреймворка Bootstrap. Скажу только одно: если вы пройдете полностью от начала и до конца эти уроки, то вы быстро и профессионально с легкостью сможете создавать сайты любой сложности.
Весь курс рассчитан для начинающих.
Итак, в уроке №1 я попробую объяснить, что такое Bootstrap и зачем он нужен.
○ Что такое Bootstrap?
Twitter Bootstrap – это набор готовых инструментов (кода, стили, скрипты) для создания адаптивных сайтов с использованием HTML, CSS и javascript.
Из готовых CSS-стилей и javascript можно построить адаптивную сетку для сайта, вывести кнопки, выпадающее меню, иконки, всплывающие подсказки, слайдер и т. д.
Вот один из примеров, как выглядит сайт, построенный на фреймворке Bootstrap:
○ Зачем нужен Bootstrap?
Самое главное преимущество Bootstrap в том, что адаптивный сайт с ним делается намного быстрее.
Фреймворк Bootstrap состоит из таких папок:
css ,
js ,
fonts.
→ В папке css хранятся готовые CSS стили
→ В папке js хранится файл с набором готовых js-сценариев
→ В папке fonts хранятся шрифты.
Вот и все ! В следующем уроке я расскажу, где можно скачать фреймворк Bootstrap, а также покажу и расскажу, как им пользоваться.
Предыдущая запись
Основы CMS WordPress. Урок №1
Следующая запись
Форматирование текста в HTML. Основы HTML для начинающих. Урок №3