一、前言
現在開始介紹bootstrap的 code(代碼) 和 grid(柵格)，包括 code.less、grid.less。
二、源碼
1、code.less
1.1、code.less源碼
//
// Code (inline and block) 代碼
// --------------------------------------------------
// Inline and block code styles
code,
kbd,
pre,
samp {
font-family: @font-family-monospace;
}
// Inline code 顯示單行內聯代碼
code {
padding: 2px 4px;
font-size: 90%;
color: @code-color;
background-color: @code-bg;
border-radius: @border-radius-base;
}
// User input typically entered via keyboard 顯示用戶輸入代碼
kbd {
padding: 2px 4px;
font-size: 90%;
color: @kbd-color;
background-color: @kbd-bg;
border-radius: @border-radius-small;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
kbd {
padding: 0;
font-size: 100%;
font-weight: bold;
box-shadow: none;
}
}
// Blocks of code 顯示多行塊代碼
pre {
display: block;
padding: ((@line-height-computed - 1) / 2);
margin: 0 0 (@line-height-computed / 2);
font-size: (@font-size-base - 1); // 14px to 13px
line-height: @line-height-base;
word-break: break-all;
word-wrap: break-word;
color: @pre-color;
background-color: @pre-bg;
border: 1px solid @pre-border-color;
border-radius: @border-radius-base;
// Account for some code outputs that place code tags in pre tags
code {
padding: 0;
font-size: inherit;
color: inherit;
white-space: pre-wrap;
background-color: transparent;
border-radius: 0;
}
}
// Enable scrollable blocks of code
.pre-scrollable {
max-height: @pre-scrollable-max-height;
overflow-y: scroll;
}1.2、code.less應用
<!--code&pre-->
<p><code><header></code> 作爲內聯元素被包圍。</p>
<p>如果需要把代碼顯示爲一個獨立的塊元素，請使用 <pre> 標籤：</p>
<pre>
<article>
<h1>Article Heading</h1>
</article>
</pre>
<!--kbd-->
<p>使用 kbd 元素表示按鍵輸入:</p>
<p>使用 <kbd>ctrl + p</kbd> 來打開打印窗口。</p>
<!--samp-->
<p>使用 samp 元素包含電腦輸出的內容:</p>
<p><samp>This text is output from a computer program....</samp></p>
<!--pre-scrollable-->
<div class="container">
<h2>代碼</h2>
<p>使用 pre 元素輸出多行:</p>
<pre>在 pre 元素中的文本
寬度的顯示與文本的寬度一樣，
保留了 空 格 和
換行。</pre>
<p>如果你添加 .pre-scrollable 類, pre 元素最大的高度 max-height 爲 350px ，並生成一個 Y 軸的滾動條:</p>
<pre class="pre-scrollable">在 pre 元素中的文本
寬度的顯示與文本的寬度一樣，
保留了 空 格 和
換行。</pre>
</div>2、grid.less
2.1、grid.less源碼
//
// Grid system(網格系統)
// --------------------------------------------------
// Container widths(容器寬度)
//
// Set the container width, and override it for fixed navbars in media queries.
.container {
.container-fixed();
@media (min-width: @screen-sm-min) {
width: @container-sm;
}
@media (min-width: @screen-md-min) {
width: @container-md;
}
@media (min-width: @screen-lg-min) {
width: @container-lg;
}
}
// Fluid container
//
// Utilizes the mixin meant for fixed width containers, but without any defined
// width for fluid, full width layouts.
.container-fluid {
.container-fixed();
}
// Row(行容器)
//
// Rows contain and clear the floats of your columns.
.row {
.make-row();
}
// Columns(網格列)
//
// Common styles for small and large grid columns
.make-grid-columns();
// Extra small grid(生成超小網格)
//
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.
.make-grid(xs);
// Small grid(生成小網格)
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
@media (min-width: @screen-sm-min) {
.make-grid(sm);
}
// Medium grid(生成中等網格)
//
// Columns, offsets, pushes, and pulls for the desktop device range.
@media (min-width: @screen-md-min) {
.make-grid(md);
}
// Large grid(生成大網格)
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
@media (min-width: @screen-lg-min) {
.make-grid(lg);
}2.2、grid.less應用
<div class="container">
<div class="row" >
<div class="col-xs-6 col-sm-3"
style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-xs-6 col-sm-3"
style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut.
</p>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3"
style="background-color: #dedef8;
box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-xs-6 col-sm-3"
style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim
</p>
</div>
</div>
</div>2.3、grid.less工作原理
1、行必須放置在 .container class 內，以便獲得適當的對齊（alignment）和內邊距（padding）。
2、使用行來創建列的水平組。
3、內容應該放置在列內，且唯有列可以是行的直接子元素。
4、預定義的網格類，比如 .row 和 .col-xs-4，可用於快速創建網格佈局。LESS 混合類可用於更多語義佈局。
5、列通過內邊距（padding）來創建列內容之間的間隙。該內邊距是通過 .rows 上的外邊距（margin）取負，表示第一列和最後一列的行偏移。
6、網格系統是通過指定您想要橫跨的十二個可用的列來創建的。例如，要創建三個相等的列，則使用三個 .col-xs-4。