Логотип
Программисты создают миры, где всё подчиняется правилам, которые они сами придумали. (автор не известен)

Учебное пособие по framework Bootstrap

13.05.2017
Учебное пособие по framework Bootstrap

Twitter Bootstrap один из самых популярных front-end вэб-фреймворков. Это удобный, интуитивно понятный и мощный мобильный первый фреймворк для более быстрой и простой веб-разработки. Он использует HTML, CSS и Javascript. Эти статьи научат вас основам Bootstrap Framework с помощью которого можно создавать любые веб-проекты. Статьи разделены на разделы, которые состоят из основной структуры Bootstrap, Bootstrap CSS, Компоненты слоев Bootstrap и плагины Bootstrap. Каждый из этих разделов содержит темы, связанные с простыми и полезными примерами.

Аудитория

Это руководство было подготовлено для тех, кто имеет базовые знания HTML и CSS и имеет желание развивать веб-сайты и блоги. После завершения этой статьи вы окажитесь на приличном уровне опыта в разработке веб-проектов с использованием Twitter Bootstrap.

Предпосылки

Перед тем, как приступить к изучению Twitter Bootstrap, мы предполагаем, что вы уже знаете об основах HTML и CSS. Если вы не очень хорошо осведомлены об этих понятиях, то вам рекомендуется изучить основы HTML и CSS.

Пример кода на 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</title>
      
      <!-- Bootstrap -->
      <link href = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel = "stylesheet">
      
      <!-- В HTML5 shim и Respond.js для поддержки IE8 элементы HTML5 и медиа запросов -->
      <!-- 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>Привет мир!</h1>
      
      <!-- jQuery (необходимые JavaScript плагины для Bootstrap's) -->
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      
      <!-- Включает все скомпилированные плагины (ниже), или включает отдельные файлы по мере необходимости -->
      <script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
      
   </body>
</html>

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Если статья понравилась, то поделитесь ей в социальных сетях:

Читайте также

0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

0 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Загрузка...

Спасибо!

Теперь редакторы в курсе.

Прокрутить страницу до начала