Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum ir eros.
„Bootstrap“ yra „Twitter“ įrankių rinkinys, skirtas žiniatinklio programų ir svetainių kūrimui pradėti.
Tai apima pagrindinį CSS ir HTML tipografiją, formas, mygtukus, lenteles, tinklelius, naršymą ir kt.
Įspėjimas apie niekšą : „Bootstrap“ sukurta naudojant „Less “ ir buvo sukurta taip, kad būtų galima dirbti naudojant šiuolaikines naršykles.
Jei norite greičiau ir lengviau pradėti, tiesiog nukopijuokite šį fragmentą į savo tinklalapį.
Mėgstate naudoti mažiau? Jokių problemų, tiesiog klonuokite repo ir pridėkite šias eilutes:
Atsisiųskite, ištraukite šakutę, įrašykite problemas ir dar daugiau naudodami oficialų „Bootstrap“ atpirkimą „Github“.
Ankstesnėmis „Twitter“ dienomis inžinieriai naudojo beveik bet kurią jiems žinomą biblioteką, kad atitiktų sąsajos reikalavimus. „Bootstrap“ prasidėjo kaip atsakas į iškilusius iššūkius, o plėtra greitai paspartėjo per pirmąjį „Twitter“ „Hackweek“.
Daugelio „Twitter“ inžinierių pagalba ir atsiliepimais „Bootstrap“ gerokai išaugo, kad apimtų ne tik pagrindinius stilius, bet ir elegantiškesnius bei patvaresnius priekinės dalies dizaino modelius.
Skaitykite daugiau dev.twitter.com ›
„Bootstrap“ yra išbandytas ir palaikomas pagrindinėse šiuolaikinėse naršyklėse, pvz., „Chrome“, „Safari“, „Internet Explorer“ ir „Firefox“.
„Bootstrap“ pateikiamas su sudarytais CSS, nesukompiliuotais ir pavyzdiniais šablonais.
Numatytoji tinklelio sistema, pateikiama kaip Bootstrap dalis, yra 940 pikselių pločio 16 stulpelių tinklelis. Tai populiarios 960 tinklelio sistemos skonis, bet be papildomos paraštės / užpildymo kairėje ir dešinėje pusėse.
Kaip parodyta čia, pagrindinį išdėstymą galima sukurti su dviem „stulpeliais“, kurių kiekvienas apima 16 pagrindinių stulpelių, kuriuos apibrėžėme kaip tinklelio sistemos dalį. Daugiau variantų rasite toliau pateiktuose pavyzdžiuose.
- <div class = "row" >
- <div class = "span6 columns" >
- ...
- </div>
- <div class = "10 stulpelių" >
- ...
- </div>
- </div>
Numatytasis ir paprastas 940 pikselių pločio, centre išdėstytas išdėstymas beveik bet kuriai svetainei ar puslapiui, kurį teikia vienas <div.container>
.
- <kūnas>
- <div class = "konteineris" >
- ...
- </div>
- </body>
Alternatyvi, lanksti sklandi puslapio struktūra su minimaliu ir maksimaliu pločiu bei kairiąja šonine juosta. Puikiai tinka programoms ir dokumentams.
- <kūnas>
- <div class = "container-fluid" >
- <div class = "šoninė juosta" >
- ...
- </div>
- <div class = "turinys" >
- ...
- </div>
- </div>
- </body>
Standartinė tipografinė hierarchija tinklalapiams struktūrizuoti.
Visas tipografinis tinklelis yra pagrįstas dviem Less kintamaisiais mūsų preboot.less faile: @basefont
ir @baseline
. Pirmasis yra pagrindinis šrifto dydis, naudojamas visame pasaulyje, o antrasis yra pagrindinės linijos aukštis.
Naudojame tuos kintamuosius ir šiek tiek matematikos, kad sukurtume visų tipų paraštes, užpildus ir linijų aukštį ir dar daugiau.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Pabrėžimų, adresų ir santrumpos naudojimas
<strong>
<em>
<address>
<abbr>
Kirčiavimo žymos ( <strong>
ir <em>
) turėtų būti naudojamos norint nurodyti papildomą žodžio ar frazės svarbą ar kirčiavimą, palyginti su jį supančia kopija. Naudokite <strong>
svarbos ir <em>
streso pabrėžimui .
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus . Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.
Pastaba: HTML5 vis tiek galima naudoti <b>
ir <i>
žymas, jos nebūtinai turi būti atitinkamai paryškintos ir kursyvu (nors jei yra semantiškesnis elementas, naudokite jį). <b>
skirtas paryškinti žodžius ar frazes, nesuteikiant papildomos svarbos, o <i>
dažniausiai skirtas balsui, techniniams terminams ir pan.
Elementas <address>
naudojamas artimiausio protėvio kontaktinei informacijai arba visam darbui. Štai kaip tai atrodo:
Pastaba: kiekviena eilutė <address>
turi baigtis eilutės lūžiu ( <br />
) arba įterpta į bloko lygio žymą (pvz., <p>
), kad būtų tinkamai struktūrizuotas turinys.
Sutrumpinimams ir akronimams naudokite <abbr>
žymą ( HTML5<acronym>
nebenaudojama ). Įdėkite trumpąją formą į žymą ir nustatykite viso pavadinimo pavadinimą.
<blockquote>
<p>
<small>
Norėdami įtraukti bloko citatą, apvyniokite ir <blockquote>
pažymėkite . Naudodami elementą nurodykite šaltinį ir prieš jį gausite brūkšnelį .<p>
<small>
<small>
—
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Daktaras Julius Hibbertas
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
Stalai puikiai tinka daugeliui dalykų. Tačiau puikioms lentelėms reikia šiek tiek žymėjimo, kad jos būtų naudingos, keičiamos ir skaitomos (kodo lygiu). Štai keletas patarimų, kurie padės.
Visada apvyniokite stulpelių antraštes <thead>
taip, kad hierarchija būtų <thead>
> <tr>
> <th>
.
Panašiai kaip ir stulpelių antraštės, visas lentelės turinys turėtų būti suvyniotas į a <tbody>
, kad jūsų hierarchija būtų <tbody>
> <tr>
> <td>
.
Visos lentelės bus automatiškai suformuotos tik su esminėmis kraštinėmis, kad būtų užtikrintas skaitomumas ir išlaikyta struktūra. Nereikia pridėti papildomų klasių ar atributų.
# | Pirmas vardas | Pavardė | Kalba |
---|---|---|---|
1 | Kai kurie | Vienas | Anglų |
2 | Džo | Presas | Anglų |
3 | Stu | Įdubimas | Kodas |
- <lentelė>
- ...
- </table>
Pamėginkite savo stalus pridėję zebrų juosteles – tiesiog pridėkite .zebra-striped
klasę.
# | Pirmas vardas | Pavardė | Kalba |
---|---|---|---|
1 | Kai kurie | Vienas | Anglų |
2 | Džo | Presas | Anglų |
3 | Stu | Įdubimas | Kodas |
Pastaba: „Zebra-Striping“ yra laipsniškas patobulinimas, neprieinamas senesnėms naršyklėms, pvz., IE8 ir senesnėms naršyklėms.
- <lentelės klasė = "zebras dryžuotas" >
- ...
- </table>
Atsižvelgiant į ankstesnį pavyzdį, pageriname savo lentelių naudingumą, suteikdami rūšiavimo funkciją per „ jQuery “ ir „ Tablesorter “ papildinį. Spustelėkite bet kurio stulpelio antraštę, kad pakeistumėte rūšiavimą.
# | Pirmas vardas | Pavardė | Kalba |
---|---|---|---|
1 | Tavo | Vienas | Anglų |
2 | Džo | Presas | Anglų |
3 | Stu | Įdubimas | Kodas |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( funkcija () {
- $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <lentelės klasė = "zebras dryžuotas" >
- ...
- </table>
Visoms formoms suteikiami numatytieji stiliai, kad jos būtų skaitomos ir keičiamos. Pateikiami teksto įvesties, pasirinkimo sąrašų, teksto sričių, radijo mygtukų ir žymimųjų laukelių bei mygtukų stiliai.
Pridėkite .form-stacked
prie formos HTML ir etiketes turėsite jų laukų viršuje, o ne kairėje. Tai puikiai tinka, jei formos yra trumpos arba turite du sunkesnių formų įvesties stulpelius.
Paprastai mygtukai naudojami veiksmams, o nuorodos – objektams. Pavyzdžiui, „Atsisiųsti“ gali būti mygtukas, o „naujausia veikla“ gali būti nuoroda.
Pagal numatytuosius nustatymus visi mygtukai yra šviesiai pilkos spalvos, tačiau skirtingiems spalvų stiliams galima pritaikyti keletą funkcinių klasių. Šios klasės apima mėlyną .primary
, šviesiai mėlyną .info
, žalią .success
ir raudoną .danger
klasę. Be to, kurti savo stilių yra lengva.
Mygtukų stiliai gali būti taikomi bet kam su .btn
taikoma. Paprastai juos norėsite taikyti tik <a>
, <button>
ir pasirinktiems <input>
elementams. Štai kaip tai atrodo:
Mėgstate didesnius ar mažesnius mygtukus? Turėk tai!
Mygtukams, kurie nėra aktyvūs arba kuriuos programa dėl vienos ar kitos priežasties išjungia, naudokite išjungtą būseną. Tai .disabled
skirta nuorodoms ir :disabled
elementams <button>
.
div.alert-message
Vienos eilutės pranešimai, skirti pabrėžti veiksmo nesėkmę, galimą nesėkmę ar sėkmę. Ypač naudinga formoms.
div.alert-message.block-message
Pranešimams, kuriuos reikia šiek tiek paaiškinti, turime pastraipos stiliaus įspėjimus. Jie puikiai tinka ilgesniems klaidų pranešimams paskelbti, vartotojui įspėti apie laukiantį veiksmą arba tiesiog pateikti informaciją, kad būtų daugiau dėmesio skiriama puslapyje.
Modalai – dialogo langai arba šviesdėžės – puikiai tinka kontekstiniams veiksmams tais atvejais, kai svarbu išlaikyti foninį kontekstą.
Vienas puikus kūnas…
Twipsis yra labai naudingi, kad padėtų sutrikusiam vartotojui ir nukreiptų juos tinkama kryptimi.
Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque vertetemque unde sunt sed voluptatem quauttatas accttasusantup quautta
Naudokite iššokančius langus, kad pateiktumėte puslapio potekstinę informaciją nepaveikdami išdėstymo.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum ir eros.
„Bootstrap“ buvo sukurta naudojant „ Preboot “ – atvirojo kodo mišinių ir kintamųjų paketą, skirtą naudoti kartu su „ Less “ – išankstiniu CSS procesoriumi, kad žiniatinklio kūrimas būtų greitesnis ir lengvesnis.
Sužinokite, kaip „Bootstrap“ naudojome „Preboot“ ir kaip galite juo pasinaudoti, jei kitame projekte pasirinktumėte paleisti „Less“.
Naudokite šią parinktį, kad visiškai išnaudotumėte „Bootstrap's Less“ kintamuosius, mišinius ir įdėjimą į CSS naudodami „Javascript“ savo naršyklėje.
- <link rel = "stylesheet/less" href = "mažiau/bootstrap.less" media = "visi" />
- <script src = "js/less-1.1.3.min.js" ></script>
Nejaučiate .js sprendimo? Išbandykite „Less Mac“ programą arba naudokite „Node.js “ kompiliavimui, kai įdiegiate kodą.
Štai keletas svarbiausių dalykų, įtrauktų į „Twitter Bootstrap“, kaip „Bootstrap“ dalį. Eikite į „Bootstrap“ svetainę arba „Github“ projekto puslapį, kad atsisiųstumėte ir sužinotumėte daugiau.
Kintamieji Less puikiai tinka palaikyti ir atnaujinti jūsų CSS be galvos skausmo. Jei norite pakeisti spalvos reikšmę arba dažnai naudojamą reikšmę, atnaujinkite ją vienoje vietoje ir viskas.
- // Nuorodos
- @linkColor : #8b59c2;
- @linkColorHover : tamsinti ( @linkColor , 10 );
- // Pilkos
- @juodas : #000;
- @grayDark : šviesinti ( @juoda , 25 %);
- @pilka : pašviesinti ( @juoda , 50 %);
- @grayLight : pašviesinti ( @juoda , 70 %);
- @grayLighter : pašviesinti ( @juoda , 90 %);
- @balta : #fff;
- // Akcentinės spalvos
- @mėlyna : #08b5fb ;
- @žalia : #46a546 ;
- @raudona : #9d261d;
- @geltona : #ffc40d;
- @oranžinė : #f89406 ;
- @rožinė : #c3325f ;
- @violetinė : #7a43b6 ;
- // Pagrindinės linijos tinklelis
- @basefont : 13px ;
- @baseline : 18px ;
/* ... */
Be įprastos CSS sintaksės , Less taip pat suteikia dar vieną komentavimo stilių .
- // Tai komentaras
- /* Tai taip pat komentaras */
Mišiniai iš esmės yra CSS apimantys arba daliniai elementai, leidžiantys sujungti kodo bloką į vieną. Jie puikiai tinka pardavėjo ypatybėms, pvz box-shadow
., , kelių naršyklių gradientams, šriftų krūvoms ir kt. Žemiau pateikiamas su Bootstrap įtrauktų mišinių pavyzdys.
- #font {
- . trumpinys ( @svoris : normalus , @dydis : 14 pikselių , @linijos aukštis : 20 pikselių ) {
- šrifto dydis : @size ; _
- šriftas - svoris : @weight ;
- eilutės aukštis : @lineHeight ; _
- }
- . sans - serif ( @svoris : normalus , @size : 14px , @lineHeight : 20px ) {
- šriftų šeima : " Helvetica Neue" , Helvetica , Arial , sans - serif ;
- šrifto dydis : @size ; _
- šriftas - svoris : @weight ;
- eilutės aukštis : @lineHeight ; _
- }
- . serif ( @svoris : normalus , @size : 14px , @lineHeight : 20px ) {
- šriftų šeima : " Georgia" , Times New Roman , Times , sans - serif ;
- šrifto dydis : @size ; _
- šriftas - svoris : @weight ;
- eilutės aukštis : @lineHeight ; _
- }
- . monospace ( @svoris : normalus , @size : 12px , @lineHeight : 20px ) {
- šriftų šeima : " Monaco" , Courier New , monospace ;
- šrifto dydis : @size ; _
- šriftas - svoris : @weight ;
- eilutės aukštis : @lineHeight ; _
- }
- }
- #gradientas {
- . horizontalus ( @startColor : #555, @endColor: #333) {
- fono spalva : @endColor ; _
- fonas - pakartokite : pakartokite - x ;
- fonas - vaizdas : - khtml - gradientas ( linijinis , kairėje viršuje , dešinėje viršuje , nuo ( @startColor ), iki ( @endColor )); // Konqueror
- fonas - vaizdas : - moz - linijinis - gradientas ( kairėje , @startColor , @endColor ); // FF 3.6+
- fonas - vaizdas : - ms - linijinis - gradientas ( kairėje , @startColor , @endColor ); // IE10
- background - image : - webkit - gradientas ( linijinis , kairysis viršuje , dešinėje viršuje , spalva - sustabdymas ( 0 % , @startColor ), spalva - sustabdymas ( 100 % , @endColor )); // Safari 4+, Chrome 2+
- background - image : - webkit - linear - gradient ( kairėje , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- fonas - vaizdas : - o - linijinis - gradientas ( kairėje , @startColor , @endColor ); // Opera 11.10
- fonas - vaizdas : linijinis - gradientas ( kairėje , @startColor , @endColor ); // Le standartas
- }
- . vertikali ( @startColor : #555, @endColor: #333) {
- fono spalva : @endColor ; _
- fonas - pakartokite : pakartokite - x ;
- fonas - vaizdas : - khtml - gradientas ( linijinis , kairėje viršuje , kairėje apačioje , nuo ( @startColor ), iki ( @endColor )); // Konqueror
- fonas - vaizdas : - moz - linijinis - gradientas ( @startColor , @endColor ); // FF 3.6+
- fonas - vaizdas : - ms - linijinis - gradientas ( @startColor , @endColor ); // IE10
- background - image : - webkit - gradientas ( linijinis , kairėje viršuje , kairėje apačioje , spalva - sustabdymas ( 0 % , @startColor ), spalva - sustabdymas ( 100 % , @endColor )); // Safari 4+, Chrome 2+
- background - image : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- background - image : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10
- fonas - vaizdas : linijinis - gradientas ( @startColor , @endColor ); // Standartas
- }
- . kryptinė ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . vertikalios – trijų spalvų ( @startColor : #00b3ee, @midColor : #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
- ...
- }
- }
Įsivaizduokite ir atlikite šiek tiek matematikos, kad sukurtumėte lanksčius ir galingus mišinius, tokius kaip toliau pateiktas.
- // Tinklelis
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Tinklelio sistema
- . konteineris {
- plotis : @siteWidth ;
- paraštė : 0 automatinis ;
- . clearfix ();
- }
- . stulpeliai ( @columnSpan : 1 ) {
- plotis : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
- . poslinkis ( @columnOffset : 1 ) {
- paraštė - kairė : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;
- }