Bootstrap nga

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.

Dagiti sangalubongan nga estilo para iti panag-reset ti CSS, tipograpia, ken dagiti silpo

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.

  1. <!DOKTIPO TI html>
  2. <html lang = "ilo" > 
  3.   ...
  4. </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.

Default grid system 12 nga adigi nga addaan iti responsive twist

1 nga
1 nga
1 nga
1 nga
1 nga
1 nga
1 nga
1 nga
1 nga
1 nga
1 nga
1 nga
4.
4.
4.
4.
8 nga
6.
6.
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.

  1. <div klase = "hilera" > 
  2.   <div klase = "span4" > ... </div> 
  3.   <div klase = "span8" > ... </div> 
  4. </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.
4 nga offset 4
3 nga offset 3
3 nga offset 3
8 nga offset 4 
  1. <div klase = "hilera" > 
  2.   <div klase = "span4" > ... </div> 
  3.   <div klase = "span4 nga offset4" > ... </div> 
  4. </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
Lebel 2 
  1. <div klase = "hilera" > 
  2.   < klase ti div = "span12" > 
  3.     Level 1 ti kolum
  4.     <div klase = "hilera" > 
  5.       <div klase = "span6" > Antas 2 </div> 
  6.       <div klase = "span6" > Antas 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Sistema ti grid ti pluido 12 a makasungbat, porsiento-based a kolum

Pluido nga adigi

1 nga
1 nga
1 nga
1 nga
1 nga
1 nga
1 nga
1 nga
1 nga
1 nga
1 nga
1 nga
4.
4.
4.
4.
8 nga
6.
6.
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

  1. <div klase = "hilera-a-pluido" > 
  2.   <div klase = "span4" > ... </div> 
  3.   <div klase = "span8" > ... </div> 
  4. </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
Pluido nga 6 
  1. <div klase = "hilera-a-pluido" > 
  2.   < klase ti div = "span12" > 
  3.     Level 1 ti kolum
  4.     <div klase = "hilera-a-pluido" > 
  5.       <div klase = "span6" > Antas 2 </div> 
  6.       <div klase = "span6" > Antas 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Panagpasayaat ti grid

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.

Layouts Basic templates to create webpages

Fixed layout

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

  1. <body>
  2.   <div class="container">
  3.     ...
  4.   </div>
  5. </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.

  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 Media queries for various devices and resolutions

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.

  1. <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:

  1. Use the compiled responsive version, bootstrap-responsive.css
  2. Add @import "responsive.less" and recompile Bootstrap
  3. 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.

  1.   // Landscape phones and down
  2.   @media (max-width: 480px) { ... }
  3.  
  4.   // Landscape phone to portrait tablet
  5.   @media (max-width: 767px) { ... }
  6.  
  7.   // Portrait tablet to landscape and desktop
  8.   @media (min-width: 768px) and (max-width: 979px) { ... }
  9.  
  10.   // Large desktop
  11.   @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
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible

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