Добавляем JavaScript в HTML-файл Bootstrap

Первым делом давайте подключим jQuery framework, который необходим для работы с bootstrap, да и сейчас мало какие сайты работают без него.

У нас есть 2 способо добавления jQuery к нам на сайт. Сначала идем на сайт jquery.com и и скачиваем последнюю версию jquery, как показано на скриншоте. Сохраняем в папку js

Скачиваем jQuery
Скачиваем jQuery

Теперь нам нужно подключить данный файл

<script src="js/jquery-1.11.0.min.js"></script>

Напомню, что есть еще второй способ подключения jQuery, это через CDN — Сеть доставки (и дистрибуции) контента (англ. Content Delivery Network или Content Distribution Network, CDN)

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

Для этого просто задаем полный пусть до jQuery на их сайте. Такие CDN есть еще у гугла и в некоторых других местах.

Лично я использую 1 способ, т.к. люблю, когда все хранится на моем компьютере. А то, если отключат интернет, то jQuery не будет работать, либо будет не доступен сам jquery.com

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

Давайте теперь подключим файл bootstrap.min.js

<script src="js/bootstrap.min.js"></script>

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

И давайте его подключим сразу

<script src="js/respond.min.js"></script>

И так, давайте посмотрим, что в конечном итоге у нас получилось

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/custom.min.css" rel="stylesheet">
    <script src="js/respond.min.js"></script>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>

<body>

</body>
</html>

Полностью рабочуюсборку можно сказать здесь

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

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

Scroll Up
Adblock detector