bootstrap之scaffolding&tables样式

一、前言

现在开始介绍bootstrap的 scaffolding(脚手架) 和 tables(表格)，包括 scaffolding.less、tables.less。

二、源码

1、scaffolding.less

1.1、scaffolding.less源码

 //
 // Scaffolding(脚手架)
 // --------------------------------------------------


 // Reset the box-sizing(content-box:标准盒模型；border-box:IE低版本/怪异模式)
 //
 // Heads up! This reset may cause conflicts with some third-party widgets.
 // For recommendations on resolving such conflicts, see
 // http://getbootstrap.com/getting-started/#third-box-sizing
 * {
   .box-sizing(border-box);
 }
 *:before,
 *:after {
   .box-sizing(border-box);
 }


 // Body reset

 html {
   font-size: 10px;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
 }

 body {
   font-family: @font-family-base;
   font-size: @font-size-base;
   line-height: @line-height-base;
   color: @text-color;
   background-color: @body-bg;
 }

 // Reset fonts for relevant elements
 input,
 button,
 select,
 textarea {
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
 }


 // Links

 a {
   color: @link-color;
   text-decoration: none;

   &:hover,
   &:focus {
     color: @link-hover-color;
     text-decoration: @link-hover-decoration;
   }

   &:focus {
     .tab-focus();
   }
 }


 // Figures
 //
 // We reset this here because previously Normalize had no `figure` margins. This
 // ensures we don't break anyone's use of the element.

 figure {
   margin: 0;
 }


 // Images(图像)

 img {
   vertical-align: middle;
 }

 // Responsive images (ensure images don't scale beyond their parents，响应式图片展示防止图片拉伸超出父元素)
 .img-responsive {
   .img-responsive();
 }

 // Rounded corners(圆角)
 .img-rounded {
   border-radius: @border-radius-large;
 }

 // Image thumbnails(缩略图)
 //
 // Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`.
 .img-thumbnail{
   padding: @thumbnail-padding;
   line-height: @line-height-base;
   background-color: @thumbnail-bg;
   border: 1px solid @thumbnail-border;
   border-radius: @thumbnail-border-radius;
   .transition(all .2s ease-in-out);

   // Keep them at most 100% wide
   .img-responsive(inline-block);
 }

 // Perfect circle(圆图片，设置border-radius为50%)
 .img-circle