Shembuj të fillimit të shpejtë

Keni nevojë për disa shabllone të shpejtë? Shikoni këta shembuj bazë që kemi bashkuar:

Rrjeti i parazgjedhur

Sistemi i parazgjedhur i rrjetit i ofruar si pjesë e Bootstrap është një rrjet me 16 kolona me gjerësi 940 px. Është një shije e sistemit popullor të rrjetit 960, por pa diferencë/mbushje shtesë në anën e majtë dhe të djathtë.

Shembull i shënjimit të rrjetit

Siç tregohet këtu, një plan urbanistik bazë mund të krijohet me dy "kolona", secila që përfshin një numër prej 16 kolonave themelore që përcaktuam si pjesë e sistemit tonë të rrjetit. Shihni shembujt më poshtë për më shumë variacione.

<div class = "rresht" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

Kolonat e folesë

Vendosni përmbajtjen tuaj nëse duhet, duke krijuar një .rowbrenda një kolone ekzistuese.

Shembull i kolonave të mbivendosur

<div class = "rresht" > 
  <div class = "span12" > 
    Niveli 1 i kolonës
    <div class = "rresht" > 
      <div class = "span6" > 
        Niveli 2
      </div>
      <div class = "span6" > 
        Niveli 2
      </div>
    </div>
  </div>
</div>

Rrotulloni rrjetën tuaj

Të integruara në Bootstrap janë një pjesë e vogël e variablave për personalizimin e sistemit të paracaktuar të rrjetit 940px. Me pak përshtatje, ju mund të modifikoni madhësinë e kolonave, ulluqet e tyre dhe kontejnerin ku ata banojnë.

Brenda rrjetës

Variablat e nevojshëm për të modifikuar sistemin e rrjetit aktualisht janë të gjitha në preboot.less.

Tani për të personalizuar

Modifikimi i rrjetit nënkupton ndryshimin e tre @grid-*variablave dhe rikompilimin e skedarëve Less.

Bootstrap vjen i pajisur për të trajtuar një sistem rrjeti me deri në 24 kolona; parazgjedhja është vetëm 16. Ja se si variablat e rrjetit tuaj do të duken të personalizuara në një rrjet me 24 kolona.

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;   

Pasi të ripërpiloni, do të jeni të vendosur!

Paraqitje fikse

Struktura e paracaktuar dhe e thjeshtë me gjerësi 940 px, e përqendruar për pothuajse çdo faqe interneti ose faqe të ofruar nga një e vetme <div.container>.

<trupi>
  <div class = "enë" > 
    ...
  </div>
</body>

Paraqitja e lëngshme

Një strukturë fleksibël fleksibël dhe alternative e faqeve me gjerësi minimale dhe maksimale dhe një shirit anësor në të majtë. E shkëlqyeshme për aplikacione dhe dokumente.

<trupi>
  <div class = "kontenier-lëng" > 
    <div class = "bar anësor" > 
      ...
    </div>
    <div class = "përmbajtje" > 
      ...
    </div>
  </div>
</body>

Titujt dhe kopjoni

Një hierarki tipografike standarde për strukturimin e faqeve tuaja të internetit.

I gjithë rrjeti tipografik bazohet në dy variabla Less në skedarin tonë preboot.less: @basefontdhe @baseline. E para është madhësia e fontit bazë të përdorur në të gjithë dhe e dyta është lartësia e linjës bazë.

Ne i përdorim ato variabla, dhe disa matematikë, për të krijuar kufijtë, mbushjet dhe lartësitë e rreshtave të të gjitha llojeve tona dhe më shumë.

h1. Kreu 1

h2. Kreu 2

h3. Kreu 3

h4. Kreu 4

h5. Kreu 5

h6. Kreu 6

Shembull paragraf

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Shembulli i titullit Ka nëntitull…

Të ndryshme. elementet

Përdorimi i theksit, adresave dhe shkurtesave

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

Kur të përdoret

Etiketat e theksit ( <strong>dhe <em>) duhet të përdoren për të treguar rëndësinë ose theksimin shtesë të një fjale ose fraze në lidhje me kopjen përreth. Përdorni <strong>për rëndësi dhe <em>për theksim të stresit .

Theksimi në një paragraf

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, një pharetra augue.

Shënim: Është ende në rregull të përdoren <b>dhe <i>etiketat në HTML5 dhe ato nuk duhet të jenë përkatësisht të stilizuara të theksuara dhe të pjerrëta (edhe pse nëse ka një element më semantik, përdorni atë). <b>ka për qëllim të nxjerrë në pah fjalë ose fraza pa përcjellë rëndësi shtesë, ndërsa <i>është kryesisht për zërin, termat teknike, etj.

Adresat

Elementi <address>përdoret për informacionin e kontaktit për paraardhësin e tij më të afërt, ose të gjithë trupin e punës. Këtu janë dy shembuj se si mund të përdoret:

Shënim: Çdo rresht në një <address>duhet të përfundojë me një ndërprerje rreshti ( <br />) ose të mbështillet në një etiketë të nivelit të bllokut (p.sh., <p>) për të strukturuar siç duhet përmbajtjen.

Shkurtesat

Për shkurtesat dhe akronimet, përdorni <abbr>etiketën ( <acronym>është e vjetëruar në HTML5 ). Vendosni formularin e stenografisë brenda etiketës dhe vendosni një titull për emrin e plotë.

Blloqe kuotash

<blockquote> <p> <small>

Si të citojmë

Për të përfshirë një kuotë bllokimi , mbështilleni <blockquote>dhe etiketoni. Përdorni elementin për të cituar burimin tuaj dhe do të merrni një vizë em përpara tij.<p><small><small>&mdash;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Numri i plotë posuere erat a ante venenatis dapibus posuere velit aliquet.

Dr. Julius Hibbert

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Numri i plotë posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> Dr. Julius Hibbert </small>
</blockquote>

E pa porositur<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Lehtësimi në pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Enean sit amet erat nunc
• Eget porttitor lorem

E pa stiluar<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Lehtësimi në pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Enean sit amet erat nunc
• Eget porttitor lorem

porositur<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Lehtësimi në pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Enean sit amet erat nunc
8. Eget porttitor lorem

Përshkrimdl

Listat e përshkrimeve

Një listë përshkrimi është e përkryer për përcaktimin e termave.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Kodi

<code> <pre>

Pimponi kodin tuaj në stil me dy etiketa të thjeshta. Për më shumë mahnitje përmes javascript, hidhni bibliotekën e bukurisë së kodit të Google dhe jeni gati.

Prezantimi i kodit

Kodi, blloqet e ose thjesht copa në linjë, mund të shfaqen me stil vetëm duke e mbështjellë në etiketën e duhur. Për blloqet e kodit që përfshijnë shumë rreshta, përdorni <pre>elementin. Për kodin inline, përdorni <code>elementin.

<div>
  <h1>Titulli</h1>
  <p>Diçka këtu...</p>
</div>

<div> <h1> Titulli </h1> <p> Diçka këtu... </p> </div>
  
  

Etiketat inline

<span class="label">

Tërhiqni vëmendjen ose shënoni ndonjë frazë në tekstin e trupit tuaj.

Etiketoni çdo gjë

Keni nevojë ndonjëherë për një nga ato të rejat e bukura ! apo Flamuj të rëndësishëm kur shkruani kodin? Epo, tani i keni ato. Ja çfarë përfshihet si parazgjedhje:

Rrjeti mediatik

Shfaqni miniaturë të madhësive të ndryshme në faqe me një gjurmë të ulët HTML dhe stile minimale.

Shembuj të miniaturës

Miniaturat në .media-gridmund të jenë të çdo madhësie, por ato funksionojnë më mirë kur hartohen drejtpërdrejt në sistemin e integruar të rrjetit Bootstrap. Gjerësia e imazhit si 90, 210 dhe 330 kombinohen me disa pikselë mbushje për të barazuar madhësinë .span2, .span4, dhe .span6kolonën.

I madh

E mesme

I vogël

Kodimi i tyre

Rrjetat e mediave janë të lehta për t'u përdorur dhe mjaft të thjeshta në anën e shënjimit. Dimensionet e tyre bazohen thjesht në madhësinë e imazheve të përfshira.

<ul class = "media-grid" > 
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

Ndërtimi i tavolinave

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

Tabelat janë të shkëlqyera - për shumë gjëra. Tabelat e shkëlqyera, megjithatë, kanë nevojë për pak dashuri për shënjimin për të qenë të dobishme, të shkallëzueshme dhe të lexueshme (në nivelin e kodit). Këtu janë disa këshilla për të ndihmuar.

Gjithmonë mbështillni kokat tuaja të kolonës në një mënyrë të <thead>tillë që hierarkia të jetë <thead>> <tr>> <th>.

Ngjashëm me titujt e kolonave, e gjithë përmbajtja e trupit të tabelës suaj duhet të mbështillet në një <tbody>mënyrë që hierarkia juaj të jetë <tbody>> <tr>> <td>.

Shembull: Stilet e parazgjedhura të tabelës

Të gjitha tabelat do të stilohen automatikisht vetëm me kufijtë thelbësorë për të siguruar lexueshmëri dhe për të ruajtur strukturën. Nuk ka nevojë të shtoni klasa ose atribute shtesë.

<tabela>
  ...
</tabela>

Shembull: Me vija zebra

Bëhuni pak elegant me tavolinat tuaja duke shtuar vija zebra—thjesht shtoni .zebra-stripedklasën.

Shënim: Zebra-striping është një përmirësim progresiv që nuk disponohet për shfletuesit më të vjetër si IE8 dhe më poshtë.

<table class = "zebra-striped" > 
...
</tabela>

Shembull: Zebra-striped w/ TableSorter.js

Duke marrë shembullin e mëparshëm, ne përmirësojmë dobinë e tabelave tona duke ofruar funksionalitet renditjeje nëpërmjet jQuery dhe shtojcës Tablesorter . Klikoni në kokën e çdo kolone për të ndryshuar renditjen.

<script src = "js/jquery/jquery.tablesorter.min.js" </script> 
<skript > 
  $ ( funksioni () { 
    $ ( "table# sortTableExample" ). klasifikues tavoline ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "zebra-striped" > 
  ...
</tabela>

Stilet e parazgjedhura

Të gjitha formave u jepen stile të paracaktuara për t'i paraqitur ato në një mënyrë të lexueshme dhe të shkallëzueshme. Stilet ofrohen për futjen e tekstit, listat e përzgjedhjes, zonat e tekstit, butonat e radios dhe kutitë e kontrollit dhe butonat.

Forma të grumbulluara

Shtoni .form-stackednë HTML të formularit tuaj dhe do të keni etiketa në krye të fushave të tyre në vend që të jenë në të majtë. Kjo funksionon shkëlqyeshëm nëse format tuaja janë të shkurtra ose keni dy kolona hyrjesh për forma më të rënda.

Formoni madhësitë e fushave

Personalizojeni çdo formë input, select, ose textareagjerësi duke shtuar vetëm disa klasa në shënimin tuaj.

Që nga v1.3.0, ne kemi shtuar klasat e përmasave të bazuara në rrjet për elementët e formës. Ju lutemi përdorni këto mbi klasat ekzistuese .mini, .small, etj.

Butonat

Si konventë, butonat përdoren për veprime ndërsa lidhjet përdoren për objektet. Për shembull, "Shkarko" mund të jetë një buton dhe "aktiviteti i fundit" mund të jetë një lidhje.

Të gjithë butonat janë të paracaktuar në një stil gri të çelur, por një numër klasash funksionale mund të aplikohen për stile të ndryshme ngjyrash. Këto klasa përfshijnë një .primaryklasë blu, një klasë blu të lehta .info, një klasë jeshile .successdhe një klasë të kuqe .danger.

Shembull butona

Stilet e butonave mund të aplikohen për çdo gjë me atë të .btnaplikuar. Zakonisht do të dëshironi t'i zbatoni këto vetëm në elemente <a>, <button>dhe zgjidhni . <input>Ja si duket:

Madhësitë alternative

Dëshironi butona më të mëdhenj apo më të vegjël? Kanë në atë!

Gjendja me aftësi të kufizuara

Për butonat që nuk janë aktivë ose janë çaktivizuar nga aplikacioni për një arsye ose një tjetër, përdorni gjendjen e çaktivizuar. Kjo është .disabledpër lidhjet dhe :disabledpër <button>elementët.

Lidhjet

Butonat

Çfarë është ajo

Shiriti ynë i sipërm është një shirit fiks që përmban logon ose emrin e një faqe interneti, navigimin kryesor dhe formularin e kërkimit.

I personalizueshëm

Të gjithë elementët brenda, si dhe i gjithë shiriti i sipërm, janë opsionalë. Ju mund të zgjidhni të përfshini një logo/emër, navigim, kërkim dhe një navigim dytësor—ose ndonjë kombinim të tyre.

Të përfshira dropdown

Si pjesë e navigimit kryesor, ne kemi përfshirë mundësinë që ju të shtoni skedarë me zbritje në navigimin tuaj. Shikoni navigimin dytësor më sipër (drejtuar djathtas) për të parë se si është bërë. Etiketat Dropdowns ligjithashtu mbështesin .activeshfaqjen e zgjedhjes aktuale të faqes.

Skedat dhe pilula

Krijoni navigim të thjeshtë dytësor me një <ul>. Ndërroni midis skedave ose pilulave duke shtuar klasën e duhur.

E shkëlqyeshme për nën-seksione të përmbajtjes si faqet e cilësimeve të llogarisë sonë dhe afatet kohore të përdoruesve për ndërrimin ndërmjet faqeve me përmbajtje të ngjashme. E disponueshme në stile me skeda ose pilula.

• Shtëpi
• Profili
• Mesazhet
• Cilësimet
• Kontaktoni
• Dropdown
  • Lidhje dytësore
  • Diçka tjetër këtu
  • Një lidhje tjetër

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Faqja kryesore </a></li>  
  <li><a href = "#" > Profili </a></li> 
  <li><a href = "#" > Mesazhet </a></li> 
  <li><a href = "#" > Cilësimet </a></li> 
  <li><a href = "#" > Kontaktoni </a></li> 
</ul>

• Shtëpi
• Profili
• Mesazhet
• Cilësimet
• Kontaktoni

<ul class = "pilula" > 
  <li class = "active" ><a href = "#" > Faqja kryesore </a></li>  
  <li><a href = "#" > Profili </a></li> 
  <li><a href = "#" > Mesazhet </a></li> 
  <li><a href = "#" > Cilësimet </a></li> 
  <li><a href = "#" > Kontaktoni </a></li> 
</ul>

Therrime buke

Navigimi Breadcrumb përdoret si një mënyrë për t'u treguar përdoruesve se ku janë brenda një aplikacioni ose një sajti, por jo për navigimin parësor.

• Shtëpi

• Faqja kryesore /
• Faqja e mesme

• Faqja kryesore /
• Faqja e mesme /
• Nje tjeter

• Faqja kryesore /
• Faqja e mesme /
• nje tjeter /
• Ti je ketu

<ul class = "thërrim buke" > 
  <li><a href = "#" > Faqja kryesore </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Faqja e mesme </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Një tjetër </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Ju jeni këtu </li> 
</ul>

Faqezim

Faqezim ultra të thjeshtuar dhe me stil minimal të frymëzuar nga Rdio. Blloku i madh është i vështirë për t'u humbur, lehtësisht i shkallëzueshëm dhe ofron zona të mëdha klikimesh.

<div class = "faqezim" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← E mëparshme </a></li>  
    <li class = "aktiv" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 ​​</a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li class = "next" ><a href = "#" > Tjetra → </a></li>  
  </ul>
</div>

Sinjalizimet bazë

.alert-message

Mesazhe me një linjë për të theksuar dështimin, dështimin e mundshëm ose suksesin e një veprimi. Veçanërisht i dobishëm për format.

Merr javascript »

Shembull kod

<div class = "paralajmërim me mesazh alarmi" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Guacamole e shenjtë! </strong> Kontrolloni më mirë veten, nuk po dukeni shumë mirë. </p>
</div>

Blloko mesazhet

.alert-message.block-message

Për mesazhet që kërkojnë pak shpjegim, ne kemi sinjalizime për stilin e paragrafit. Këto janë perfekte për të krijuar mesazhe më të gjata gabimi, për të paralajmëruar një përdorues për një veprim në pritje ose thjesht për të paraqitur informacione për më shumë theksim në faqe.

Merr javascript »

Shembull kod

<div class = "paralajmërim bllokimi i mesazheve alarmuese" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Guacamole e shenjtë! Ky është një paralajmërim! </strong> Kontrolloni më mirë veten, nuk po dukeni shumë mirë. Nulla vitae elit libero, një pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "veprimet e alarmit" > 
    <a class = "btn small" href = "#" > Bëje këtë veprim </a> <a class = "btn small" href = "#" > Ose bëje këtë </a>     
  </div>
</div>

Modalet

Modalet - dialogët ose kutitë e lehta - janë të shkëlqyera për veprimet kontekstuale në situata ku është e rëndësishme që të ruhet konteksti i sfondit.

Merr javascript »

Këshilla për veglat

Twipsies janë shumë të dobishme për të ndihmuar një përdorues të hutuar dhe për t'i drejtuar ata në drejtimin e duhur.

Merr javascript »

Popovers

Përdorni popovers për të ofruar informacion nëntekstual në një faqe pa ndikuar në paraqitjen.

Merr javascript »

Duke filluar

Integrimi i javascript me bibliotekën Bootstrap është shumë i lehtë. Më poshtë do të shqyrtojmë bazat dhe ju ofrojmë disa shtojca të mrekullueshme për t'ju filluar!

Shiko dokumentet javascript »

Çfarë përfshihet

Jepni në jetë disa nga komponentët kryesorë të Bootstrap me shtojca të reja të personalizuara që funksionojnë jQuery dhe Ender . Ne ju inkurajojmë t'i zgjeroni dhe modifikoni ato për t'iu përshtatur nevojave tuaja specifike të zhvillimit.

A është e nevojshme javascript?

Jo! Bootstrap është projektuar para së gjithash për të qenë një bibliotekë CSS. Ky javascript ofron një shtresë bazë ndërvepruese në krye të stileve të përfshira.

Megjithatë, për ata që kanë nevojë për javascript, ne kemi ofruar shtojcat e mësipërme për t'ju ndihmuar të kuptoni se si të integroni Bootstrap me javascript dhe për t'ju dhënë menjëherë një opsion të shpejtë dhe të lehtë për funksionalitetin bazë.

Për më shumë informacion dhe për të parë disa demonstrime të drejtpërdrejta, ju lutemi referojuni faqes sonë të dokumentacionit të shtojcave .