Bootstrap

Skeffolding

Bootstrap li ser torên 12-stûnî yên bersivdar, sêwiran, û hêmanan hatî çêkirin.

Mîhengên gerdûnî

Doctype HTML5 hewce dike

Bootstrap hin hêmanên HTML-ê û taybetmendiyên CSS-ê yên ku karanîna doctype HTML5 hewce dike bikar tîne. Di destpêka hemî projeyên xwe de wê têxin nav xwe.

  1. <!DOCTYPE html>
  2. <html lang = "ku" > 
  3.   ...
  4. </html>

Tîpografi û girêdan

Bootstrap pêşandana gerdûnî ya bingehîn, tîpografî, û şêwazên girêdanê destnîşan dike. Bi taybetî em:

  • Li marginser bedenê derxistin
  • Set background-color: white;li serbody
  • @baseFontFamily, @baseFontSize, û @baseLineHeighttaybetmendiyan wekî bingeha meya tîpografî bikar bînin
  • Rengê girêdana gerdûnî bi rê ve @linkColorbicîh bikin û binê zencîreyan tenê li ser bicîh bikin:hover

Ev şêwaz dikarin di nav îskeleyan de werin dîtin.kêm .

Vegere bi rêya Normalîzekirinê

Bi Bootstrap 2-ê re, bloka nûvekirinê ya kevin di berjewendiya Normalize.css de hate avêtin , projeyek ji hêla Nicolas Gallagher û Jonathan Neal ve ku di heman demê de HTML5 Boilerplate jî hêzdar dike . Dema ku em pir ji Normalîzekirinê di nav reset.less xwe de bikar tînin , me hin hêman bi taybetî ji bo Bootstrap rakirin.

Sîstema torê ya standard

Mînaka tora zindî

Pergala torê ya xwerû ya Bootstrap 12 stûnan bikar tîne , ku konteynirek fireh a 940 px bêyî çalakkirina taybetmendiyên bersivdar çêdike . Li gel pelê CSS-a bersivdar ku lê hatî zêdekirin, tora li gorî dîtina we 724px û 1170px fireh dibe. Li jêr dîmenderên 767 px, stûn herikbar dibin û ber bi vertîkalê ve disekinin.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

HTML tora bingehîn

Ji bo sêwirana du stûnên hêsan, a biafirînin .rowû jimareya guncan a .span*stûnan lê zêde bikin. Ji ber ku ev tevnek 12-stûnî ye, her .span*yek hejmarek ji wan 12 stûnan digire, û divê her gav ji bo her rêzek (an jî hejmara stûnên di dêûbavê de) 12 zêde bike.

  1. <div class = "rêz" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Bi vê nimûneyê re, me heye .span4û .span8, ji bo 12 stûnên tevahî û rêzek bêkêmasî çêbikin.

Stûnên jihevdexistin

Bi karanîna dersan stûnan ber bi rastê ve .offset*bigerînin. Her çîn marjîna çepê ya stûnekê bi tevahî stûnek zêde dike. Mînakî, .offset4li .span4ser çar stûnan digere.

4
3 veqetandin 2
3 veqetandin 1
3 veqetandin 2
6 veqetandin 3 
  1. <div class = "rêz" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

Stûnên nesting

Ji bo ku hûn naveroka xwe bi tora xwerû re nehêlin, di nav stûnek heyî de stûnek nû .rowû komeke zêde bikin . Rêzên hêlînkirî divê komek stûnên ku li ser hejmara stûnên dêûbavê wê zêde dibin tê de bin..span*.span*

Asta 1 stûn
Asta 2
Asta 2 
  1. <div class = "rêz" > 
  2.   <div class = "span9" > 
  3.     Asta 1 stûn
  4.     <div class = "rêz" > 
  5.       <div class = "span6" > Asta 2 </div> 
  6.       <div class = "span3" > Asta 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Sîstema torê ya Fluid

Mînaka tora şilavê ya zindî

Pergala tora şilavê ji bo firehiyên stûnê li şûna pixelan ji sedî bikar tîne. Ew xwedî heman kapasîteyên bersivdayinê ye ku pergala meya torê ya sabît e, ji bo çareseriyên ekran û cîhazên sereke rêjeyên rast peyda dike.

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

HTML-a tora şilavê ya bingehîn

Bi guherandina .rowli .row-fluid. Dersên stûnê tam eynî dimînin, guheztina di navbera torên sabît û şikilî de hêsan dike.

  1. <div class = "row-fluid" > 
  2.   <div class="span4">...</div>
  3.   <div class="span8">...</div>
  4. </div>

Fluid offsetting

Operates the same way as the fixed grid system offsetting: add .offset* to any column to offset by that many columns.

4
4 offset 4
3 offset 3
3 offset 3
6 offset 6 
  1. <div class="row-fluid">
  2.   <div class="span4">...</div>
  3.   <div class="span4 offset2">...</div>
  4. </div>

Fluid nesting

Fluid grids utilize nesting differently: each nested level of columns should add up to 12 columns. This is because the fluid grid uses percentages, not pixels, for setting widths.

Fluid 12
Fluid 6
Fluid 6
Fluid 6
Fluid 6 
  1. <div class="row-fluid">
  2.   <div class="span12">
  3.     Fluid 12
  4.     <div class="row-fluid">
  5.       <div class="span6">
  6.         Fluid 6
  7.         <div class="row-fluid">
  8.           <div class="span6">Fluid 6</div>
  9.           <div class="span6">Fluid 6</div>
  10.         </div>
  11.       </div>
  12.       <div class="span6">Fluid 6</div>
  13.     </div>
  14.   </div>
  15. </div>

Layouts

Fixed layout

Provides a common fixed-width (and optionally responsive) layout with only <div class="container"> required.

  1. <body>
  2.   <div class="container">
  3.     ...
  4.   </div>
  5. </body>

Fluid layout

Create a fluid, two-column page with <div class="container-fluid">—great for applications and docs.

  1. <div class="container-fluid">
  2.   <div class="row-fluid">
  3.     <div class="span2">
  4.       <!--Sidebar content-->
  5.     </div>
  6.     <div class="span10">
  7.       <!--Body content-->
  8.     </div>
  9.   </div>
  10. </div>

Responsive design

Enabling responsive features

Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within the <head> of your document. If you've compiled Bootstrap from the Customize page, you need only include the meta tag.

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  2. <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Heads up! Bootstrap doesn't include responsive features by default at this time as not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it as needed.

About responsive Bootstrap

Amûrên bersivdar

Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.

  • Modify the width of column in our grid
  • Stack elements instead of float wherever necessary
  • Resize headings and text to be more appropriate for devices

Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.

Supported devices

Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:

Label Layout width Column width Gutter width
Large display 1200px and up 70px 30px
Default 980px and up 60px 20px
Portrait tablets 768px and above 42px 20px
Phones to tablets 767px and below Fluid columns, no fixed widths
Phones 480px and below Fluid columns, no fixed widths 
  1. /* Large desktop */
  2. @media (min-width: 1200px) { ... }
  3.  
  4. /* Portrait tablet to landscape and desktop */
  5. @media (min-width: 768px) and (max-width: 979px) { ... }
  6.  
  7. /* Landscape phone to portrait tablet */
  8. @media (max-width: 767px) { ... }
  9.  
  10. /* Landscape phones and down */
  11. @media (max-width: 480px) { ... }

Responsive utility classes

For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

Class Phones 767px and below Tablets 979px to 768px Desktops Default
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible

When to use

Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.

Responsive utilities test case

Geroka xwe mezin bikin an li ser cîhazên cihêreng bar bikin da ku dersên jorîn ceribandin.

Li ser xuya dibe ...

Nîşaneyên kesk destnîşan dikin ku çîn di dîmendera weya heyî de xuya ye.

  • Telefon✔ Telefon
  • Heb✔ Tablet
  • Desktop✔ Sermaseya

Veşartî li ser ...

Li vir, nîşaneyên kesk destnîşan dikin ku çîn di dîmendera weya heyî de veşartî ye.

  • Telefon✔ Telefon
  • Heb✔ Tablet
  • Desktop✔ Sermaseya