qqc: Урок 6 [2099550]



Один из самых популярных наборов инструментов для создания веб-страниц - Bootstrap. Это набор шаблонов HTML и CSS для оформления навигационной панели, кнопок, форм и других элементов.

Подключение Bootstrap

Для того, чтобы использовать наборы Bootstrap, необходимо их подключить. Это делается точно так же, как и обычные css- и js-файлы.

˂link rel="stylesheet" href=".../bootstrap.css"˃

˂script src=".../bootstrap.js"˃˂/script˃

Необязательно добавлять файлы bootstrap к себе в проект, достаточно указать ссылки ссылки, ссылки на самую последнюю версию всегда можно найти здесь.

Старайтесь подключать скрипты в конце вашего кода, потому что это влияет на скорость загрузки сайтов. То есть если подключать их в "голове" (˂head˃), то браузер должен будет сначала подгружать эти файлы. Гораздо быстрее сайт загрузиться, если подключать скрипты перед закрытием "тела" (˂body˃).



Основные инструменты Bootstrap

  • Сетки - это сплошное преимущество Bootstrap. По умолчанию сетка состоит из 12 колонок с заранее заданной шириной. Вы можете очень просто с помощью сетки регулировать размеры ваших элементов на странице. Также это позволит делать сайт сразу адаптивным, таким, чтобы он везде, в любом браузере, на любом устройстве отображался красиво.



    Для того, чтобы задать ширину для элемента, используются классы. Например, я хочу чтобы у меня в строку были расположены три элемента. Причем, один занимал половину экрана, а другие два были одинаковой ширины и вместе занимали вторую часть экрана, когда я открываю сайт на компьютере, с большим разрешением экрана, и чтобы, когда я открывала на телефоне - каждый элемент был на всю ширину - один в ряду. Для этого я задаю следующие классы:


    ˂div class="row"˃
      ˂div id="element1" class="col-lg-6" ˃˂/div˃
      ˂div id="element2" class="col-lg-3"˃˂/div˃
      ˂div id="element3" class="col-lg-3"˃˂/div˃
    ˂/div˃

    С помощью тега ˂div˃ можно выделять раздел или секцию в документе. Таким образом, здесь мы выделили некую строку .row, в которой расположены три элемента: #element1, который в большом разрешении (.col-LG-6) займет 6 колонок из стандартных 12, т.е. половину, #element2 и #element3, которые в большом разрешении займут по 3 колонки (.col-LG-3).



    Устройства / признаки Очень маленькие
    Телефоны (

    Маленькие
    Планшеты (≥768px)

    Средние
    (≥992px)

    Большие
    (≥1200px)
    Максимальная ширина контейнера Нет (auto) 750px 970px 1170px
    Префикс класса .col-xs- .col-sm- .col-md- .col-lg-
    Максимальная ширина колонки Auto ~62px ~81px ~97px
  • Шаблоны. Есть два вида шаблонов документа: фиксированный и резиновый. Фиксированный (задается классом ˂div class="container"˃) - самый основной и простой макет с шириной в 940px и отцентрованным содержимым. А резиновый (˂div class="container-fluid"˃) - это шаблон с плавающей структурой документа, который будет занимать 100% ширины окна браузера и подстраиваться под его изменения.


  • Типографика. В описании стилей элементов Bootstrap уже заложены шрифты, цвета, размеры и т.д. для большинства случаев: цитат, заголовков, параграфов... Например, по умолчанию к элементу ˂body˃ применяются правила о том, что font-size равен 14px, а line-height составляет 20px.

Это была только первая часть. В следующий раз я расскажу о еще нескольких иструментах Bootstrap. Даю вам "домашнее задание": загляните на этот сайт, поизучайте, что там есть, подключите к своему сайту (или тому, что мы начали делать в первых занятиях) css- и js-файлы bootstrap и jquery последней версии. Добавьте все содержимое вашего сайта в контейнер: ˂div class="container"˃ (не забудьте в конце поставить закрывающий тег ˂/div˃). Посмотрите, как изменится ваш сайт. Ну и, конечно, поэкспериментируйте!

Если у вас после этого урока остались какие-то вопросы, смело задавайте их в комментариях или в личных сообщениях в Telegram, я обязательно на все отвечу!




















Оригинал поста создан 30-12-2016 11:47:54 UTC


2093996 Ежедневный отчет – 2016.12.29
2095137 Результаты эксперимента по проекту Витарекорд
2095317 Майнинг.
2095694 Карпати
2095867 Да сколько можно ж о любви писать, девчонки???
2096022 Голос -авторы, инвесторы, кураторы.
2098073 Облачный майнинг оф-лайн.
2099226 Идёт волна… Отдаться ей или противостоять?
2099517 ПиФотоПремия. Поэтический этап "Снег идет". Конкурсная работа" . Смотришь, там и новый год.
2099550 Урок 6
2100620 Я б хотела стать Ветром…
2101272 Ничего не вижу, НО РИСОВАТЬ НЕ ПЕРЕСТАНУ
2101332 Тихая охота.
2101406 Обновление razumgolosa.com v0.7: дешборд с ключевыми метриками
2101688 Чили Пеппер №6 | Шедевры мировой живописи ( часть II )

Прежде чем писать комментарий прочитайте О ПРОЕКТЕ
Поддержите проект донатом!


Comments 0