Bootstrap е изграден на респонзивни мрежи, распореди и компоненти со 12 колони.
Bootstrap користи одредени HTML елементи и CSS својства кои бараат употреба на HTML5 doctype. Вклучете го на почетокот на сите ваши проекти.
- <!DOCTYPE html>
- <html lang = "en" >
- ...
- </html>
Bootstrap поставува основни глобални стилови на приказ, типографија и врски. Поточно, ние:
margin
на телотоbackground-color: white;
наbody
@baseFontFamily
, @baseFontSize
и @baseLineHeight
како наша типографска основа@linkColor
и применувајте ги само подвлекувањата на врската:hover
Овие стилови може да се најдат во рамките на дрвени скелиња.помалку .
Со Bootstrap 2, стариот блок за ресетирање е отфрлен во корист на Normalize.css , проект на Николас Галагер и Џонатан Нил кој исто така го напојува HTML5 Boilerplate . Иако користиме голем дел од Normalize во рамките на нашиот reset.less , отстранивме некои елементи специјално за Bootstrap.
Стандардниот систем за решетка на Bootstrap користи 12 колони , со што се создава контејнер со ширина од 940 пиксели без овозможени функции кои реагираат. Со додадена одговорна CSS-датотека, мрежата се прилагодува да биде 724 пиксели и 1170 пиксели во ширина во зависност од вашиот поглед. Под приказите од 767 пиксели, колоните стануваат течни и се натрупуваат вертикално.
За едноставен распоред на две колони, креирајте a .row
и додадете соодветен број на .span*
колони. Бидејќи ова е мрежа со 12 колони, секоја .span*
опфаќа број од тие 12 колони и секогаш треба да собира до 12 за секој ред (или бројот на колони во родителот).
- <div class = „ред“ >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
Со оглед на овој пример, имаме .span4
и .span8
, со што се добиваат вкупно 12 колони и комплетен ред.
Поместете ги колоните надесно користејќи .offset*
класи. Секоја класа ја зголемува левата маргина на колона за цела колона. На пример, .offset4
се движи .span4
преку четири колони.
- <div class = „ред“ >
- <div class = "span4" > ... </div>
- <div class = "span3 offset2" > ... </div>
- </div>
За да ја вгнездите вашата содржина со стандардната мрежа, додадете нова .row
и множество .span*
колони во постоечка .span*
колона. Вгнездените редови треба да вклучуваат збир на колони што се собираат на бројот на колони на неговиот родител.
- <div class = „ред“ >
- <div class = "span9" >
- Колона на ниво 1
- <div class = „ред“ >
- <div class = "span6" > Ниво 2 </div>
- <div class = "span3" > Ниво 2 </div>
- </div>
- </div>
- </div>
Системот на флуидна мрежа користи проценти наместо пиксели за ширината на колоните. Ги има истите способности за одговор како нашиот систем за фиксна мрежа, обезбедувајќи соодветни пропорции за клучните резолуции на екранот и уредите.
Направете кој било ред „течен“ со промена .row
на .row-fluid
. Класите на колони остануваат сосема исти, што го олеснува превртувањето помеѓу фиксните и течните мрежи.
- <div class = „ред-флуид“ >
- <div class="span4">...</div>
- <div class="span8">...</div>
- </div>
Operates the same way as the fixed grid system offsetting: add .offset*
to any column to offset by that many columns.
- <div class="row-fluid">
- <div class="span4">...</div>
- <div class="span4 offset2">...</div>
- </div>
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.
- <div class="row-fluid">
- <div class="span12">
- Fluid 12
- <div class="row-fluid">
- <div class="span6">
- Fluid 6
- <div class="row-fluid">
- <div class="span6">Fluid 6</div>
- <div class="span6">Fluid 6</div>
- </div>
- </div>
- <div class="span6">Fluid 6</div>
- </div>
- </div>
- </div>
Provides a common fixed-width (and optionally responsive) layout with only <div class="container">
required.
- <body>
- <div class="container">
- ...
- </div>
- </body>
Create a fluid, two-column page with <div class="container-fluid">
—great for applications and docs.
- <div class="container-fluid">
- <div class="row-fluid">
- <div class="span2">
- <!--Sidebar content-->
- </div>
- <div class="span10">
- <!--Body content-->
- </div>
- </div>
- </div>
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.
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
.
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.
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) { ... }
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 |
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.
Променете ја големината на вашиот прелистувач или вчитајте на различни уреди за да ги тестирате горенаведените класи.
Зелените ознаки за проверка покажуваат дека класата е видлива во вашата тековна порта за гледање.
Овде, зелените ознаки за проверка покажуваат дека класата е скриена во вашата моментална порта за гледање.