Наша совместная команда Banwar.org

Связаться с нами

  • (097) ?601-88-87
    (067) ?493-44-27
    (096) ?830-00-01

Статьи

Швидка розробка Web-сайтів і Web-додатків за допомогою Bootstrap

  1. Коли просте не так просто
  2. Адаптивний Web-дизайн
  3. HTML-код для Bootstrap
  4. Лістинг 1. Базовий скелетний HTML-файл для проектів Bootstrap (listing1.html)
  5. скорочені версії
  6. організація коду
  7. Адаптація CSS до пристрою
  8. Сітка
  9. Малюнок 1. Шаблон сітки Bootstrap Аарона К. Уайта
  10. Заповнення шаблону HTML
  11. Лістинг 2. Приклад HTML-файлу для Bootstrap (listing2.html)
  12. Малюнок 2. Подання браузера за рахунок застосування коду з лістингу 2
  13. Лістинг 3. CSS для додавання нескладного оформлення в приклад HTML-коду (main.css)
  14. Малюнок 3. Представлення браузера за рахунок застосування файлу main.html
  15. Ресурси для скачування

Покладіть початок створенню свого Web-сайту за допомогою Twitter Bootstrap

Коли просте не так просто

Ідея World Wide Web дуже проста. Стандартний транспортний протокол (HTTP) бере інформацію з сервера і передає її клієнту, а стандартний непроцедурного мова (HTML) представляє вміст так, щоб його могли відобразити браузери. Однак в реальності успіх Інтернету вбив цю простоту, і розробка сайтів стала не такою простою, якою має бути. Конкуренція за функціональність серед браузерів привела до ускладнення стандартів і появи варіацій в поведінці браузерів. Щоб сторінка виглядала і працювала однаково в різних браузерах і на різних платформах, розробник повинен володіти винятковою майстерністю і багатим досвідом. Є й менш складні проблеми, такі як забезпечення доступності для людей з ослабленим зором і підтримка декількох мов і сценаріїв для різних країн. В наші дні Web-розробники і дизайнери навчилися справлятися з цими завданнями, але основні проблеми крос-браузерної сумісності HTML і раніше існують.

Розробники браузерів нарешті зосередили свої зусилля на таких стандартах, як HTML5, каскадні таблиці стилів рівня 2 (CSS2) і CSS3. Ці стандарти обмежують невиправдані відхилення в поведінці браузерів, які переслідують розробників з моменту появи Інтернету. Щоб згладити проблеми, що залишилися і забезпечити підтримку старих версій браузерів, деякі розробники створюють інтегровані середовища для розробки Web-сторінок. Такі інструменти дозволяють простим смертним розробляти сайти, які будуть працювати для більшості користувачів.

Одна з найпопулярніших сучасних інтегрованих середовищ розробки Web-сторінок бере свій початок з абсолютно несподіваного джерела. Розробники Twitter втомилися від боротьби з безліччю різнорідних компонентів, які вони використовували для створення Web-сторінок. Вони створили єдину інтегровану середу, яка надає найбільш затребувані елементи сторінок, одночасно забезпечуючи прийнятну гнучкість. Вони поділилися цим набором інструментів з усім світом у вигляді проекту з відкритим вихідним кодом Bootstrap.

Bootstrap спирається на проект LESS, який є удосконаленням мови CSS. Крім того, Bootstrap включає базові елементи CSS, такі як шрифти, форми, кнопки, таблиці, сітки, елементи навігації, попередження та багато іншого. Основним призначенням Bootstrap є надання допомоги Web-розробникам в прискоренні створення своїх проектів. Сьогодні Bootstrap - це найпопулярніший проект в сховище програм GitHub. В наші дні Bootstrap використовують індивідуальні розробники, невеликі групи і навіть великі організації.

Ця стаття показує, як використовувати Bootstrap для створення Web-сайтів і додатків, в тому числі і для мобільних пристроїв. Стаття швидше відображає точку зору розробника, а не дизайнера. Щоб отримати користь від прочитання цієї статті, ви повинні володіти практичними навичками роботи з HTML і CSS. Базові відомості про проект LESS, які я навів у статті Do more in CSS with LESS (Розширення можливостей CSS за допомогою LESS), допоможуть вам розібратися в основному прикладі коду цієї статті.

Скачайте скомпільований проект Bootstrap (див. Розділ ресурси ). У цій статті я використовував версію 2.3.2. Завантаження матеріал містить CSS, яка є основою Bootstrap, а також корисні зображення і JavaScript. Ви створите HTML-код своєї сторінки у відповідності з описом, яке я навів у цій статті. (Приклад коду для статті можна знайти в розділі Завантаження ). Документація Bootstrap містить приклади HTML-коду для багатьох опцій проектування, підтримуваних цим середовищем. Однак сторінки документації Bootstrap, хоч і являють собою чудовий приклад гнучкості Bootstrap, не цілком адекватно пояснюють базові принципи проектування.

Адаптивний Web-дизайн

Діапазон пристроїв, що використовуються для перегляду Web-сторінок, простягається від маленьких мобільних телефонів до пристроїв з величезними дисплеями, що перевищують за розміром монітори звичайних настільних комп'ютерів. В процесі адаптивного проектування ви з самого початку закладаєте в Web-сторінки гнучкість, що дозволяє переглядати їх на будь-яких пристроях. Основою адаптивного проектування є медіа-запити CSS3 - стандартний спосіб застосування правил CSS відповідно до типу і особливо розміром дисплея.

Щоб познайомитися з проектами, з якими доводиться стикатися більшості розробників, рекомендую почати з фіксованою компонування з активізованими адаптивними функціями. Фіксовану компоновку досить просто організувати, а адаптивні функції представляють розумний підхід до реалізації вашого сайту для мобільних пристроїв. Якщо ваш проект буде передаватися в виробництво і ви будете працювати з дизайнерами, останні зможуть адаптувати ваші файли до будь-якої моделі, яку вони вважатимуть найбільш підходящою.

HTML-код для Bootstrap

У лістингу 1 показаний корисний скелетний HTML-файл для застосування Bootstrap з фіксованою компонуванням і адаптивними функціями:

Лістинг 1. Базовий скелетний HTML-файл для проектів Bootstrap (listing1.html)

<! Doctype html> <html> <head> <title> Bootstrap 101 Template </ title> <meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> <link href = "css /bootstrap.min.css "rel =" stylesheet "media =" screen "> <link href =" css / bootstrap-responsive.min.css "rel =" stylesheet "> </ head> <body> <h1> Hello world! </ h1> <div class = "container"> ... <! - Сюди буде вставлений основний HTML-код -> </ div> <script src = "// code.jquery.com/jquery. js "> </ script> <script src =" js / bootstrap.min.js "> </ script> </ body> </ html>

скорочені версії

Зверніть увагу, що в завантажується пакет Bootstrap входять дві версії кожного файлу CSS і JavaScript (наприклад, bootstrap.js і bootstrap.min.js). Перша версія - це звичайний файл, а друга - стиснутий або «скорочений». Використовуйте скорочені версії для прискорення завантаження сторінок, як це роблю я в цій статті.

Оголошення DOCTYPE на самому початку лістингу 1 вказує, що це файл типу HTML5. Тег meta, що знаходиться всередині елемента head управляє мобільними компонуваннями для маленьких екранів. (Для зручності я буду називати його тегом meta / viewport). Більшість мобільних пристроїв за замовчуванням зменшують масштаб Web-сторінок так, щоб вони містилися на екрані, подібно до того, як це робиться в браузері звичайного комп'ютера. Ось чому текст і зображення на багатьох Web-сайтах виглядають в браузері вашого мобільного телефону такими маленькими. Частина initial-scale = 1.0 оголошення meta / viewport забороняє таку поведінку, змушуючи пристрій зберігати вихідний масштаб сторінки. Таке оголошення показує, що Web-дизайнер (в даному випадку Bootstrap) вже подбав про реалізацію адаптивного поведінки для екранів малого розміру, тому тут можна обійтися без використання стандартного методу повного перебору (brute-force).

далі в лістингу 1 наведено тег head, що містить посилання на Bootstrap CSS. В кінці файлу виконується завантаження jQuery і утиліти Bootstrap JavaScript. Ці сценарії запускаються в кінці для оптимізації продуктивності.

організація коду

За допомогою Bootstrap (або будь-якого набору файлів підтримки Web-проектування) ви можете вибрати один з підходів до організації HTML-код або код іншого типу. Я рекомендую створити директорію для власного проекту і скопіювати в неї файли Bootstrap, зберігши вихідну структуру директорій. Помістіть свої власні HTML-файли на самий верхній рівень, а файли CSS, JavaScript і файли зображень у відповідні піддиректорії Bootstrap (з іменами css, js і img відповідно). Загальна структура при цьому буде виглядати приблизно так:

. | - index.html | - [а також інші HTML-файли сайту] | - css | | - bootstrap.min.css | | - bootstrap-responsive.min.css | | - [а також стиснені файли Bootstrap і файли CSS для цього сайту] | - js | | - bootstrap.min.js | | - [а також стиснені файли Bootstrap і файли JavaScript для цього сайту] | - img | - [Файли PNG, що входять до складу Bootstrap, і файли зображень для цього сайту]

Адаптація CSS до пристрою

Тег meta / viewport є поточний угоду про адаптацію сторінки до області перегляду браузера. Консорціум W3C в даний час готує інший механізм у формі нового правила в стилі CSS (див. Розділ ресурси ). Еквівалент CSS оголошенню meta / viewport в лістингу 1 виглядає так:

@viewport {width: extend-to-zoom 100%; zoom: 1.0; }

Поки що ви можете включити цей код в свій CSS, залишивши в HTML-коді тег meta / viewport Коли форма CSS отримає широку підтримку, ви зможете прибрати оголошення meta / viewport.

Сітка

Головний контейнер div в лістингу 1 сигналізує про застосування фіксованого компонування Bootstrap. Поміщається в цій контейнер HTML-код інтегрується в сітку Bootstrap.

Якщо ви уважно подивитеся на більшість Web-сторінок, то зрозумієте, що вони розділені на групи блоків. Блок, розташований у верхній частині сторінки, може містити логотип. Ймовірно, зліва чи справа буде розташовано елементи навігації, і тут же буде знаходитися зміст сайту. Можливо, ще один блок міститиме нижній колонтитул. Основне вміст сайту може бути розділене на панелі або блоки. Раніше Web-дизайнери розміщували всі ці блоки вручну за допомогою рамкової моделі CSS.

Сітка дозволяє абстрагуватися від рамкової організації, яку я тільки що описав, і перейти до системи рядків і стовпців. Bootstrap пропонує для такої сітки ядро ​​CSS. Ви можете розмістити контент в будь-якій структурі блоків, вкладаючи елементи div один в одного шляхом застосування спеціальних класів.

На малюнку 1 показаний корисний шаблон, спочатку створений Аароном К. Уайтом (Aaron K. White) для візуалізації сітки Bootstrap і планування компоновки контенту (див. Розділ ресурси ). Я змінив його лише для того, щоб спростити читання тексту в цій статті.

Малюнок 1. Шаблон сітки Bootstrap Аарона К. Уайта
Покладіть початок створенню свого Web-сайту за допомогою Twitter Bootstrap   Коли просте не так просто   Ідея World Wide Web дуже проста

Сітка Bootstrap містить не менше 12 блоків на рядок із закладеними проміжками між блоками. Число рядків не обмежена, і кожен рядок може мати будь-яку висоту. Кожен блок має ширину 70 пікселів, а проміжки - 30 пікселів. Крім того, Bootstrap залишає поле шириною 30 пікселів з лівого боку сторінки. Сітка призначена для створення основної компонування і закладання проміжків, тому в ідеалі вас повинно турбувати лише вміст, який необхідно розмістити в цій сітці.

Заповнення шаблону HTML

у статті Розширення можливостей CSS за допомогою LESS я використовую приклад адаптивного проектування (заснований на прикладі ) Блогера developerWorks Боба Лі (Bob Leah)), щоб показати, як інструментарій LESS покращує синтаксис CSS. Bootstrap відмінно справляється зі спрощенням багатьох завдань кодування. У лістингу 2 показаний HTML-код з цієї статті (файл responsive.html в розділі Завантаження ), Переписаний так (у вигляді listing2.html), щоб працювати в координатної сітки Bootstrap, і доповнений адаптивними функціями Bootstrap:

Лістинг 2. Приклад HTML-файлу для Bootstrap (listing2.html)

<! Doctype html> <html lang = "en-US"> <head> <title> Responsive Bootstrap page </ title> <meta http-equiv = "Content-Type" content = "text / html; charset = UTF- 8 "> <meta name =" viewport "content =" width = device-width, initial-scale = 1.0 "> <link href =" css / bootstrap.min.css "rel =" stylesheet "media =" screen "> <link href = "css / bootstrap-responsive.min.css" rel = "stylesheet"> </ head> <body> <div class = "container"> <h1> Hello world! </ h1> <div class = "row"> <div id = "banner" class = "span12"> <! - Photo by Jake Sutton http://www.flickr.com/photos/44124405407@N01/510899838 -> <img src = " img / sky-slim.jpg "> </ div> </ div> <div class =" row "> <div id =" main-content "class =" span8 "> <p> Humpts dumptus in muro sedet </ p> <p> Veni vidi vici </ p> <p> Alea iacta est </ p> <hr> </ div> <div class = "span4"> <div class = "widget-title"> One </ div> <div class = "widget-text"> The quick brown fox jumps ... </ div> <div class = "widget-content"> <div class = "widget-title"> Two </ div> < div class = "widget-text"> Over the lazy dog ​​... </ div> </ div> <div class = "Widget-content"> <div class = "widget-title"> Three </ div> <div class = "widget-text"> To get to the other side </ div> </ div> </ div> </ div> <div class = "row"> <div id = "footer" class = "span12"> & copy; Nobody! This document is placed in the public domain. </ Div> </ div> </ div> <script src = "// code.jquery.com/jquery.js"> </ script> <script src = "js / bootstrap.min.js"> </ script> </ body> </ html>

В лістингу 2 Bootstrap усунув ряд завдань, які мені доводилося вирішувати вручну в старому адаптивному коді. Мені більше не потрібно застосовувати CSS для маніпуляції і масштабування осередків, оскільки тепер сторінка використовує сітку Bootstrap. CSS більше не потрібно і для ретельного рознесення візуальних елементів, оскільки сітка Bootstrap закладає оптимальні стандартні проміжки між блоками. Більш того, необхідність в CSS відпала і в контексті виконання медіа-запитів і настоянки відповідей в параметрах конструкції, оскільки всім цим тепер займаються адаптивні функції Bootstrap.

У лістингу 2 показано вкладення тегів div, які використовують класи сітки Bootstrap. Тег div з класом container є обгорткою для всієї координатної сітки. Кожен div з класом row визначає рядок осередків сітки. Теги div з класом span4 визначають блок, що складається з 4 осередків. Теги div з класом span12 визначають блок, що складається з 12 осередків, задаючи повну ширину сторінки. Bootstrap містить клас span N для об'єднання будь-якого числа осередків (від 1 до 12).

На малюнку 2 приведено отримане уявлення сторінки в мобільному браузері (Google Chrome на моєму Samsung Galaxy S3 з Android 4.1.1):

Малюнок 2. Подання браузера за рахунок застосування коду з лістингу 2

спеціальний CSS

Основні елементи сторінки, показані на малюнку 2 , Pазмещени коректно. Однак сторінці не вистачає елементів оформлення, які зробили б її більш привабливою, тому я додав трохи CSS (файл main.css в прикладі коду ). Сам Bootstrap CSS написаний на LESS, і в цілому я настійно рекомендую використовувати LESS замість простого CSS. Але для цього нескладного прикладу підійде і простий CSS, показаний в лістингу 3:

Лістинг 3. CSS для додавання нескладного оформлення в приклад HTML-коду (main.css)

.widget-content {margin: 10px; padding: 1px; background-color: #DDDDDD; } .Widget-title {font-weight: bold; padding: 10px; background-color: #EEEEEE; } .Widget-text {padding: 10px; background-color: #FCFCFC; } #Footer {text-align: center; font-size: small; }

Само собою, тепер в HTML-код з лістингу 2 необхідно додати посилання на спеціальний CSS з лістингу 3 . Оновлений HTML, в який додано посилання на файл main.css, міститься в файлі main.html в прикладі коду . На малюнку 3 показана отримана сторінка, що стала трохи більш презентабельною завдяки main.css:

Малюнок 3. Представлення браузера за рахунок застосування файлу main.html

висновок

Для мене і багатьох інших розробників, що спеціалізуються головним чином на написанні коду і обробці даних, а не на створенні візуальних ефектів, Bootstrap є дуже цінним інструментом. Bootstrap дозволяє мені зосередитися на базовому коді і даних для Web-проекту, створивши їх в рудиментарної формі, а потім попрацювати з дизайнером для додання сторінці лиску. Bootstrap може виявитися корисним в особливо складних випадках, пов'язаних з мобільними телефонами та іншими пристроями з маленькими екранами. Він поставляється з бібліотекою кнопок, стилями навігації та іншими інструментами, що допускають багаторазове застосування. І, що найголовніше, Bootstrap містить великий обсяг коду, що полегшує роботу з різноманітними браузерами і платформами.

В наші дні Bootstrap використовується настільки часто, що написані на ньому сайти давно стали впізнаваними. Часом ця впізнаваність може створювати враження шаблонності. Хороший дизайнер може не тільки надати сайту, створеного за допомогою Bootstrap, власний індивідуальний характер, але і пристосувати базові та адаптивні елементи під конкретний контент і спосіб застосування. Однак поки що з урахуванням цих міркувань створено лише кілька проектів. Bootstrap особливо корисний для швидкого втілення ідей в реальні Web-проекти.

Ресурси для скачування

Схожі теми

  • Оригінал статті: Rapid web development with Bootstrap .
  • Bootstrap : Поринете в Bootstrap і скачайте код з офіційної сторінки проекту.
  • Адаптація CSS до пристрою : Познайомтеся з пропонованими W3C стандартами для адаптації CSS до пристрою.
  • Do more in CSS with LESS (Розширення можливостей CSS за допомогою LESS) (Уче Огбуджі (Uche Ogbuji), developerWorks, липень 2013): дізнайтеся про проект LESS і познайомтеся з основами адаптивного Web-дизайну.
  • Prototype web applications with CouchDB and Bootstrap (Створення прототипів Web-додатків за допомогою CouchDB і Bootstrap) (Уче Огбуджі (Uche Ogbuji), developerWorks, червень 2013): дізнайтеся, як об'єднати Apache CouchDB з Bootstrap і почати розробку Web-додатків способом, чітко відокремлює рівень представлення від рівня бази даних.
  • Шаблон Bootstrap Illustrator Template : Створіть сітку для свого проекту Bootstrap за допомогою шаблону Аарона К. Уайта (Aaron K. White).
  • Get started with CSS (Введення в CSS) (Деніел Дж. Льюїс (Daniel J. Lewis), developerWorks, травень 2011 року): познайомтеся зі стандартними стилями CSS, включаючи CSS 2.1 і межбраузерний CSS3.
  • Use CSS media queries to create responsive websites (Використання CSS-медіазапросов для створення динамічних Web-сайтів) (Джефф Бейл (Jeff Bail), developerWorks, жовтень 2012 року): дізнайтеся, як використовувати медіа-запити CSS для створення Web-сайтів для настільних комп'ютерів, мобільних телефонів і планшетів.
  • Responsive Web Design (Адаптивний Web-дизайн) (Етан Маркотт (Ethan Marcotte), A List Apart, травень 2010 року): дізнайтеся більше про адаптивне проектуванні.
  • Code example of Responsive web design using CSS3 Media Queries (Приклади коду адаптивного Web-дизайну, що використовує медіа-запити CSS3): погляньте на приклад адаптивного коду від Боба Лі (Bob Leah), який був адаптований для цієї статті.
  • Випробуйте продукти IBM найзручнішим для себе Способи: скачайте ознайомчу версію продукту, випробуйте продукт в Інтернеті, попрацюйте з продуктом в хмарному середовищі або проведіть кілька годин в SOA Sandbox, щоб ознайомити SOA Sandbox , Щоб ознайомитися з ефективною реалізацією сервіс-орієнтованої архітектури.

Підпишіть мене на повідомлення до коментарів

Новости

Banwar.org
Наша совместная команда Banwar.org. Сайт казино "Пари Матч" теперь доступен для всех желающих, жаждущих волнения и азартных приключений.