Підключення (установка) bootstrap на сайт, ит шеф
На цьому уроці Ви навчитеся підключати платформу Twitter Bootstrap 3 до сайту, а також дізнаєтеся, з яких файлів вона складається.
Форми поширення платформи Twitter Bootstrap
Для вивчення платформи Twitter Bootstrap необхідно мати:
Платформа Twitter Bootstrap 3 поставляється в двох варіантах доступних для завантаження:
- скомпільована і мінімізована версія;
- версія з вихідними кодами.
На цьому уроці ми розглянемо підключення попередньо компільованою і мінімізованої версії, яку можна завантажити за посиланням наведеної вище. У цій формі постачання платформи Twitter Bootstrap 3 для нас мають найбільший інтерес саме мінімізовані (стислі) версії скомпільовані файлів, так як вони мають менший розмір і, отже, збільшують швидкість завантаження веб-сторінок сайту.
Але перед тим як перейти до підключення платформи Twitter Bootstrap до веб-сторінці необхідно розглянути її структуру на файловому рівні.
Файлова структура платформи Bootstrap 3
Після завантаження, попередньо компільованою і мінімізованої версії Bootstrap 3 на комп'ютер, її необхідно розпакувати за допомогою будь-якого архіватора в каталог вашого веб-проекту.
Якщо цю папку розглянути, то ми побачимо, що платформа Twitter Bootstrap складається з 3 каталогів ( "CSS", "FONTS" і "JS") і файлів.
Файли платформи представлені в 2 видах:
Крім цих файлів, в дану поставку входять ще 4 файлу шрифту "Glyphicons" (glyphicons-halflings-regular.eot. Glyphicons-halflings-regular.svg. Glyphicons-halflings-regular.ttf. Glyphicons-halflings-regular.woff), які відрізняються один від одного тільки форматом, в якому зберігається даний шрифт. Шрифт "Glyphicons" складається з 200 іконок з набору "Glyphicon Halflings".
Увага: для роботи скриптів платформи Twitter Bootstrap 3 (bootstrap.js і bootstrap.min.js) необхідно мати підключену останню версію бібліотеки jQuery.
Створення веб-сторінки на HTML 5 і підключення до неї платформи Twitter Bootstrap 3
Отже, ми розглянули структуру і призначення файлів платформи Twitter Bootstrap 3. Тепер прийшов час підключити дану платформу за допомогою скомпільованих і мінімізованих файлів до веб-сторінці. Розглянемо цей процес покроково. В результаті наших дій ми хочемо отримати веб-сторінку на HTML 5, до якої підключена платформа Twitter Bootstrap 3. Для демонстрації того що платформа працює, створимо в даній веб-сторінці кнопку, при натисканні на яку буде показуватися спливаюча панель з повідомленням.
Крок 1. Створення HTML сторінки
Крок 2. Підключення платформи Bootstrap 3 до веб-сторінці
Щоб підключити платформу Twitter Bootstrap 3 до веб-сторінці необхідно виконати наступне:
Крок 3. Збереження веб-сторінки і перевірка роботи компонента Bootstrap
Після створення веб-сторінки, до якої підключена платформа Twitter Bootstrap 3, її необхідно зберегти в файл з розширенням html (Наприклад: "index.html"). Після цього створену веб-сторінку необхідно відкрити в браузері і перевірити роботу компонента Bootstrap "Popovers".
Файлова структура проекту, в основу якого покладена платформа Twitter Bootstrap 3:
Демонстрація роботи компонента Bootstrap "Popovers":
Доброго дня. чи можливо якимось чином визначати елементи для яких буде застосовуватися ТІЛЬКИ bootstrap.min.css
Що б не використовувався основний стиль в style.css ТІЛЬКИ для обраних \ заданих елементів.
Доброго дня.
У файлі bootstrap.css містяться загальні стилі, які застосовуються за замовчуванням до більшості елементів HTML і стилі, які ви задаєте елементів за допомогою класів Bootstrap.
Для того щоб знати які стилі накладаються на елемент: відкриваємо браузер (наприклад: Google Chrome) -> натискаємо клавішу F12 -> відкриваємо вкладку Elements -> вибираємо потрібний елемент в дереві або за допомогою значка «Лупа» -> вивчаємо вміст правої панелі.