Подключение 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">
Т.е. мы сообщаем браузеру, что наша страница должна корректно отображаться на мобильных устройствах, а именно ширина области просмотра будет зависить от разрешение экрана устройства.
Вы можете оставить комментарий, или ссылку на Ваш сайт.
http://web-elive.com/uroki/botstrap/podklyuchenie-twitter-bootstrap/
- Автоматическое монтирование fstab и systemd - 24.02.2021
- Как в Linux подключить новый диск, разметить и отформатировать разделы - 24.02.2021
- Как сменить режим работы PHP - 24.02.2021