Twitter Bootstrap

“Bootstrap”, web sahypalarynyň we sahypalarynyň ösüşini başlamak üçin döredilen Twitter-den gurallar toplumy.
Onda typografiýa, formalar, düwmeler, tablisalar, gözenekler, nawigasiýa we başgalar üçin esasy CSS we HTML bar.

Nerd duýduryşy: “Bootstrap” “Less” bilen gurlup , diňe döwrebap brauzerleri göz öňünde tutup derwezeden işlemek üçin döredildi.

CSS-ni gyzdyryň

Iň çalt we aňsat başlangyç üçin bu parçany web sahypaňyza göçüriň.

Has az ulanyň

Az ulanmagyň muşdagy? Mesele ýok, diňe repony klonlaň we şu setirleri goşuň:

GitHub-da çeňňek

Github-daky resmi Bootstrap repo bilen göçürip alyň, vilka, çekiň, faýl meselelerini we ş.m.

GitHub-da ýükleme »

Bellenen gözenek

“Bootstrap” -yň bir bölegi hökmünde berlen deslapky gözenek ulgamy, 9 sütünli 16 sütünli gözenekdir. Bu meşhur 960 gözenek ulgamynyň tagamy, ýöne çep we sag taraplarda goşmaça margin / padding ýok.

Mysal üçin gözenegiň belligi

Bu ýerde görkezilişi ýaly, iki sany "sütün" bilen esasy düzüliş döredilip bilner, olaryň her biri öz gözenek ulgamymyzyň bir bölegi hökmünde kesgitlän 16 sany sütünimiziň birnäçesini öz içine alýar. Has köp üýtgeşiklik üçin aşakdaky mysallara serediň.

  1. <div class = "row">
  2. <div class = "span6 süün" >
  3. ...
  4. </div>
  5. <div class = "span10 süün" >
  6. ...
  7. </div>
  8. </div>
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
3
3
3
3
3
1
4
4
4
4
4
6
6
8
8
5
11
16

Sütünleri öçürmek

4
8 ofset 4
4 ofset 4
4 ofset 4
5 ofset 3
5 ofset 3
10 ofset 6

Bellenen tertip

Diňe islendik sahypa ýa-da sahypa üçin 940px giň, merkezi konteýner ýerleşişi.

  1. <body>
  2. <div class = "konteýner" >
  3. ...
  4. </div>
  5. </body>

Suwuklyk tertibi

Çeýe suwuk ýa-da iň kiçi we iň giň giňlikli we çep tarapdaky çyzykly sahypa gurluşy. Programmalar üçin ajaýyp.

  1. <body>
  2. <div class = "konteýner-suwuklyk" >
  3. <div class = "gapdal paneli" >
  4. ...
  5. </div>
  6. <div class = "mazmun" >
  7. ...
  8. </div>
  9. </div>
  10. </body>

Sözbaşylar we göçürme

Web sahypalaryňyzy düzmek üçin adaty tipografiki iýerarhiýa.

h1. 1-nji sözbaşy

h2. 2-nji sözbaşy

h3. 3-nji sözbaşy

h4. 4-nji sözbaşy

h5. 5-nji sözbaşy
h6. 6-njy sözbaşy

Mysal abzasy

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur gülkünç mus. Nullam id dolor id nibh ultricies ulag serişdesi.

Mysal sözbaşysynyň kiçi sözbaşy bar ...

<strong>Şeýle hem, we kiçi sözbaşy goşup bilersiňiz<em>

Dürli. elementleri

Üns bermek, salgylar we gysgaltmalar ulanmak

<strong> <em> <address> <abbr>

Haçan ulanmaly

Söz ýa-da söz düzümi bilen onuň töweregindäki göçürmäniň arasynda wizual tapawut goşmak üçin ünsi bellikleri ( <strong>we <em>) ulanylmaly. <strong>Oldönekeý köne üns we ýuwaş üns we atlar <em>üçin ulanyň .

Abzasda ünsi çekmek

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, pharetra augue.

Salgylar

Element ulanylýar , addressmuny çak etdiňiz! - adresler. Görnüşi:

Twitter, Inc.
795 Folsom şaýoly, Suite 600
San-Fransisko, CA 94107
P: (123) 456-7890

Bellik: Mazmuny hakyky durmuşda hiç hili stil ulanylman okalýandygy üçin mazmuny dogry düzmek üçin addresshökmany setir (-) bilen gutarmaly .<br />

Gysgaltmalar

Gysgaltmalar we gysgaltmalar üçin abbrbelligi ulanyň ( HTML5acronym -de köne ). Stenografiýa görnüşini belligiň içine goýuň we doly adyň adyny belläň.

Bloknotlar

<blockquote> <p> <cite>

blockquoteDaş- töweregiňizi paragraphwe citebellikleriňizi örtüň . Çeşmä salgylanylanda citeelementi ulanyň. CSS awtomatiki usulda em dash (& mdash;) bilen bir söz açar.

“Lorem ipsum dolor” amet, “consectetur” adipisising elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ...

Dr. Julius Hibbert

Sanawlar

Tertibi<ul>

  • Jeremy Bixby
  • Robert Dezure
  • Joş Waşington
  • Anton Kapresi
  • Topar ýoldaşlarym
    • Jorj Castanza
    • Jerri Seinfeld
    • Cosmo Kramer
    • Elaine Bennis
    • Newman
  • Jon Jacobakup
  • Pol Pirs
  • Kewin Garnett

Düzedilmedik<ul.unstyled>

  • Jeremy Bixby
  • Robert Dezure
  • Joş Waşington
  • Anton Kapresi
  • Topar ýoldaşlarym
    • Jorj Castanza
    • Jerri Seinfeld
    • Cosmo Kramer
    • Elaine Bennis
    • Newman
  • Jon Jacobakup
  • Pol Pirs
  • Kewin Garnett

Sargyt edildi<ol>

  1. Jeremy Bixby
  2. Robert Dezure
  3. Joş Waşington
  4. Anton Kapresi
  5. Topar ýoldaşlarym
    1. Jorj Castanza
    2. Jerri Seinfeld
    3. Cosmo Kramer
    4. Elaine Bennis
    5. Newman
  6. Jon Jacobakup
  7. Pol Pirs
  8. Kewin Garnett

Düşündirişdl

Düşündiriş sanawlary
Düşündiriş sanawy adalgalary kesgitlemek üçin ajaýyp.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit metus-da mi porta gravida.
Malesuada porta
Etiam porta sem maleuada magna mollis euismod.

Gurluş stollary

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Stollar gaty gowy - köp zat üçin. Ajaýyp tablisalar peýdaly, göwrümli we okalýan (kod derejesinde) bolmagy üçin birneme bellik söýgüsine mätäç. Ine kömek etmek üçin birnäçe maslahat.

Sütün sözbaşylaryňyzy elmydama theadiýerarhiýa thead>> bilen trörtüň th.

Sütün sözbaşylaryna meňzeşlik bilen, stoluňyzyň ähli mazmuny tbodyiýerarhiýaňyz tbody>> trbolmaly td.

Mysal: Bellenen tablisanyň stilleri

Tableshli tablisalar okalmagyny üpjün etmek we gurluşy saklamak üçin diňe zerur serhetler bilen awtomatiki usulda düzüler. Goşmaça synplary ýa-da häsiýetleri goşmagyň zerurlygy ýok.

# Ady Familiýasy Dil
1 Käbirleri Biri Iňlis
2 Joe Alty gap Iňlis
3 Stu Diş Kod
  1. <table class = "umumy-tablisa"> class = "umumy tablisa" >
  2. ...
  3. </table>

Mysal: Zebra zolakly

Zebra zolaklaryny goşup, stollaryňyz bilen azajyk gyzyklanyň - .zebra-stripedsynpy goşuň.

# Ady Familiýasy Dil
1 Käbirleri Biri Iňlis
2 Joe Alty gap Iňlis
3 Stu Diş Kod
  1. <table class = "umumy stol zebra-zolakly"> class = "umumy stol zebra zolakly" >
  2. ...
  3. </table>

Mysal: Zebra zolakly w / TableSorter.js

Öňki mysaly alyp, jQuery we Tablesorter plugin arkaly tertipleşdirmek funksiýasyny üpjün edip, tablisalarymyzyň peýdalylygyny ýokarlandyrýarys . Görnüşini üýtgetmek üçin islendik sütüniň sözbaşysyna basyň.

# Ady Familiýasy Dil
1 Siziňki Biri Iňlis
2 Joe Alty gap Iňlis
3 Stu Diş Kod
  1. <script type = "text / javascript" src = "js / jquery / jquery.tablesorter.min.js"> </script> tip = "text / javascript" src = "js / jquery / jquery.tablesorter.min.js" > </script>
  2. <script type = "text / javascript" >
  3. $ ( resminama ) taýýar ( funksiýa () {
  4. $ ( "tablisa # sortTableExample" ). tablisaçy ( { sortList : [[ 1 , 0 ]]} );
  5. });
  6. </script>
  7. <table class = "umumy stol zebra-zolakly" >
  8. ...
  9. </table>

Bellenen stiller

Formshli görnüşlere okalýan we ulaldylan görnüşde hödürlemek üçin deslapky stil berilýär. Stiller tekst girişleri, sanawlary, tekstleri, radio düwmelerini we bellik gutularyny we düwmelerini saýlamak üçin berilýär.

Mysal görnüşi rowaýaty
Bu ýerde käbir gymmatlyklar
Kömek tekstiniň kiçi bölegi
Mysal görnüşi rowaýaty
@
Mysal görnüşi rowaýaty
Bellik: Etiketkalar has uly basmak ýerleri we has peýdaly görnüş üçin ähli wariantlary gurşap alýar.
to Timeshli wagtlar Pacificuwaş ummanyň standart wagty hökmünde görkezilýär (GMT -08: 00).
Zerur bolsa ýokardaky meýdany suratlandyrmak üçin kömek tekstini bloklaň.

Toplanan görnüşler

Formanyňyzyň HTML-sine goşuň .form-stacked, çep tarapyna däl-de, meýdanlarynyň üstünde ýazgylar bolar. Formalaryňyz gysga bolsa ýa-da has agyr görnüşler üçin iki sany sütün bar bolsa, bu gaty gowy işleýär.

Mysal görnüşi rowaýaty
Mysal görnüşi rowaýaty
Bellik: Etiketkalar has uly basmak ýerleri we has peýdaly görnüş üçin ähli wariantlary gurşap alýar.

Düwmeler

Konwensiýa hökmünde düwmeler hereketler üçin ulanylýar, baglanyşyklar obýektler üçin ulanylýar. Mysal üçin, "Downloadüklemek" düwme, "soňky işjeňlik" baglanyşyk bolup biler.

Buthli düwmeler açyk çal reňkde bolýar, ýöne gök .primarysynp bar. Mundan başga-da, öz stilleriňizi aýlamak aňsat.

Mysal düwmeleri

Düwmeleriň görnüşleri ulanylýan islendik zada .btnulanylyp bilner. aAdatça , bulary diňe ulanmak we elementleri buttonsaýlamak islärsiňiz . inputGörnüşi:

Alternatiw ululyklar

Uly ýa-da kiçi düwmeler barmy? Bol!

Maýyp ýagdaý

Işlemeýän ýa-da bir sebäp bilen programma tarapyndan ýapylmadyk düwmeler üçin, ýapyk ýagdaýy ulanyň. Bu .disabledbaglanyşyklar we elementler :disabledüçin .button

Salgylar

Düwmeler

Esasy duýduryşlar

Hereketiň şowsuzlygyny, bolup biläýjek şowsuzlygyny ýa-da üstünligini görkezmek üçin bir setirli habarlar. Esasanam formalar üçin peýdaly.

×

Aý, gysga! Muny we muny üýtgediň we gaýtadan synanyşyň.

×

Mukaddes gaukamole! Iň gowusy özüňizi barlaň, gaty gowy görünmeýärsiňiz.

×

Berekella! Bu duýduryş habaryny üstünlikli okadyňyz.

×

Başlar! Bu siziň ünsüňize mätäç duýduryş, ýöne entek gaty möhüm mesele däl.

Habarlary blokirläň

Biraz düşündiriş talap edýän habarlar üçin abzas stili duýduryşlary bar. Bular has uzyn säwlik habarlaryny köpeltmek, ulanyja garaşylýan hereket barada duýduryş bermek ýa-da sahypada has köp ünsi çekmek üçin maglumat hödürlemek üçin ajaýyp.

×

Aý, gysga! Erroralňyşlyk boldy!Muny we muny üýtgediň we gaýtadan synanyşyň. Duis mollis, täjir däl luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus amet fermentum oturýar.

Bu çäräni görüň Ora-da muny et

×

Mukaddes gaukamole! Bu duýduryş!Iň gowusy özüňizi barlaň, gaty gowy görünmeýärsiňiz. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur we ş.m.

Bu çäräni görüň Ora-da muny et

×

Berekella!Bu duýduryş habaryny üstünlikli okadyňyz. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur gülkünç mus. Maecenas faucibus mollis interdum.

Bu çäräni görüň Ora-da muny et

×

Başlar!Bu siziň ünsüňize mätäç duýduryş, ýöne entek gaty möhüm mesele däl.

Bu çäräni görüň Ora-da muny et

Modallar

Modallar - gepleşikler ýa-da çyralar, fon kontekstiniň saklanmagy möhüm bolan ýagdaýlarda kontekstdäki hereketler üçin ajaýyp.

Gural maslahatlary

Twipsies, bulaşyk ulanyja kömek etmek we dogry ugra gönükdirmek üçin gaty peýdaly.

Lorem ipsum dolar sit amet illo ýalňyşlyk “Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo”, “voluptas quia odit fugit accusantium totam totam” arhitektura ekspluatasiýasy “fugit fugit”, “totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo voluptas

aşakda!
dogry!
çep!
ýokarda!

Popovers

Sahypa düzülişine täsir etmezden, subtekstual maglumatlary bermek üçin açylanlary ulanyň.

Popover ady

Etiam porta sem maleuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, erosda westibulum.

“Bootstrap” , has çalt we aňsat web ösüşi üçin CSS deslapky prosessor “ Less ” bilen bilelikde ulanyljak açyk çeşmeli garyndylar we üýtgeýänler bolan “Preboot” bilen guruldy.

“Bootstrap” -da “Preboot” -y nädip ulanandygymyzy we indiki taslamaňyzda “Az” işlemegi saýlasaňyz, ony nädip ulanyp boljakdygyny barlaň.

Nädip ulanmaly

“Bootstrap” -yň az üýtgeýänlerini, garyndylaryny we brauzeriňizdäki javascript arkaly CSS-de höwürtgeleri doly ulanmak üçin bu opsiýany ulanyň.

  1. <link rel = "stylesheet / less" type = "text / css" href = "less / bootstrap.less" media = "hemmesi" /> rel = "stylesheet / less" type = "text / css" href = "less / bootstrap.less" media = "hemmesi" />
  2. <script type = "text / javascript" src = "js / less-1.0.41.min.js" > </script>

.Js çözgüdini duýmaýarsyňyzmy? Kodyňyzy ýerleşdireniňizde “Mac Mac” programmasyny synap görüň ýa-da “Node.js” -i ulanyň .

Näme girýär

“Bootstrap” -yň bir bölegi hökmünde “Twitter Bootstrap” -a girizilen zatlaryň esasy pursatlary. Has giňişleýin göçürip almak we öwrenmek üçin Bootstrap web sahypasyna ýa-da Github taslama sahypasyna giriň.

Reňk üýtgeýjileri

Az mukdarda üýtgeýjiler, CSS kelle agyryny mugt saklamak we täzelemek üçin ajaýyp. Reňk bahasyny ýa-da ýygy-ýygydan ulanylýan bahany üýtgetmek isleseňiz, ony bir ýerde täzeläň we düzüldi.

  1. // Salgylar
  2. @linkColor : # 8b59c2;
  3. @linkColorHover : garaňky ( @linkColor , 10 );
  4. // Çal reňk
  5. @black : # 000;
  6. @grayDark : ýeňilleşdir ( @black , 25 %);
  7. @gray : ýeňilleşdir ( @black , 50 %);
  8. @grayLight : ýeňilleşdiriň ( @black , 70 %);
  9. @grayLighter : ýeňilleşdiriň ( @black , 90 %);
  10. @ ak : #fff ;
  11. // Accent reňkleri
  12. @blue : # 08b5fb;
  13. @green : # 46a546;
  14. @red : # 9d261d;
  15. @yellow : # ffc40d;
  16. @orange : # f89406;
  17. @pink : # c3325f;
  18. @purple : # 7a43b6;
  19. // Esasy
  20. @baseline : 20px ;

Teswir ýazmak

/* ... */Az, CSS-iň adaty sintaksisine goşmaça teswir ýazmagyň başga bir görnüşini hödürleýär .

  1. // Bu teswir
  2. / * Bu hem teswir * /

Wazony garyşdyryň

Miksinler, esasan, CSS koduny öz içine alýar ýa-da bölekler bolup, kod koduny bir ýere jemlemäge mümkinçilik berýär. Satyjy prefiksirlenen häsiýetler box-shadow, brauzer gradiýentleri, şrift ýazgylary we başgalar üçin ajaýyp. Aşakda “Bootstrap” -a goşulan garyndylaryň nusgasy.

Şrift ýazgylary

  1. #font {
  2. . stenografiýa ( @ agram : adaty , @size : 14px , @lineHeight : 20px ) {
  3. şrift - ululygy : @size ;
  4. şrift - agram : @ agram ;
  5. setir - beýiklik : @lineHeight ;
  6. }
  7. . sans - serif ( @ agram : adaty , @size : 14px , @lineHeight : 20px ) {
  8. şrift - maşgala : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
  9. şrift - ululygy : @size ;
  10. şrift - agram : @ agram ;
  11. setir - beýiklik : @lineHeight ;
  12. }
  13. . serif ( @ agram : normal , @size : 14px , @lineHeight : 20px ) {
  14. şrift - maşgala : "Jorjiýa" , Times New Roman , Times , sans - serif ;
  15. şrift - ululygy : @size ;
  16. şrift - agram : @ agram ;
  17. setir - beýiklik : @lineHeight ;
  18. }
  19. . monospace ( @ agram : normal , @size : 12px , @lineHeight : 20px ) {
  20. şrift - maşgala : "Monako" , Courier New , monospace ;
  21. şrift - ululygy : @size ;
  22. şrift - agram : @ agram ;
  23. setir - beýiklik : @lineHeight ;
  24. }
  25. }

Gradiýentler

  1. # gradient {
  2. . keseligine ( @startColor : # 555, @endColor: # 333) {
  3. fon - reňk : @endColor ;
  4. fon - gaýtalamak : gaýtalamak - x ;
  5. fon - surat : - khtml - gradient ( çyzykly , çep ýokarky , sag ýokarky , ( @startColor ) -dan ( @endColor ) çenli ; // Konqueror
  6. fon - surat : - moz - çyzykly - gradient ( çep , @startColor , @endColor ); // FF 3.6+
  7. fon - surat : - ms - çyzykly - gradient ( çep , @startColor , @endColor ); // IE10
  8. fon - surat : - webkit - gradient ( çyzykly , çep ýokarky , sag ýokarky , reňk - stop ( 0 %, @startColor ), reňk - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+
  9. fon - surat : - webkit - çyzykly - gradient ( çep , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
  10. fon - surat : - o - çyzykly - gradient ( çep , @startColor , @endColor ); // Opera 11.10
  11. - ms - süzgüç : % ( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '% d', endColorstr = '% d', GradientType = 1)" , @startColor , @endColor ); // IE8 +
  12. süzgüç : e (% ( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '% d', endColorstr = '% d', GradientType = 1)" , @startColor , @endColor )); // IE6 & IE7
  13. fon - surat : çyzykly - gradient ( çep , @startColor , @endColor ); // Le standart
  14. }
  15. . dik ( @startColor : # 555, @endColor: # 333) {
  16. fon - reňk : @endColor ;
  17. fon - gaýtalamak : gaýtalamak - x ;
  18. fon - surat : - khtml - gradient ( çyzykly , çep ýokarky , çep aşaky , ( @startColor ) -dan ( @endColor ) çenli ; // Konqueror
  19. fon - surat : - moz - çyzykly - gradient ( @startColor , @endColor ); // FF 3.6+
  20. fon - surat : - ms - çyzykly - gradient ( @startColor , @endColor ); // IE10
  21. fon - surat : - webkit - gradient ( çyzykly , çep ýokarky , çep aşaky , reňk - stop ( 0 %, @startColor ), reňk - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+
  22. fon - surat : - webkit - çyzykly - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
  23. fon - surat : - o - çyzykly - gradient ( @startColor , @endColor ); // Opera 11.10
  24. - ms - süzgüç : % ( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '% d', endColorstr = '% d', GradientType = 0)" , @startColor , @endColor ); // IE8 +
  25. süzgüç : e (% ( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '% d', endColorstr = '% d', GradientType = 0)" , @startColor , @endColor )); // IE6 & IE7
  26. fon - surat : çyzykly - gradient ( @startColor , @endColor ); // Standart
  27. }
  28. . ugrukdyryjy ( @startColor : # 555, @endColor: # 333, @deg: 45deg) {
  29. ...
  30. }
  31. . dik - üç - reňk ( @start Reňk : # 00b3ee, @mid Reňk: # 7a43b6, @ ReňkStop: 0.5, @endColor: # c3325f) {
  32. ...
  33. }
  34. }

Amallar we gözenek ulgamy

Aşakdaky ýaly çeýe we güýçli garyndylary döretmek üçin hyýaly boluň we matematika ýerine ýetiriň.

  1. // Griditude
  2. @gridColumns : 16 ;
  3. @gridColumnWidth : 40px ;
  4. @gridGutterWidth : 20px ;
  5. // gözenek
  6. . konteýner {
  7. ini : @siteWidth ;
  8. margin : 0 awto ;
  9. . Clearfix ();
  10. }
  11. ü ü ü nler ( @ s ü t ü nSpan : 1 ) {
  12. g ö rkezmek : ser ;
  13. зmek : ç ep ; _
  14. ini : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
  15. margin - çep : @gridGutterWidth ;
  16. &: ç ç aga {
  17. margin ep : 0 ;
  18. }
  19. }
  20. . ofset ( @columnOffset : 1 ) {
  21. margin ep : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 ))! m ö h ü m ;
  22. }