Подключение Twitter Bootstrap | web-elive.com

Опубликовано | Автор: Губарь Маргарита Александровна

Статья последний раз была обновлена 04.03.2023

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

Июль 21st, 2013

Руслан Гусейнов

В этом небольшом уроке мы подключим бесплатный фреймворк Twitter Bootstrap к нашей странице.

Под подключением имеется в виду подключение таблицы стилей и java скрипта Bootstrap. Т.е.  это простая html структура с подключением вышеуказанных файлов.

Эту html структуру я взял с официального сайта Twitter Bootstrap  http://twitter.github.io/bootstrap/getting-started.html.

1 <!DOCTYPE html>
2  
3 <html>
4  
5 <head>
6  
7 <title>Bootstrap Template</title>
8  
9 <meta name="viewport" content="width=device-width, initial-scale=1.0">
10  
11 <!-- Bootstrap -->
12  
13 <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
14  
15 </head>
16  
17 <body>
18  
19 <h1>Hello, world!</h1>
20  
21 <script src="http://code.jquery.com/jquery.js"></script>
22  
23 <script src="js/bootstrap.min.js"></script>
24  
25 </body>
26  
27 </html>

Значит, используется минимизированная таблица стилей Bootstrap bootstrap.min.css и файл со скриптами bootstrap.min.js. А также подключен jquery.

И еще один важный момент, это указание мета-тега

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Т.е. мы сообщаем браузеру, что наша страница должна корректно отображаться на мобильных устройствах, а именно ширина области просмотра будет зависить от разрешение экрана устройства.

ЧИТАЙТЕ ТАКЖЕ:  Стартуем с Twitter Bootstrap

Опубликовано в рубрике Bootstrap

Метки: bootstrap, Уроки

Вы можете оставить комментарий, или ссылку на Ваш сайт.

http://web-elive.com/uroki/botstrap/podklyuchenie-twitter-bootstrap/

Губарь Маргарита Александровна
Губарь Маргарита Александровна недавно публиковал (посмотреть все)
Рубрика: Веб-разработка | Метка: