Scafolding · Bootstrap mu Rwanda

Irasaba inyandiko ya HTML5

Bootstrap ikoresha ibintu bimwe na bimwe bya HTML hamwe na CSS isaba gukoresha inyandiko ya HTML5. Shyiramo intangiriro yimishinga yawe yose.

<! DOCTYPE html>
<html lang = "en" > 
  ...
</html>

Imyandikire hamwe

Bootstrap ishyiraho ibanze kwisi yose, imyandikire, hamwe nuburyo bwo guhuza. By'umwihariko, twe:

Kuramo marginumubiri
Shyira background-color: white;kuribody
Koresha i @baseFontFamily,, @baseFontSizena @baseLineHeightIbiranga nkimyandikire yacu
Shiraho ibara ryisi yose unyuze @linkColorkandi ushyire kumurongo uhuza gusa:hover

Ubu buryo bushobora kuboneka muri scafolding.less .

Ongera usubire muri Normalize

Hamwe na Bootstrap 2, guhagarika gusubiramo bishaje byavanyweho kugirango Normalize.css , umushinga wa Nicolas Gallagher na Jonathan Neal nawo uha ingufu Boilerplate ya HTML5 . Mugihe dukoresha byinshi Mubisanzwe muri reset.less , twakuyeho ibintu bimwe na bimwe kuri Bootstrap.

Urugero rwa gride

Ubusanzwe Bootstrap grid sisitemu ikoresha inkingi 12 , ikora kubintu 940px yagutse idafite ibintu byitabiriwe byashobotse. Hamwe na dosiye ya CSS yitabiriwe yongeyeho, gride ihuza kuba 724px na 1170px mugari ukurikije uko ubona. Munsi ya 767px yo kureba, inkingi zihinduka amazi kandi zigahagarara neza.

Urubuga rwibanze HTML

Kuburyo bworoshye bubiri inkingi, kora a .rowhanyuma wongere umubare ukwiye .span*winkingi. Nkuko iyi ari 12-inkingi ya gride, buriwese .span*uzenguruka umubare wizo nkingi 12, kandi ugomba guhora wongeyeho 12 kuri buri murongo (cyangwa umubare winkingi mubabyeyi).

<div class = "umurongo" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Urebye uru rugero, dufite .span4kandi .span8, dukora inkingi 12 zose hamwe numurongo wuzuye.

Kureka inkingi

Himura inkingi iburyo ukoresheje .offset*amasomo. Buri cyiciro cyongera ibumoso bwinkingi yinkingi yose. Kurugero, .offset4yimuka .span4hejuru yinkingi enye.

3 offset 2

3 offset 1

3 offset 2

6 offset 3

<div class = "umurongo" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

Inkingi

Kugirango ushire ibikubiyemo hamwe na gride isanzwe, ongeramo ibishya .rowkandi ushireho .span*inkingi muburyo buriho .span*. Imirongo yatoranijwe igomba gushiramo urutonde rwinkingi ziyongera kumubare winkingi zababyeyi.

Urwego 1

Urwego 2

<div class = "umurongo" > 
  <div class = "span9" > 
    Urwego 1
    <div class = "umurongo" > 
      <div class = "span6" > Urwego 2 </div> 
      <div class = "span3" > Urwego 2 </div> 
    </div>
  </div>
</div>

Urugero rwamazi ya gride urugero

Sisitemu ya grid sisitemu ikoresha ijanisha aho kuba pigiseli kubugari bwinkingi. Ifite ubushobozi bumwe bwo gusubiza nka sisitemu ya gride ya sisitemu ihamye, yemeza ibipimo bikwiye bya ecran ya ecran n'ibikoresho.

Urubuga rwibanze rwamazi HTML

Kora umurongo uwo ariwo wose "fluid" uhindura .rowkuri .row-fluid. Inkingi ibyiciro bigumaho kimwe, byoroshye guhinduranya hagati ya gride itunganijwe kandi itemba.

<div class = "umurongo-utemba" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Kuzimya amazi

Ikora kimwe na grid sisitemu ihamye yo guhagarika: ongeraho .offset*inkingi iyo ari yo yose kugirango uhagarike nizo nkingi nyinshi.

4 offset 4

3 offset 3

6 offset 6

<div class = "umurongo-utemba" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

Icyari cyamazi

Imiyoboro ya fluide ikoresha ibyari bitandukanye: buri cyiciro cyateganijwe cyinkingi kigomba kongerwaho inkingi 12. Ibi ni ukubera ko gride ya fluid ikoresha ijanisha, ntabwo ari pigiseli, mugushiraho ubugari.

Amazi 12

Amazi 6

<div class = "umurongo-utemba" > 
  <div class = "span12" > 
    Amazi 12
    <div class = "umurongo-utemba" > 
      <div class = "span6" > 
        Amazi 6
        <div class = "umurongo-utemba" > 
          <div class = "span6" > Amazi 6 </div> 
          <div class = "span6" > Amazi 6 </div> 
        </div>
      </div>
      <div class = "span6" > Amazi 6 </div> 
    </div>
  </div>
</div>

Imiterere ihamye

Itanga imiterere-yubugari rusange (kandi birashoboka ko isubiza) imiterere <div class="container">ikenewe gusa.

<body>
  <div class = "kontineri" > 
    ...
  </div>
</body>

Imiterere y'amazi

Kora amazi, urupapuro rwinkingi ebyiri hamwe <div class="container-fluid">-gukoresha porogaramu na doc.

<div class = "kontineri-fluid" > 
  <div class = "umurongo-utemba" > 
    <div class = "span2" > 
      <! - Ibirimo kuruhande ->
    </div>
    <div class = "span10" > 
      <! - Ibiri mu mubiri ->
    </div>
  </div>
</div>

Gushoboza ibintu bisubiza

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.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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

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

/* Large desktop */
@media (min-width: 1200px) { ... }
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
 
/* Landscape phones and down */
@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	Hidden	Hidden
`.visible-tablet`	Hidden	Visible	Hidden
`.visible-desktop`	Hidden	Hidden	Visible
`.hidden-phone`	Hidden	Visible	Visible
`.hidden-tablet`	Visible	Hidden	Visible
`.hidden-desktop`	Visible	Visible	Hidden

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

Hindura amashusho yawe cyangwa umutwaro kubikoresho bitandukanye kugirango ugerageze ibyiciro byavuzwe haruguru.

Biboneka ku ...

Icyatsi kibisi cyerekana ko icyiciro kigaragara muburyo bwawe bwo kureba.

TerefoneOne Terefone
TabletTablet
IbiroIbiro

Hihishe ku ...

Hano, icyatsi kibisi cyerekana ko urwego rwihishe muburyo bwawe bwo kureba.

TerefoneOne Terefone
TabletTablet
IbiroIbiro

Gukubita

Igenamiterere ryisi yose