Уроки бутстрап 3: Уроки Bootstrap 3.0 для начинающих (Первый урок) – Bootstrap уроки — обучение для начинающих

Уроки Bootstrap 3.0 для начинающих (Первый урок)

По многочисленным просьбам, посетителей моего сайта открываю новую рубрику уроки Bootstrap 3.0. Для изучения Bootstrap 3.0. нам понадобится его скачать с официального сайта, там кстати есть вся информация для того чтобы начать работать, но она на английском языке.

Приступаем.

Шаг 1. Идем на официальный сайт и качаем Bootstrap 3.0 — вот ссылка http://getbootstrap.com/getting-started/ (качать то что выделено красным прямоугольником)

bootstrap

Шаг 2. Содержимое архива извлекаем заходим во внутрь папки dist создаем файл index.html желательно использовать кодировку utf-8

tree-bootstrap-3-0

Шаг 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 увидим следующее

first-lesson

Продолжение во втором уроке.
для тех кто не понял где и как выкладываю архив — Скачать

Ссылки на уроки:

1. Второй урок
2. Третий урок
3. Четвертый урок

Уроки Bootstrap 3.0 для начинающих (Третий урок)

В третьем уроке немного теории о построении шаблона и сетке Bootstrap.
Bootstrap видит шаблон сайта следующим образом

bootstrap-grid

В построение шаблона с помощью 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 для начинающих (2-й урок) – Подключение Bootstrap

В этом уроке мы скачаем Bootstrap 3.0 с официального сайта и подключим файлы к главной странице.
Итак, приступим.

Шаг 1. Чтобы начать работать с  фреймворком Bootstrap 3.0, нам нужно его скачать. Это можно сделать на официальном сайте.

https://getbootstrap.com/getting-started/

Нажмите на ссылку «Download Bootstrap» и укажите место на компьютере, куда нужно закачать архив:

Уроки Bootstrap 3.0 для начинающих (2-й урок) – Подключение Bootstrap

Шаг 2. Создайте папку, например, «Мой сайт на Bootstrap 3.0» и перенесите все файлы из архива в нее. У вас должно появиться три папки «css» , «js» , «fonts»:

Уроки Bootstrap 3.0 для начинающих (2-й урок) – Подключение Bootstrap

Шаг 3. Удаление ненужных файлов из Bootstrap 3.
Давайте просмотрим стандартную файловую структуру Bootstrap и удалим оттуда все ненужные файлы:

bootstrap/
├── css/
│      ├── bootstrap.css
│      ├── bootstrap.min.css
│      ├── bootstrap-theme.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.

  1. bootstrap.css — этот css-файл содержит все готовые стили в удобной и читаемой форме. Вот этот файл нам и нужен. Его мы и будем подключать к нашему html-файлу.
  2. bootstrap.css.map, bootstrap-theme.css.map — я эти файлы не использую, так как не знаю, для чего они нужны. Вы можете их удалить.
  3. bootstrap-theme.css — это css-файл для готовой темы Bootstrap. Его можете тоже смело удалить.
  4. 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.

Уроки Bootstrap 3.0 для начинающих (2-й урок) – Подключение Bootstrap

Шаг 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 3.0 для начинающих (2-й урок) – Подключение Bootstrap

Хочу еще сказать, что можно в дополнение к файлам 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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *