Turinys
- Kas yra „Bootstrap“?
- Paruoškite „Bootstrap“ aplinką
- „Bootstrap“ įgalintas pagrindinis tinklalapio šablonas
- Paprasta įkrovos tinklelio struktūra
- Pridedamas numatytasis „Bootstrap“ skirtuko maketas
- Pagrindinis „Bootstrap“ skirtuko maketo kodas
- Numatytieji „Bootstrap“ skirtukai
- Pridėkite kraštinės spalvą prie „Bootstrap“ skirtukų
- „Bootstrap“ skirtukai su turiniu
- Skirtukai su turiniu
- Pridėti kraštinę prie įkrovos juostos turinio srities
- Pridėti skirtuko fono spalvą
- Nustatyti aktyviojo skirtuko spalvą
- Pridėti skirtuko srities spalvą
Kas yra „Bootstrap“?
„Bootstrap“ yra galinga „front-end“ kūrimo sistema, kurią naudojant labai lengva sukurti reaguojančias svetaines. Oficialioje „Bootstrap“ svetainėje yra daugybė įprastų CSS / HTML komponentų ir „Javascript“ komponentų, kurie yra paruošti naudoti. Šiame straipsnyje aš jums parodysiu, kaip naudoti „bootstrap“ „JavaScript“ skirtuko komponentą, kad sukurtumėte stilingą skirtuko išdėstymą savo svetainei.
Paruoškite „Bootstrap“ aplinką
Pirmiausia turite atsisiųsti naujausią „bootstrap“ sistemos versiją. Tada turite jį išskleisti į aplanką, kuriame ketinate dirbti. Oficialios „bootstrap“ svetainės skiltyje „Pradėti“ yra pagrindinis tinklalapio šablonas, įgalinantis įkrovos paleidimą, kad galėtumėte jį nukopijuoti ir sukurti naują tinklalapį. Kai sukursite naują puslapį, jis atrodys taip:
„Bootstrap“ įgalintas pagrindinis tinklalapio šablonas
! DOCTYPE html> html lang = "lt"> head> meta charset = "utf-8"> meta http-equiv = "X-UA-Compatible" content = "IE = edge"> meta name = "viewport" content = "width = device-width, initial-scale = 1"> title> Bootstrap 101 šablonas / pavadinimas>! - Bootstrap -> link href = "css / bootstrap.min.css" rel = "stylesheet">! - HTML5 „Shim“ ir „Respond.js“ IE8 palaikymas HTML5 elementų ir medijos užklausų ->! - ĮSPĖJIMAS: „Respond.js“ neveikia, jei puslapį žiūrite per failą: // ->! - [jei lt IE 9 ]> scenarijus src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> / scenarijus> scenarijus src = "https://oss.maxcdn.com/libs/respond. js / 1.4.2 / respons.min.js "> / script>! [endif] -> / head> body> h1> Sveiki, pasauli! / h1>! - jQuery (reikalingas„ Bootstrap “„ JavaScript “papildiniams) - > scenarijus src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> / scenarijus>! - Įtraukite visus kompiliuotus papildinius (žemiau) arba įtraukite atskirus failus kaip reikia -> scenarijus src = "js / bootstrap.min.js"> / scenarijus> / body> / html>
Šis šablonas suteiks jums pranešimą „labas pasaulis“. Sukurkime tinklelio aplinką, kad galėtume įtraukti kitus „Bootstrap“ komponentus. Tai galite padaryti taip;
- Po turinio žymos visas HTML žymas turite suvynioti į div su klasės pavadinimu „container“. Šis divas laikys visus HTML valdiklius tinklalapio centre, taip pat konteinerių paleidimo sistema bus pritaikyta kiekvienam įrenginio dydžiui. Pridėkite fono atspalvį, kad būtų rodomas konteinerio vietos naudojimas.
- Pridėkite pagrindinį tinklelio išdėstymą. Prieš naudodami bet kokį įkrovos paketo komponentą, turite naudoti tinklelio išdėstymą. Šiame pavyzdyje aš naudosiu šią tinklelio struktūrą;
Paprasta įkrovos tinklelio struktūra
div class = "container" style = ”background-color: #eee;”> div class = "row"> div class = "col-md-8"> h1> Įkėlimo skirtukai! / h1> / div> / div> / div>
Dabar išsaugokite ir atnaujinkite puslapį, gausite tokią išvestį;
Pridedamas numatytasis „Bootstrap“ skirtuko maketas
Pilka sritis ekrane yra konteinerio sritis ir, kaip matote, ji yra centre. Dabar pridedate pagrindinį „bootstrap“ skirtuko komponentą. „Bootstrap“ skirtukų kodo pavyzdį galite gauti „javascript“ komponento skiltyje skirtukų lape. Pridėjus skirtuko kodą, tinklalapis atrodys taip:
Pagrindinis „Bootstrap“ skirtuko maketo kodas
div class = "container" style = "background-color: #eee;"> div class = "row"> div class = "col-md-8"> h1> Įkrovos juostos skirtukai! / h1> ul class = "nav nav -tabs "id =" myTab "> li class =" active "> a href =" # home "data-toggle =" tab "> Pagrindinis / a> / li> li> a href =" # profilis "duomenų perjungimas = "tab"> Profile / a> / li> li> a href = "# messages" data-toggle = "tab"> Messages / a> / li> li> a href = "# settings" data-toggle = " skirtukas "> Nustatymai / a> / li> / ul> div class =" tab-content "> div class =" tab-panel active "id =" home "> ... / div> div class =" tab-panel "id =" profile "> ... / div> div class =" tab-pane "id =" messages "> ... / div> div class =" tab-panel "id =" settings "> ... / div> / div> / div> / div> / div>
Išsaugokite kodą ir atnaujinkite, kad gautumėte išvestį taip:
Numatytieji „Bootstrap“ skirtukai
Tai yra pagrindinis skirtukas „bootstrap“. Kai kuriate verslo svetaines, turite kurti stilių pagal individualų dizainą. Padarykime šiuos skirtukus stilingus, pridėdami pasirinktinius stilius.
Pridėkite kraštinės spalvą prie „Bootstrap“ skirtukų
Prieš tęsdami toliau, turite rasti numatytuosius įkrovos juostos stilius. Tai galite padaryti naudodami bet kurią naršyklę. Visose naršyklėse yra kūrimo įrankiai, kuriuose galite išnagrinėti kiekvieną HTML žymą ir jų stilius, derinti „javascript“ ir daug daugiau. Aš naudoju „Chrome“ naršyklę ir paspaudęs F12 galiu gauti kūrimo įrankius. Apačioje gausite du naujus langus; viename rodomas HTML šaltinis, o kitame - visas paveldėtas CSS kodas. Spustelėkite paiešką šalia elemento ir užveskite žymeklį ant elemento, kuriame norite rasti išsamią informaciją. Tai bus rodoma CSS lange. Kūrimo langas atrodys taip:
Dabar mes žinome, kad inkaro žymos stilius reikia pakeisti, kad gautume pasirinktinę krašto spalvą. Galite nepaisyti bet kokios įkrovos juostos CSS klasės, pridėdami stiliaus žymą po antraštės skyriuje esančia nuoroda į pradžios juostos CSS. Dideliuose plėtros projektuose jie naudoja atskirus stiliaus lapus, kad išlaikytų pasirinktinius stilius. Leiskite man parodyti, kokių stilių reikia pridėti, kad visi skirtukai būtų ribojami.
Leiskite man išsamiai paaiškinti kiekvieną stilių. Pirmoji stiliaus kodo eilutė suteiks mėlyną spalvą po skirtukais. Bet tik aktyviame skirtuke jis yra paslėptas. Kaip tai veikia „bootstrap“? Sąrašo elementams naudojama neigiama paraštė, o kiekviename skirtuke krašto apačia tampa skaidri.
Pridėję antrą stilių pastebėsite, kad visi suapvalinti skirtukai turi kraštus, įskaitant aktyvų skirtuką. Pagal skirtukų dizainą turime padaryti, kad aktyviojo skirtuko kraštinės apačia būtų skaidri. Tai galite padaryti pridėję trečią kodo eilutę prie stilių. Išsaugoję ir atnaujinę puslapį gausite tokią išvestį;
Dabar turime suformuoti turinio sritį. Prieš tai turime pridėti šiek tiek turinio, kad kiekvieną skirtuką galėtume atskirti. Visada galite gauti pavyzdinį turinį naudodami „Iipsum“ svetainę. Kai pridėsite turinį, jūsų kodas atrodys taip:
„Bootstrap“ skirtukai su turiniu
div class = "container"> div class = "row"> div class = "col-md-8"> h1> Įkrovos skirtukai! / h1> ul class = "nav nav-tabs" id = "myTab"> li class = "active"> a href = "# home" data-toggle = "tab"> Pagrindinis / a> / li> li> a href = "# profile" data-toggle = "tab"> Profilis / a> / li > li> a href = "# messages" data-toggle = "tab"> Messages / a> / li> li> a href = "# settings" data-toggle = "tab"> Settings / a> / li> / ul> div class = "tab-content my-tab"> div class = "tab-panel active" id = "home"> div class = "row"> div class = "col-md-12"> h3> Tab „One / h3> p>“ yra tiesiog fiktyvus spausdinimo ir rinkimo pramonės tekstas. „Lorem Ipsum“ buvo standartinis pramonės fiktyvus tekstas nuo pat 1500-ųjų, kai nežinomas spausdintuvas paėmė tipo virtuvę ir ją sukrapštė, kad pagamintų pavyzdinę knygą. / p> / div> / div> / div> div class = "tab-panel" id = "profile"> div class = "row"> div class = "col-md-12"> h3> Antras skirtukas / h3 > p> yra tiesiog fiktyvus spausdinimo ir rinkimo pramonės tekstas. „Lorem Ipsum“ buvo standartinis pramonės fiktyvus tekstas nuo pat 1500-ųjų, kai nežinomas spausdintuvas paėmė tipo virtuvę ir ją sukrapštė, kad pagamintų pavyzdinę knygą. / p> / div> / div> / div> div class = "tab-panel" id = "messages"> div class = "row"> div class = "col-md-12"> h3> Trečiasis skirtukas / h3 > p> yra tiesiog fiktyvus spausdinimo ir rinkimo pramonės tekstas. „Lorem Ipsum“ buvo standartinis pramonės fiktyvus tekstas nuo pat 1500-ųjų, kai nežinomas spausdintuvas paėmė tipo virtuvę ir ją sukrapštė, kad pagamintų pavyzdinę knygą. / p> / div> / div> / div> div class = "tab-panel" id = "settings"> div class = "row"> div class = "col-md-12"> h3> Ketvirtasis skirtukas / h3 > p> yra tiesiog fiktyvus spausdinimo ir rinkimo pramonės tekstas. „Lorem Ipsum“ buvo standartinis pramonės fiktyvus tekstas nuo pat 1500-ųjų, kai nežinomas spausdintuvas paėmė tipo virtuvę ir ją sukrapštė, kad pagamintų pavyzdinę knygą. / p> / div> / div> / div> / div> / div> / div> / div>
Išsaugokite puslapį ir atnaujinkite naršyklę. Gausite ekraną, kuris atrodo kaip žemiau:
Skirtukai su turiniu
Pridėti kraštinę prie įkrovos juostos turinio srities
Dabar turime tęsti tą pačią sieną prie kiekvieno konteinerio. Tai galite padaryti pridėdami stilių skirtuko srityje. Pridėkime stiliaus klasę prie „div“ su stiliaus klasės „tab-content“ pavadinimu „my-tab“. Ši nauja stiliaus klasė pakeis numatytąsias klasės ypatybes. Dabar prie CSS galite pridėti šią kodo eilutę.
.my-tab .tab-pane {border: solid 1px blue;}
Išsaugokite jį ir atnaujinkite puslapį, kurio rezultatas bus toks:
Kaip matote, yra dvi viršutinės kraštinės, kurios sutampa, ir vėl aktyvus skirtukas gavo apatinę sienų liniją. Šias problemas galime išspręsti pakeisdami ypatybę, esančią viršutinėje sienos dalyje. Aukščiau stiliaus klasė gali būti keičiama taip;
.my-tab .tab-pane {border: solid 1px blue; „border-top“: 0; }
Išsaugokite ir atnaujinkite puslapį, pastebėsite išvestį taip:
Atkreipkite dėmesį, kad prieš įtraukdami turinį į kiekvieną skirtukų sritį, turite naudoti įkrovos tinklelio sistemą, kitaip išdėstymas sulūš.
Pridėti skirtuko fono spalvą
Tarkime, kad viršutiniams skirtukams norite priskirti fono spalvą. Tai galite padaryti naudodami antraštės skyriuje apibrėžtas stiliaus klases. Tam reikia pakeisti stiliaus klasę „#myTab li a“ ir priskirti fono spalvą taip;
#myTab li a {border-color: blue; background-color: # A5C967; }
Išsaugokite ir atnaujinkite puslapį, gausite tokią išvestį kaip žemiau:
Nustatyti aktyviojo skirtuko spalvą
Pagal numatytuosius nustatymus turime rodyti aktyvų skirtuką naudodami kitą spalvą. Tam turime šiek tiek pakoreguoti stiliaus klasę „#myTab li.active a“ taip:
#myTab li.active a {border-bottom-color: transparent; background-color: Yellow; }
Virš stiliaus koregavimo aktyvaus skirtuko fono spalva taps geltona. Išsaugoti ir atnaujinti puslapio išvestį bus taip;
Pridėti skirtuko srities spalvą
Įtraukime pasirinktinę spalvą į skirtukų sritį. Tai galite padaryti pakoregavę pasirinktinio stiliaus klasę „.my-tab .tab-pane“, pridėdami pageidaujamą pagrindinę spalvą taip;
.my-tab .tab-pane {border: solid 1px blue; „border-top“: 0; fono spalva: # F7EFC6;}
Išsaugokite puslapį ir atnaujinkite ir gausite puslapį taip:
Tikiuosi, kad galite pakęsti mano spalvų pasirinkimus skirtuko maketui. Šiame straipsnyje aš naudoju tik pasirinktines spalvas, kad pademonstruočiau, kaip galite pakeisti numatytojo įkrovos juostos skirtuko maketo išvaizdą. Tačiau pagal savo dizainą galite pasirinkti spalvas ar net fono paveikslėlius, norėdami stilizuoti skirtukus. Viskas, ką jums reikia padaryti, yra patobulinti šiame straipsnyje apibrėžtas stiliaus klases.
Šis straipsnis yra tikslus ir tikras, kiek autorius žino. Turinys skirtas tik informaciniams ar pramoginiams tikslams ir nepakeičia asmeninių ar profesionalių patarimų verslo, finansų, teisiniais ar techniniais klausimais.
