Žiūrint tik į išskleidžiamąjį meniu, čia yra reikalingas HTML. Išskleidžiamojo meniu aktyviklį ir išskleidžiamąjį meniu turite įtraukti į .dropdown, arba kitą elementą, kuris deklaruoja position: relative;. Tada tiesiog sukurkite meniu.
<div class = "išskleidžiamasis sąrašas" >
<!-- Nuoroda arba mygtukas, skirtas perjungti išskleidžiamąjį meniu -->
<ul class = "dropdown-menu" role = "meniu" aria-labelledby = "dLabel" >
Sulygiuokite meniu dešinėje ir įtraukite papildomų lygių išskleidžiamųjų meniu.
Meniu suderinimas
Pridėti .pull-rightprie a .dropdown-menuį dešinę išlygiuoti išskleidžiamąjį meniu.
<ul class = "Dropdown-menu pull-right" role = "meniu" aria-labelledby = "dLabel" >
...
</ul>
Submeniu išskleidžiamajame meniu
Pridėkite papildomo lygio išskleidžiamuosius meniu, rodomus užvedus pelės žymeklį, kaip ir OS X, su keliais paprastais žymėjimo priedais. Pridėkite .dropdown-submenuprie bet likurio esamo išskleidžiamojo meniu, kad sukurtumėte automatinį stilių.
Dvi pagrindinės parinktys ir du konkretesni variantai.
Vieno mygtuko grupė
Apvyniokite mygtukų seriją su .btn..btn-group
<div class = "btn-group" >
<button class = "btn" > 1 </button>
<button class = "btn" > 2 </button>
<button class = "btn" > 3 </button>
</div>
Kelios mygtukų grupės
Sujunkite rinkinius <div class="btn-group">į a <div class="btn-toolbar">, kad gautumėte sudėtingesnius komponentus.
<div class = "btn-toolbar" >
<div class = "btn-group" >
...
</div>
</div>
Vertikalios mygtukų grupės
Padarykite, kad mygtukų rinkinys būtų išdėstytas vertikaliai, o ne horizontaliai.
<div class = "btn-group btn-group-vertical" >
...
</div>
Žymės langelis ir radijo skoniai
Mygtukų grupės taip pat gali veikti kaip radijo imtuvai, kuriuose gali būti aktyvus tik vienas mygtukas, arba žymės langeliai, kuriuose gali būti aktyvus bet koks mygtukų skaičius. Peržiūrėkite „Javascript“ dokumentus .
Išskleidžiamieji meniu mygtukų grupėse
Galvas aukštyn! Mygtukai su išskleidžiamaisiais meniu turi būti atskirai suvynioti į juos .btn-group, kad .btn-toolbarbūtų tinkamai atvaizduojami.
Mygtukų išskleidžiamieji meniu
Apžvalga ir pavyzdžiai
Naudokite bet kurį mygtuką, kad suaktyvintumėte išskleidžiamąjį meniu, įtraukdami jį į a .btn-groupir nurodydami tinkamą meniu žymėjimą.
Kai kuriais atvejais, pvz., mobiliesiems, išskleidžiamieji meniu bus išplėsti už peržiūros srities. Lygiavimą turite išspręsti rankiniu būdu arba naudodami tinkintą JavaScript.
Split mygtuko išskleidžiamieji meniu
Remdamiesi mygtukų grupių stiliais ir žymėjimu, galime lengvai sukurti padalijimo mygtuką. Split mygtukai turi standartinį veiksmą kairėje ir išskleidžiamąjį perjungiklį dešinėje su kontekstinėmis nuorodomis.
Išskleidžiamuosius meniu taip pat galima perjungti iš apačios į viršų, pridedant vieną klasę prie tiesioginio pirminio .dropdown-menu. Jis pasuks kryptį ir pakeis .caretpaties meniu padėtį, kad judėtų iš apačios į viršų, o ne iš viršaus žemyn.
Prie bet kurio navigacijos komponento (skirtukų, tablečių ar sąrašo) pridėkite .disabledpilkų nuorodų ir be pelės žymeklio efektų . Tačiau nuorodas bus galima spustelėti, nebent būtų įdiegtas tinkintas JavaScript, kad būtų išvengta šių paspaudimų.
<li class = "išjungta" ><a href = "#" > Pagrindinis puslapis </a></li>
...
</ul>
Komponentų derinimas
Norėdami sulygiuoti navigacijos nuorodas, naudokite .pull-leftarba .pull-rightnaudingumo klases. Abi klasės pridės CSS plūdę nurodyta kryptimi.
Didina
Kadangi pagal numatytuosius nustatymus skirtukai ir tabletės yra horizontalios, tiesiog pridėkite antrą klasę , .nav-stackedkad jie atrodytų vertikaliai sukrauti.
Paprastas ir lengvas būdas sukurti naršymo nuorodų grupes su pasirenkamomis antraštėmis. Juos geriausia naudoti šoninėse juostose, pvz., OS X „Finder“.
Navigacijos sąrašo pavyzdys
Paimkite nuorodų sąrašą ir pridėkite class="nav nav-list":
<li class = "aktyvus" ><a href = "#" > Pagrindinis puslapis </a></li>
<li><a href = "#" > Biblioteka </a></li>
...
</ul>
Pastaba Norėdami įdėti lizdus naršymo sąraše, įtraukite class="nav nav-list"į bet kurį įdėtą <ul>.
Horizontalūs skirstytuvai
Pridėkite horizontalų skirstytuvą sukurdami tuščią sąrašo elementą su klase .divider, pavyzdžiui:
<ul class = "nav nav-list" >
...
<li class = "daliklis" ></li>
...
</ul>
Tabbable nav
Pagyvinkite savo skirtukus naudodami paprastą papildinį, skirtą skirtukuose perjungti turinį. „Bootstrap“ integruoja keturių stilių skirtukus: viršuje (numatytasis), dešinėje, apačioje ir kairėje.
Tabletinis pavyzdys
Kad skirtukai būtų rodomi skirtukuose, .tab-panekiekvienam skirtukui sukurkite unikalų ID ir apvyniokite juos .tab-content.
Jei norite, kad skirtukai išnyktų, pridėkite .fadeprie kiekvieno .tab-pane.
Reikia jQuery papildinio
Visi skirtukai su skirtukais yra aprūpinti mūsų lengvu jQuery papildiniu. Skaitykite daugiau apie tai, kaip atgaivinti skirtukus su skirtukais „Javascript“ dokumentų puslapyje .
Galima kabinti bet kuria kryptimi
Skirtukai apačioje
Apverskite HTML tvarką ir pridėkite klasę, kad skirtukai būtų apačioje.
Norėdami pradėti, naršymo juostos yra statinės (nepritvirtintos viršuje) ir apima projekto pavadinimo bei pagrindinio naršymo palaikymą. Įdėkite jį bet kurioje vietoje .container, kuri nustato svetainės ir turinio plotį.
Norėdami tinkamai formuoti ir išdėstyti formą naršymo juostoje, pridėkite atitinkamas klases, kaip parodyta toliau. Jei norite naudoti numatytąją formą, įtraukite .navbar-formir arba .pull-leftarba .pull-right, kad ją tinkamai sulygiuotumėte.
<form class = "navbar-form pull-left" >
<įvesties tipas = "text" class = "span2" >
<button type = "submit" class = "btn" > Pateikti </button>
</form>
Paieškos forma
Norėdami gauti labiau pritaikytą paieškos formą, naršymo juostoje pridėkite .navbar-searchprie specializuotų stilių įvesties ir form..search-query
<form class = "navbar-search pull-left" >
<input type = "text" class = "search-query" placeholder = "Ieškoti" >
</form>
Komponentų derinimas
Sulygiuokite navigacijos nuorodas, paieškos formą arba tekstą, naudokite .pull-leftarba .pull-rightnaudingumo klases. Abi klasės pridės CSS plūdę nurodyta kryptimi.
Apvyniokite teksto eilutes elemente su.navbar-text , paprastai ant <p>žymos, kad būtų tinkama pradžia ir spalva.
Pasirenkami ekrano variantai
Pritvirtinkite naršymo juostą peržiūros srities viršuje arba apačioje naudodami papildomą klasę atokiausioje dalyje .navbar.
Tvirtinama viršuje
Pridėkite .navbar-fixed-topir nepamirškite atsižvelgti į paslėptą sritį po juo, pridėdami bent 40 pikselių paddingprie <body>. Būtinai pridėkite tai po pagrindinio Bootstrap CSS ir prieš pasirenkamą reaguojantį CSS.
Sukurkite viso pločio naršymo juostą, kuri slinktų kartu su puslapiu, pridėdami .navbar-static-top. Skirtingai nei .navbar-fixed-topklasėje, jums nereikia keisti jokių užpildų ant body.
Norėdami įdiegti sutraukiamą interaktyvią naršymo juostą, naršymo juostos turinį įdėkite į div, .nav-collapse.collapseir pridėkite naršymo juostos perjungimo mygtuką .btn-navbar.
<li><a href = "#" > Pagrindinis puslapis </a> <span class = "daliklis" > / </span></li>
<li><a href = "#" > Biblioteka </a> <span class = "daliklis" > / </span></li>
<li class = "aktyvus" > Duomenys </li>
</ul>
Puslapių spausdinimas Dvi turinio puslapių peržiūros parinktys
Standartinis puslapių skyrimas
Paprastas puslapių rūšiavimas, įkvėptas Rdio, puikiai tinka programoms ir paieškos rezultatams. Didelis blokas yra sunkiai nepastebimas, lengvai keičiamas ir suteikia dideles paspaudimų sritis.
Greitos ankstesnės ir kitos nuorodos, skirtos paprastam puslapių rūšiavimui su lengvu žymėjimu ir stiliais. Tai puikiai tinka paprastoms svetainėms, pvz., tinklaraščiams ar žurnalams.
Numatytasis pavyzdys
Pagal numatytuosius nustatymus gaviklis sutelkia nuorodas.
Paprastas apvalkalas, skirtas h1tinkamai atskirti ir segmentuoti turinio dalis puslapyje. Jis gali naudoti h1numatytąjį smallelementą ir daugumą kitų komponentų (su papildomais stiliais).
Puslapio antraštės pavyzdys Antraštės potekstė
<div class = "puslapio antraštė" >
<h1> Puslapio antraštės pavyzdys </h1>
</div>
Miniatiūros Vaizdų, vaizdo įrašų, teksto ir kt. tinkleliai
Numatytosios miniatiūros
Pagal numatytuosius nustatymus „Bootstrap“ miniatiūros skirtos rodyti susietus vaizdus su minimaliu reikalingu žymėjimu.
Labai pritaikoma
Naudojant šiek tiek papildomo žymėjimo, į miniatiūras galima pridėti bet kokio HTML turinio, pvz., antraščių, pastraipų ar mygtukų.
Miniatiūros etiketė
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Miniatiūros (anksčiau.media-grid iki 1.4 versijos) puikiai tinka nuotraukų ar vaizdo įrašų tinkleliams, vaizdų paieškos rezultatams, mažmeninės prekybos produktams, portfeliams ir dar daugiau. Tai gali būti nuorodos arba statinis turinys.
Paprastas, lankstus žymėjimas
Miniatiūrų žymėjimas yra paprastas – a ulsu bet kokiu skaičiumili – viskas, ko reikiaJis taip pat itin lankstus, leidžiantis bet kokio tipo turiniui, naudojant tik šiek tiek daugiau žymėjimo turinio apvyniojimui.
Naudojami tinklelio stulpelių dydžiai
Galiausiai, miniatiūrų komponentas naudoja esamas tinklelio sistemos klases, pvz., .span2arba.span3 – miniatiūrų matmenims valdyti.
Žymėjimas
Kaip minėta anksčiau, reikalingas miniatiūrų žymėjimas yra lengvas ir paprastas. Štai numatytosios susietų vaizdų sąrankos peržiūra :
<ul class = "miniatiūros" >
<li class = "span4" >
<a href = "#" class = "miniatiūra" >
<img src = "https://placehold.it/300x200" alt = "" >
</a>
</li>
...
</ul>
Priskirto HTML turinio miniatiūrose žymėjimas šiek tiek pasikeičia. Norėdami leisti bloko lygio turinį bet kur, pakeičiame <a>į <div>tokį:
<ul class = "miniatiūros" >
<li class = "span4" >
<div class = "miniatiūra" >
<img src = "https://placehold.it/300x200" alt = "" >
<h3> Miniatiūros etiketė </h3>
<p> Miniatiūros antraštė... </p>
</div>
</li>
...
</ul>
Daugiau pavyzdžių
Ištirkite visas savo galimybes naudodamiesi įvairiomis jums prieinamomis tinklelio klasėmis. Taip pat galite maišyti ir derinti skirtingus dydžius.
Stilius įspėja apie sėkmę, įspėjimus ir klaidų pranešimus
Numatytasis įspėjimas
Įtraukite bet kokį tekstą ir pasirenkamą atsisakymo mygtuką, .alertkad gautumėte pagrindinį įspėjimo pranešimą.
Įspėjimas! Geriausiai patikrink save, tu neatrodai per gerai.
<div class = "alert" >
<button type = "button" class = "uždaryti" data-dismiss = "alert" > × </button>
<strong> Įspėjimas! </strong> Geriausia pasitikrinti, ar neatrodote per gerai.
</div>
Atmesti mygtukus
Mobiliosiose „Safari“ ir „Mobile Opera“ naršyklėse, be data-dismiss="alert"atributo, reikalaujama href="#"atmesti įspėjimus naudojant <a>žymą.
Arba galite naudoti <button>elementą su duomenų atributu, kurį pasirinkome savo dokumentams. Kai naudojate <button>, turite įtraukti type="button"arba jūsų formos negali būti pateiktos.
<button type = "button" class = "uždaryti" data-dismiss = "alert" > × </button>
Jei norite gauti ilgesnius pranešimus, padidinkite užpildymą įspėjimų apvalkalo viršuje ir apačioje pridėdami .alert-block.
Įspėjimas!
Geriausiai patikrink save, tu neatrodai per gerai. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
<div class = "alert alert-block" >
<button type = "button" class = "uždaryti" data-dismiss = "alert" > × </button>
<h4> Įspėjimas! </h4>
Geriausia pasitikrinti save, tu nesi...
</div>
Kontekstinės alternatyvos
Pridėkite pasirenkamų klasių, kad pakeistumėte įspėjimo konotaciją.
Klaida arba pavojus
Oi! Pakeiskite kelis dalykus ir bandykite pateikti dar kartą.
<div class = "alert alert-error" >
...
</div>
Sėkmė
Šauniai padirbėta! Sėkmingai perskaitėte šį svarbų įspėjimo pranešimą.
<div class = "alert alert-success" >
...
</div>
Informacija
Galvas aukštyn! Šis įspėjimas reikalauja jūsų dėmesio, bet jis nėra labai svarbus.
<div class = "alert alert-info" >
...
</div>
Eigos juostos Skirta įkelti, peradresuoti arba veiksmo būsenai
Pavyzdžiai ir žymėjimas
Pagrindinis
Numatytoji eigos juosta su vertikaliu gradientu.
<div class = "pažanga" >
<div class = "bar" style = " plotis : 60 %; " ></div>
</div>
Dryžuotas
Naudoja gradientą, kad sukurtų dryžuotą efektą. Nėra IE7-8.
<div class = "progreso progreso juostelės" >
<div class = "bar" style = " plotis : 20 %; " ></div>
</div>
Animuoti
Pridėti .activeprie .progress-striped, kad animuotų juosteles iš dešinės į kairę. Ne visose IE versijose.
<div class = "progreso progreso juostelės aktyvus" >
<div class = "bar" style = " plotis : 40 %; " ></div>
</div>
Sukrauti
Įdėkite kelis strypus į tą patį .progress, kad juos sukrautumėte.
<div class = "pažanga" >
<div class = "juosta juosta-sėkmė" style = " plotis : 35 %; " ></div>
<div class = "bar bar-warning" style = " plotis : 20 %; " ></div>
<div class = "baras-pavojus" style = " plotis : 10 %; " ></div>
</div>
Galimybės
Papildomos spalvos
Pažangos juostose naudojami tie patys mygtukai ir įspėjimų klasės, kad būtų nuoseklūs stiliai.
<div class = "progress progress-info" >
<div class = "bar" style = " plotis : 20 % " ></div>
</div>
<div class = "progreso pažanga-sėkmė" >
<div class = "bar" style = " plotis : 40 % " ></div>
</div>
<div class = "progress progress-warning" >
<div class = "bar" style = " plotis : 60 % " ></div>
</div>
<div class = "progreso progresas-pavojus" >
<div class = "bar" style = " plotis : 80 % " ></div>
</div>
Dryžuotos juostos
Panašiai kaip ir vienspalvių spalvų, turime įvairių dryžuotų eigos juostų.
<div class = "progress progress-info progress-striped" >
<div class = "bar" style = " plotis : 20 % " ></div>
</div>
<div class = "progreso progresas-sėkmės progresas-su juostelėmis" >
<div class = "bar" style = " plotis : 40 % " ></div>
</div>
<div class = "pažangos įspėjimas apie pažangą - dryžuotas" >
<div class = "bar" style = " plotis : 60 % " ></div>
</div>
<div class = "progreso progresas-pavojus progresas-dryžuotas" >
<div class = "bar" style = " plotis : 80 % " ></div>
</div>
Naršyklės palaikymas
Pažangos juostose naudojami CSS3 gradientai, perėjimai ir animacijos, kad būtų pasiekti visi jų efektai. Šios funkcijos nepalaikomos IE7-9 ar senesnėse „Firefox“ versijose.
Ankstesnės nei Internet Explorer 10 ir Opera 12 versijos nepalaiko animacijos.
Įvairūs Lengvi komunaliniai komponentai
Wells
Naudokite šulinį kaip paprastą elemento efektą, kad suteiktumėte jam įterptinį efektą.
Žiūrėk, aš šulinyje!
<div klasė = "gerai" >
...
</div>
Neprivalomi užsiėmimai
Valdykite paminkštinimus ir suapvalintus kampus su dviem pasirenkamomis modifikavimo klasėmis.
Žiūrėk, aš šulinyje!
<div class = "gerai gerai-didelis" >
...
</div>
Žiūrėk, aš šulinyje!
<div class = "gerai gerai-mažas" >
...
</div>
Uždaryti piktogramą
Jei norite atsisakyti turinio, pvz., modalų ir įspėjimų, naudokite bendrąją uždarymo piktogramą.
<button class = "uždaryti" > × </button>
„iOS“ įrenginiuose reikalingas „href="#" paspaudimo įvykiams, jei verčiau naudojate prieraišą.
<a class = "uždaryti" href = "#" > × </a>
Pagalbinės klasės
Paprastos, tikslingos pamokos, skirtos nedideliems ekrano ar elgesio patobulinimams.