Bootstrap

Звычайны Вы будзеце працаваь у камандзе, дзе ўжо будзе існаваць нейкая база напрацаваных CSS класаў і Вам трэба будзе правільна навучыцца прымяняць іх да Вашага HTML. Ці ў некаторых выпадках Вам спадрэбіцца рабіць нейкія зьмяненьні ў CSS, таму для распрацоўшчыка вельмі важна ведаць нейкую аснову тым як карыстацца стылямі

Адна з вельмі папулярных CSS-бібліятэк – гэта Bootstrap. Праглядзіце старонку Bootstrap’а – яна вядома зроблена з дапамогай гэтага фрэймворка (бібліятэкі). Зараз я распавяду Вам пра яшчэ адну клёвую рэч, для вывучэньня CSS і HTML. Так можна рабіць у любым браўзеры, але мы пазнаёмімся з Хромам (Chrome). Цісніце ў любым месцы старонкі Bootstrap'а правай кнопкай мышы і выбярыце Inspect Element. Маленькае акенца зьявіцца ўнізе старонцы, якое будзе адлюстроўваць крынічны код старонкі, з абраным Вамі элементам. Гэта акенца завецца Chrome Developer Tools або DevTools. Каб хутка выклікаць яго ціскайце Ctrl + Shift + I.

З левага боку DevTools адлюстроўваецца сьпіс элементаў на старонцы – там можна абраць іншы элемент і згарнуць або разгарнуць ягоны змест. З правага боку адлюстроўваецца CSS, які прымяняецца да элемента. Вы можаце ўключыць або выключаць стылі ціская па галачкам побач з CSS-правілам, або дабл-клікнуць па ўласьцівасьці каб зьмяніць яе. Вы нават можаце дадаваць новыя стылі, каб бачыць зьмяненьні ўжывую.

Зараз давайце пачнем знаёміцца з Bootstrap’ам каб стылізаваць нашыя ўласныя старонкі. Спампуйце Bootstrap і скапіюйце файл boostrap.css у тэчку css. Пачнем з наступнага HTML:

bootstrap-playground.html
<!DOCTYPE html>
<html>
<head>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <title>A bit of Boostrap</title>
</head>
<body>
    <h1>A bit of Bootstrap</h1>
    <h2>Let's see what Bootstrap can do for us</h2>
    
    <p>Bootstrap is pretty great, and we're going to explore why. Stay tuned for more excitement!</p>
    
    <p>Here's a paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    
    <p>Now, let's list some stuff out:</p>
    
    <ul>
        <li>Stuff</li>
        <li>More stuff</li>
        <li>Even more stuff</li>
    </ul>
</body>
</html>

Калі мы адчынім старонку ў браўзеры мы ўбачым што нейкія стылі Bootstrap ужо адлюстроўваюцца на старонцы. Праінспектуйце элементы на старонцы, каб паглядзець якія яны маюць CSS-уласьцівасьці і якія зь іх успадкаваны ад Bootstrap’а.

Сайт Bootstrap'а выглядае лепей за нашыя сайты, таму давайце паглядзім, чым яны карыстаюцца і што робіць іх сайт лепей. Калі мы праінспектуем верхнюю навігацыю на старонке Bootstrap'а мы заўважым, што старонка падзелена на тры асноўных элемента: <header>, <main> і <footer>. Гэтак жа як і тэг <div>, гэтыя тэгі нічога не робяць самі па сабе, а ўяўляюць сабой проста элементы для лагічнага групаваньня кантэнта. Гэтыя элементы былі ўведзены ў HTML пасьля 5ай версіі, для таго, каб пошукавым машыны і людзі маглі разумець што канкрэтна знаходзіцца ва элементце. Такія тэгі завуцца семантычнымі. Па сваім паводзінам яны нічым не адрозьніваюцца ад <div>‘аў. Унутры <header> і <main> існуе <div> з класам container; класс container таксама прымяняецца і да тэга <footer>. Давайце пакінем нашую старонку простай і пакуль ня будзем выкарыстоўваць <header>, <main> і <footer>, а проста абгарнем змест усей нашай старонкі ў тэг <div> з класам container. Атрымаецца прыкладна так:

bootstrap-playground.html
<body>
    <div class="container">
        <h1>A bit of Bootstrap</h1>
        <h2>Let's see what Bootstrap can do for us</h2>
        
        <p>Bootstrap is pretty great, and we're going to explore why. Stay tuned for more excitement!</p>
        
        <p>Here's a paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        
        <p>Now, let's list some stuff out:</p>
        
        <ul>
            <li>Stuff</li>
            <li>More stuff</li>
            <li>Even more stuff</li>
        </ul>
    </div>
</body>

Ці больш Вам падабаецца старонка зараз?

Давайце прыменім яшчэ адзін стыль Bootstrap. На кожнай старонцы сайта Bootstrap (акрамя галоўнай) пасьля загалоўка сэкцыі звычайны ідзе тэкст, які мае трохі павялічаны шрыфт. Калі Вы праінспектуеце гэты параграфа Вы заўважыце класс lead. Давайце паспрабуем дадаць гэты класс да нашага html:

bootstrap-playground.html
<body>
    <div class="container">
        <h1>A bit of Bootstrap</h1>
        <h2>Let's see what Bootstrap can do for us</h2>

        <p class="lead">Bootstrap is pretty great, and we're going to explore why. Stay tuned for more excitement!</p>

        <p>Here's a paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

        <p>Now, let's list some stuff out:</p>

        <ul>
            <li>Stuff</li>
            <li>More stuff</li>
            <li>Even more stuff</li>
        </ul>
    </div>
</body>

Падабаецца?

На сайце Bootstrap’а можна знайсьці ўсе неабходныя докі, але толькі што мы з Вамі даведаліся як знайсьці класс элемента, адразу праз браўзер. Існуе вельмі шмат розных тэм для Bootstrap’а. Можна пагугліць bootstrap themes напрыклад і выбраць тую, якая найбольш падабаецца. Сайт Course.by дарэчы таксама пабудаваны часткова з дапамогай Bootstrap тэмы.

Bootstrap. Пры карыстаньні Bootstrap Вам верагодней за ўсё спатрэбіцца зьмяняць некаторыя стылі, вызначанные ў Bootstrap. Самы просты шлях – гэта адразу зьмяняць файл Bootstrap, але гэта шлях і самы дрэнны. Простымі словамі – не Вы пісалі гэты код, таму не Вам яго зьмяняць. Ды і напрыклад, што Вы будзеце рабіць калі выпусьцяць новую версію? Як будзеце сінхранізоўваць зьмяненьні? Такім чынам лепей за ўсё файл Bootstrap пакінуць некранутым, а стылі Bootstrap перавызначаць (override) у асобным файле, які Вы створыце самастойна.

Прыклад таго, як перавызначыць стылі Bootstrap'а каб зрабіць загалоўкі тлустымі:

bootstrap-playground.html
<!DOCTYPE html>
<html>
<head>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <title>A bit of Boostrap</title>
</head>
<body>
    <h1>A bit of Bootstrap</h1>
</body>
</html>
styles.css
h1 {
    font-weight: bold;
}

Галоўнае каб Вашыя стылі былі падключаныя пасьля стыляў Bootstrap'а, каб іхны прыярытэт быў вышэй.

Зараз давайце разбярэмся на практыцы як карыстацца тэмамі іншых людзей:

  • Стварыце новую старонку з месцамі, куды бы хацелі паехаць на адпачынак. Выкарыстоўвайце Bootstrap. Перавызначыце стылі Bootstrap у сваім файле.
  • Знайдзіце Bootstrap тэму, якая б Вам падабалася – замяніце арыгінальныя файлы Bootstrap' на файлы тэмы.

Сетка і адаптыўны дызайн

Адна з галоўных і самых моцных фішак Bootstrap'а – гэта ягоная сеткая сістэма, якая дазваляе ствараць калонкі і радкі на старонцы. Праглядзіце дакумэнтацыю Bootstrap CSS. Уся дакумэнтацыя знаходзіцца ўнутры <div> з класам row; сайдбар унутры <div> з класам col-md-3, а сам змест у <div> з класам col-md-9. Сетка Bootstrap'а мае 12-калоначную структуру, і Вы можаце выбраць колькі калонак кожная вертыкальная секцыя будзе займаць. Такім вобразам Вы можаце разбіць радок на 4 калонкі выкарыстоўваючы col-md-3, ці зрабіць дзве калонкі рознай шырыні: col-md-4 і col-md-8.

Калі Вы зьменіце памер акенца са старонкай Bootstrap (зробіце яго менш), Вы ўбачыце нешта насамрэч клёвае: разметка старонкі зьмяняецца калі акенца робіцца менш. На сёняшні дзень адаптыўны дызайн (responsive design) можна сказаць зрабіўся стандартам будаваньня старонак. Ён дае магчымасьць Вашаму сайту быць прачытанам на ноўтбуке, планшэце і мабільных прыладах незалежна ад памера іх экрана. Некаторыя сайты перанакіроўваюць карыстальніка на асобную старонку, прыстасаваную для мабільных прыладаў, калі яны вызначаюць, што сайт праглядаецца на мабільным браўзеры, але вялікая перавага адаптыўнага дызайна ў тым, што Вам не трэба мець асобныя версіі Вашага сайта для кожнай прылады – Вы маеце адзін сайт, які працуе незалежна ад памера экрана.

Каб зразумець як адбываецца гэтыя магія са зьмянённай разметкай, праінспектуйце сайдбар (упэўніцеся што абраны <div class="col-md-3">). З правага боку Вы павінны ўбачыць CSS-правіла, якое выглядае вось так:

@media (min-width: 992px)
.col-md-3 {
    width: 25%;
}

Калі Вы зьмяншаеце старонку і яна робіцца менш за 992 пікселя па шырыне, сайдбар будзе адлюстроўвацца зверху старонкі. CSS-правіла таксама зьнікае з правай панэлі.

Частка @media завецца media query. Яна кажа ўсяму CSS які знаходзіцца ўнутры прымяняцца толькі тады, калі крытэр, апісаны ў ёй выконваецца; у гэтым выпадку тады, калі шырыня экрана робіцца менш за 992 пікселя.

Даволі лёгка напісаць media query самастойна. Вось прыклад:

@media (min-width: 768px) and (max-width: 991px) {
    .my-class {
        display: inline;
    }
}

Папрактыкуйцеся выкарыстоўваць сетку Bootstrap’а:

  • Add columns and rows to your vacation page.
  • Даведайцеся што будзе калі ў адзін радок дадаць больш за 12 калонак?
  • Як вы думаеце навошта створаны класы .col-md-push-* і .col-md-pull-* (* можа быць ад 1 да 12)?

І трохі адаптыўнасьці:

  • Выбярыце якую-небудзь з Вашых папярэдніх старонак на якой ёсьць малюнкі. Стварыце клас, для малюнкаў, якія не буду адлюстроўвацца на маленькіх экранах. Дадайце media query, якая хавае малюнкі (карыстючыся display: none)на маленькіх экранах.

Як развівацца далей у галіне HTML і CSS

На сучасный стадыі Вы напэўна ў адным з гэтых двух лагераў: дызайнер або распрацоўшчык.

Калі Вы дызайнер, Вы адчуваеце вялікую асалоду ад карыстаньня ўсімі гэтымі CSS фішкам. Вы пачалі шанаваць моц CSS і ўжо не можаце чакаць каб хутчэй пачаць рабіць сайты, якія выглядаюць насамрэч прыгожа. Калі ўсё так, тады прымайце віншаваньне! Працягвайце Ваш шлях у якасьці front-end дызайнера, але далей гэты курс вельмі моцна пераважвае ў бок праграмаваньня, а не дызайна. Усе адно, я вельмі раю Вам навучыцца праграмаваць (асабліва JavaScript), таму што гэта зробіць Ваш лепшым дызайнерам і дапаможа лепей супрацоўнічаць з back-end распрацоўшчыкамі. Зараз Вы можаце зрабіць перапынак і працягнуць вывучэньне HTML і CSS.

Калі Вы распрацоўшчык Вы магчыма ўжо трохі стаміліся ад усяго гэтага дызайнерцтва. Канешне, Вам падабаецца калі сайт выглядае прыгожа, але Вы ня хочаце марнаваць час працуючы з шрыфтамі і колерамі – Вы проста хочаце хутчэй што-небудзь пабудаваць. Добрыя навіны – зараз мы ўжо пачнем будаўніцтва!

Калі Вы трамляеце ў два лагеры – гэта проста афігенскі. Вы незвычайны чалавек і Вашыя таленты будуць у вельмі вялікім попыце. Мы працягнем вывучыць праграмаваньне, але Вы павінны абавязкова вярнуцца да Вашых дызайнерскіх навыкаў і развіць іх.

Неглядзячы на шлях, які Вы абралі, добры спосаб вывучацьь HTML і CSS далей гэтая капіяваць іншых людзей. Калі Вы бачыце тое, што Вам падабаецца, паглядзіце на код праз інспектар, а потым паспрабуйце зрабіць самастойна. Вельмі шмат сайтаў пабудавана не зусім правільным шляхам – існуе верагоднасьць набрацца дрэнных звычак, таму спачатку заўсёды глядзіце на сайт Bootstrap’а. Да і сам фрэймворк – выдатнае месца каб паглядзець якім павінен быць HTML і CSS.

Часам Вам спатрэбіцца проста даведнік каб даведацца як якая-небудзь CSS-уласьцівасьць або HTML-тэг павінны працаваць. Mozilla Developer Network (MDN) – адна з найлепшых крыніц; яна мае даведнікі па CSS, HTML элементам і HTML атрыбутам. У Сеціве існуе яшчэ шмат даведнікаў, але спачатку заўсёды праверайце (MDN).

Папярэдні занятак Наступны занятак