bootstrap之bootstrap&type樣式

一、前言

現在開始介紹bootstrap的基礎和排版(type)樣式。

二、源碼

1、bootstrap.less

1.1、bootstrap.less源碼

 /*!
  * Bootstrap v3.3.7 (http://getbootstrap.com)
  * Copyright 2011-2016 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */

 // Core variables and mixins(全局變量和宏)
 @import "variables.less";
 @import "mixins.less";

 // Reset and dependencies(重置全局默認樣式)
 @import "normalize.less";
 // 設置打印樣式，使用媒體查詢(@media print)
 @import "print.less";
 // 引用字體圖標樣式
 @import "glyphicons.less";

 // Core CSS(核心CSS)
 // 設置全局基礎樣式
 @import "scaffolding.less";
 // 排版樣式
 @import "type.less";
 // 代碼
 @import "code.less";
 // 網格系統
 @import "grid.less";
 // 表格
 @import "tables.less";
 // 表單
 @import "forms.less";
 // 按鈕
 @import "buttons.less";

 // Components(組件)
 // 組件動畫
 @import "component-animations.less";
 // 下拉菜單
 @import "dropdowns.less";
 // 按鈕組
 @import "button-groups.less";
 @import "input-groups.less";
 // 導航
 @import "navs.less";
 // 導航條
 @import "navbar.less";
 // 麪包屑式導航
 @import "breadcrumbs.less";
 // 分頁導航
 @import "pagination.less";
 // 翻頁分頁導航
 @import "pager.less";
 // 標籤
 @import "labels.less";
 // 徽章
 @import "badges.less";
 @import "jumbotron.less";
 // 縮略圖
 @import "thumbnails.less";
 // 警示框
 @import "alerts.less";
 // 進度條
 @import "progress-bars.less";
 // 媒體對象
 @import "media.less";
 // 列表組
 @import "list-group.less";
 // 面板
 @import "panels.less";
 @import "responsive-embed.less";
 @import "wells.less";
 @import "close.less";

 // Components w/ JavaScript
 // 靜態彈出框
 @import "modals.less";
 // 提示框
 @import "tooltip.less";
 // 彈出框
 @import "popovers.less";
 // 圖片輪播
 @import "carousel.less";

 // Utility classes(工具樣式)
 @import "utilities.less";
 @import "responsive-utilities.less";

2、type.less

2.1、type.less源碼

 //
 // Typography(排版)
 // --------------------------------------------------


 // Headings(標題)
 // -------------------------

 // 常常會碰到在一個標題後面緊跟着一行小的副標題(small)
 h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6 {
   font-family: @headings-font-family;
   font-weight: @headings-font-weight;
   line-height: @headings-line-height;
   color: @headings-color;

   small,
   .small {
     font-weight: normal;
     line-height: 1;
     color: @headings-small-color;
   }
 }

 h1, .h1,
 h2, .h2,
 h3, .h3 {
   margin-top: @line-height-computed;
   margin-bottom: (@line-height-computed / 2);

   small,
   .small {
     font-size: 65%;
   }
 }
 h4, .h4,
 h5, .h5,
 h6, .h6 {
   margin-top: (@line-height-computed / 2);
   margin-bottom: (@line-height-computed / 2);

   small,
   .small {
     font-size: 75%;
   }
 }

 h1, .h1 { font-size: @font-size-h1; }
 h2, .h2 { font-size: @font-size-h2; }
 h3, .h3 { font-size: @font-size-h3; }
 h4, .h4 { font-size: @font-size-h4; }
 h5, .h5 { font-size: @font-size-h5; }
 h6, .h6 { font-size: @font-size-h6; }


 // Body text(正文文本)
 // -------------------------

 p {
   margin: 0 0 (@line-height-computed / 2);
 }

 // 處理一個段落的文字，讓其顯示效果顯著，強調內容
 .lead {
   margin-bottom: @line-height-computed;
   font-size: floor((@font-size-base * 1.15));
   font-weight: 300;
   line-height: 1.4;

   //大中型瀏覽器字體稍大
   @media (min-width: @screen-sm-min) {
     font-size: (@font-size-base * 1.5);
   }
 }


 // Emphasis & misc 強調突出
 // -------------------------

 // Ex: (12px small font / 14px base font) * 100% = about 85%
 small,
 .small {
   font-size: floor((100% * @font-size-small / @font-size-base));
 }

 mark,
 .mark {
   background-color: @state-warning-bg;
   padding: .2em;
 }

 // Alignment(對齊)
 .text-left           { text-align: left; }
 .text-right          { text-align: right; }
 .text-center         { text-align: center; }
 // 適用於長文本排版，不過目前兩端對齊在各瀏覽器下解析各有不同，特別是應用於中文文本的時候，所以項目中慎用
 .text-justify        { text-align: justify; }
 .text-nowrap         { white-space: nowrap; }

 // Transformation(文本大小寫轉換)
 .text-lowercase      { text-transform: lowercase; }
 .text-uppercase      { text-transform: uppercase; }
 .text-capitalize     { text-transform: capitalize; }

 // Contextual colors(文本顏色)
 .text-muted {  //提示
   color: @text-muted;
 }
 .text-primary {  //主要
   .text-emphasis-variant(@brand-primary);
 }
 .text-success { //成功
   .text-emphasis-variant(@state-success-text);
 }
 .text-info { //通知信息
   .text-emphasis-variant(@state-info-text);
 }
 .text-warning { //警告
   .text-emphasis-variant(@state-warning-text);
 }
 .text-danger {  //危險
   .text-emphasis-variant(@state-danger-text);
 }

 // Contextual backgrounds(文本背景)
 // For now(目前，暫時) we'll leave these alongside the text classes until v4 when we can
 // safely shift things around (per SemVer rules).
 .bg-primary {
   // Given the contrast(對比) here, this is the only class to have its color inverted
   // automatically.
   color: #fff;
   .bg-variant(@brand-primary);
 }
 .bg-success {
   .bg-variant(@state-success-bg);
 }
 .bg-info {
   .bg-variant(@state-info-bg);
 }
 .bg-warning {
   .bg-variant(@state-warning-bg);
 }
 .bg-danger {
   .bg-variant(@state-danger-bg);
 }


 // Page header(頁面標題)
 // -------------------------

 .page-header {
   padding-bottom: ((@line-height-computed / 2) - 1);
   margin: (@line-height-computed * 2) 0 @line-height-computed;
   border-bottom: 1px solid @page-header-border-color;
 }


 // Lists(列表)
 // -------------------------

 // Unordered and Ordered lists
 ul,
 ol {
   margin-top: 0;
   margin-bottom: (@line-height-computed / 2);
   ul,
   ol {
     margin-bottom: 0;
   }
 }

 // List options

 // Unstyled keeps list items block level, just removes default browser padding and list-style(去點列表)
 .list-unstyled {
   padding-left: 0;
   list-style: none;
 }

 // Inline turns list items into inline-block() (內聯列表，爲製作水平導航而生)
 .list-inline {
   .list-unstyled();
   margin-left: -5px;

   > li {
     display: inline-block;
     padding-left: 5px;
     padding-right: 5px;
   }
 }

 // Description Lists (定義列表)
 dl {
   margin-top: 0; // Remove browser default
   margin-bottom: @line-height-computed;
 }
 dt,
 dd {
   line-height: @line-height-base;
 }
 dt {
   font-weight: bold;
 }
 dd {
   margin-left: 0; // Undo browser default
 }

 // Horizontal description lists (水平定義列表)
 //
 // Defaults to being stacked without any of the below styles applied, until the
 // grid breakpoint is reached (default of ~768px).

 .dl-horizontal {
   dd {
     &:extend(.clearfix all); // Clear the floated `dt` if an empty `dd` is present
   }

   @media (min-width: @dl-horizontal-breakpoint) {
     dt {
       float: left;
       width: (@dl-horizontal-offset - 20);
       clear: left;
       text-align: right;
       .text-overflow();
     }
     dd {
       margin-left: @dl-horizontal-offset;
     }
   }
 }


 // Misc
 // -------------------------

 // Abbreviations and acronyms(縮略詞)
 abbr[title],
 // Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
 abbr[data-original-title] {
   cursor: help;
   border-bottom: 1px dotted @abbr-border-color;
 }
 // 詞首字母縮略詞
 .initialism {
   font-size: 90%;
   .text-uppercase();
 }

 // Blockquotes(引用)
 blockquote {
   padding: (@line-height-computed / 2) @line-height-computed;
   margin: 0 0 @line-height-computed;
   font-size: @blockquote-font-size;
   border-left: 5px solid @blockquote-border-color;

   p,
   ul,
   ol {
     &:last-child {
       margin-bottom: 0;
     }
   }

   // Note: Deprecated small and .small as of v3.1.0
   // Context: https://github.com/twbs/bootstrap/issues/11660
   footer,
   small,
   .small {
     display: block;
     font-size: 80%; // back to default font-size
     line-height: @line-height-base;
     color: @blockquote-small-color;

     &:before {
       content: '\2014 \00A0'; // em dash, nbsp
     }
   }
 }

 // Opposite alignment of blockquote
 //
 // Heads up: `blockquote.pull-right` has been deprecated as of v3.1.0.
 .blockquote-reverse,
 blockquote.pull-right {
   padding-right: 15px;
   padding-left: 0;
   border-right: 5px solid @blockquote-border-color;
   border-left: 0;
   text-align: right;

   // Account for citation
   footer,
   small,
   .small {
     &:before { content: ''; }
     &:after {
       content: '\00A0 \2014'; // nbsp, em dash
     }
   }
 }

 // Addresses
 address {
   margin-bottom: @line-height-computed;
   font-style: normal;
   line-height: @line-height-base;
 }

2.2、type.less應用

 <!--標題&內聯子標題-->
 <h1>我是標題1 h1. <small>我是副標題1 h1</small></h1>
 <h2>我是標題2 h2. <small>我是副標題2 h2</small></h2>
 <h3>我是標題3 h3. <small>我是副標題3 h3</small></h3>
 <h4>我是標題4 h4. <small>我是副標題4 h4</small></h4>
 <h5>我是標題5 h5. <small>我是副標題5 h5</small></h5>
 <h6>我是標題6 h6. <small>我是副標題6 h6</small></h6>
 <!--引導主體副本-->
 <h2>引導主體副本</h2>
 <p class="lead">這是一個演示引導主體副本用法的實例。這是一個演示引導主體副本用法的實例。。</p>
 <!--強調-->
 <small>本行內容是在標籤內</small><br>
 <strong>本行內容是在標籤內</strong><br>
 <em>本行內容是在標籤內，並呈現爲斜體</em><br>
 <p class="text-left">向左對齊文本</p>
 <p class="text-center">居中對齊文本</p>
 <p class="text-right">向右對齊文本</p>
 <!--文本顏色，同文本背景-->
 <p class="text-muted bg-success">本行內容是減弱的</p>
 <p class="text-primary">本行內容帶有一個 primary class</p>
 <p class="text-success">本行內容帶有一個 success class</p>
 <p class="text-info">本行內容帶有一個 info class</p>
 <p class="text-warning">本行內容帶有一個 warning class</p>
 <p class="text-danger">本行內容帶有一個 danger class</p>
 <!--縮寫-->
 <abbr title="World Wide Web">WWW</abbr><br>
 <abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
 <!--地址-->
 <address>
   <strong>Some Company, Inc.</strong><br>
   007 street<br>
   Some City, State XXXXX<br>
   <abbr title="Phone">P:</abbr> [phone]
 </address>
 <address>
   <strong>Full Name</strong><br>
   <a href="mailto:#">[email protected]</a>
 </address>
 <!--引用-->
 <blockquote>
   <p>
     這是一個默認的引用實例。這是一個默認的引用實例。這是一個默認的引用實例。這是一個默認的引用實例。
   </p>
 </blockquote>
 <blockquote>
   這是一個帶有源標題的引用。
   <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
 </blockquote>
 <blockquote class="pull-right">
   這是一個向右對齊的引用。
   <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
 </blockquote>
 <!--列表-->
 <h4>有序列表</h4>
 <ol>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
 </ol>
 <h4>無序列表</h4>
 <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
 </ul>
 <h4>未定義樣式列表</h4>
 <ul class="list-unstyled">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
 </ul>
 <h4>內聯列表</h4>
 <ul class="list-inline">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
 </ul>
 <h4>定義列表</h4>
 <dl>
   <dt>Description 1</dt>
   <dd>Item 1</dd>
   <dt>Description 2</dt>
   <dd>Item 2</dd>
 </dl>
 <h4>水平的定義列表</h4>
 <dl class="dl-horizontal">
   <dt>Description 1</dt>
   <dd>Item 1</dd>
   <dt>Description 2</dt>
   <dd>Item 2</dd>
 </dl>