Andamio nga

Ti bootstrap ket naibangon iti makasungbat a 12-kolum a grid. Inramanmi met dagiti fixed- ken fluid-width a layout a naibatay iti dayta a sistema.

Kasapulan ti HTML5 a doctype

Ti Bootstrap ket agus-usar kadagiti elemento ti HTML ken dagiti tagikua ti CSS a kasapulan ti panagusar ti doctype ti HTML5. Siguraduen nga iraman daytoy iti rugi ti tunggal panid ti Bootstrapped iti proyektom.

<!DOKTIPO TI html>
<html lang = "ilo" > 
  ...
</html>

Tipograpia ken dagiti silpo

Iti uneg ti scaffolding.less a papeles, mangikeddengkami kadagiti batayan a sangalubongan a panagiparang, tipograpia, ken dagiti estilo ti silpo. Espesipiko, datayo:

Ikkaten ti margin iti bagi
Itakderan background-color: white;tibody
Usaren ti @baseFontFamily, @baseFontSize, ken @baseLineHeightdagiti attribute a kas ti tipograpiko a batayantayo
Itakderan ti sangalubongan a kolor ti silpo babaen @linkColorken iyaplikar ti link underlines laeng iti:hover

I-reset babaen ti Normalize

Manipud idi Bootstrap 2, ti tradisional a panagisubli ti CSS ket nagbalbaliw tapno agusar kadagiti elemento manipud iti Normalize.css , ti maysa a proyekto babaen ni Nicolas Gallagher a mangpabileg pay ti HTML5 Boilerplate .

Ti baro a panag-reset ket mabalin pay laeng a masarakan iti reset.less , ngem addaan kadagiti adu nga elemento a naikkat para iti kinaababa ken kinaumiso.

1 nga

8 nga

12 nga

Ti kasisigud a sistema ti grid a naited a kas paset ti Bootstrap ket ti 940px-a kalawa, 12-kolum a grid .

Daytoy ket addaan pay kadagiti uppat a makasungbat a panagduduma para kadagiti nadumaduma nga alikamen ken resolusion: telepono, ladawan ti tablet, landscape ti tablet ken dagiti babassit a desktop, ken dagiti dadakkel a widescreen a desktop.

<div klase = "hilera" > 
  <div klase = "span4" > ... </div> 
  <div klase = "span8" > ... </div> 
</div>

Kas naipakita ditoy, ti batayan a layout ket mabalin a mapartuat babaen ti dua a "kolum", tunggal maysa ket mangsaklaw ti bilang dagiti 12 a pundasional nga adigi nga inkeddengmi a kas paset ti sistema ti gridmi.

Panang-offset kadagiti kolum

4 nga offset 4

3 nga offset 3

8 nga offset 4

<div klase = "hilera" > 
  <div klase = "span4" > ... </div> 
  <div klase = "span4 nga offset4" > ... </div> 
</div>

Dagiti adigi ti panagumok

Iti estatiko (saan a pluido) a sistema ti grid iti Bootstrap, nalaka ti panagumok. Tapno mai-nest ti linaonmo, mangnayon laeng iti baro .rowken set dagiti .span*kolum iti uneg ti addan a .span*kolum.

Pagwadan

Dagiti naisanglad a hilera ket rumbeng a mangiraman ti maysa a grupo dagiti adigi a mangnayon aginggana ti bilang dagiti adigi ti nagannakna. Kas pagarigan, dua a naisanglad a .span3kolum ti rumbeng a maikabil iti uneg ti maysa a .span6.

Level 1 ti kolum

Lebel 2

<div klase = "hilera" > 
  < klase ti div = "span12" > 
    Level 1 ti kolum
    <div klase = "hilera" > 
      <div klase = "span6" > Antas 2 </div> 
      <div klase = "span6" > Antas 2 </div> 
    </div>
  </div>
</div>

Pluido nga adigi

1 nga

8 nga

12 nga

Porsiento, saan a pixel

Ti sistema ti grid ti pluido ket agus-usar kadagiti porsiento para kadagiti kalawa ti adigi imbes a dagiti naikeddeng a pixel. Daytoy ket addaan pay kadagiti isu met laeng a makasungbat a panagduduma a kas ti sistemami a naikeddeng a grid, a mangipasigurado kadagiti umno a proporsion para kadagiti resolusion ti tulbek nga iskrin ken dagiti alikamen.

Dagiti hilera ti pluido

Aramiden ti aniaman a linia a pluido babaen laeng ti panagbalbaliw .rowiti .row-fluid. Agtalinaed nga eksakto nga agpapada dagiti adigi, a mamagbalin a super diretso ti ag-flip iti nagbaetan dagiti naipasdek ken pluido a layout.

Panagmarka

<div klase = "hilera-a-pluido" > 
  <div klase = "span4" > ... </div> 
  <div klase = "span8" > ... </div> 
</div>

Panag-umok ti pluido

Ti panagumok kadagiti pluido a grid ket naiduma bassit: ti bilang dagiti naisanglad a kolum ket saan a kasapulan a maipada iti nagannak. Imbes ketdi, dagiti kolummo ket mai-reset iti tunggal maysa a lebel gapu ta tunggal maysa a hilera ket mangala ti 100% ti nagannak a kolum.

Pluido nga 12

Pluido nga 6

<div klase = "hilera-a-pluido" > 
  < klase ti div = "span12" > 
    Level 1 ti kolum
    <div klase = "hilera-a-pluido" > 
      <div klase = "span6" > Antas 2 </div> 
      <div klase = "span6" > Antas 2 </div> 
    </div>
  </div>
</div>

Variable nga	Default nga pateg	Panangiladawan
`@gridColumns`	12 nga	Bilang dagiti kolum
`@gridColumnWidth`	60px nga	Kalawa ti tunggal adigi
`@gridGutterWidth`	20px nga	Negatibo nga espasio iti nagbaetan dagiti adigi

Dagiti variable iti LESS

Naibangon iti Bootstrap ket dagiti sumagmamano a variable para iti panagpasayaat ti default a 940px a sistema ti grid, a nadokumento iti ngato. Amin a variable para iti grid ket naidulin kadagiti variable.less.

Kasano ti ag-customize

Modifying the grid means changing the three @grid* variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the four ways documented to recompile. If you're adding more columns, be sure to add the CSS for those in grid.less.

Staying responsive

Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.

Fixed layout

The default and simple 940px-wide, centered layout for just about any website or page provided by a single <div class="container">.

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

Fluid layout

<div class="container-fluid"> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>

Dagiti makasungbat nga alikamen

What they do

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
Smartphones	480px and below	Fluid columns, no fixed widths
Smartphones to tablets	767px and below	Fluid columns, no fixed widths
Portrait tablets	768px and above	42px	20px
Default	980px and up	60px	20px
Large display	1200px and up	70px	30px

Requires meta tag

To ensure devices display responsive pages properly, include the viewport meta tag.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Using the media queries

Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:

Use the compiled responsive version, bootstrap-responsive.css
Add @import "responsive.less" and recompile Bootstrap
Modify and recompile responsive.less as a separate file

Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.

  // Landscape phones and down
  @media (max-width: 480px) { ... }
 
  // Landscape phone to portrait tablet
  @media (max-width: 767px) { ... }
 
  // Portrait tablet to landscape and desktop
  @media (min-width: 768px) and (max-width: 979px) { ... }
 
  // Large desktop
  @media (min-width: 1200px) { ... }

Responsive utility classes

What are they

For faster mobile-friendly development, use these basic utility classes for showing and hiding content by device.

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.

For example, you might show a <select> element for nav on mobile layouts, but not on tablets or desktops.

Support classes

Shown here is a table of the classes we support and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

Class	Phones 480px and below	Tablets 767px and below	Desktops 768px and above
`.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

Test case

Resize your browser or load on different devices to test the above classes.

Visible on...

Green checkmarks indicate that class is visible in your current viewport.

Phone✔ Telepono nga
Tablet✔ Tableta nga
Desktop✔ Desktop

Nailemmeng iti...

Ditoy, dagiti berde a marka ti tsek ket mangipakita a ti klase ket nailemmeng iti agdama a viewport-mo.

Telepono✔ Telepono nga
Tableta nga✔ Tableta nga
Desktop nga✔ Desktop nga