* ajust code format.

getting-started.html

@@ -92,6 +92,7 @@ base_url: "./"
 <h3>2.3 设计准则</h3>
 <ul>
 <li>尽量减少界面中线条的出现，避免造成界面显得复杂。应该尽可能考虑使用背景及留白来区分内容的不同部分。</li>
+<li>为实现响应式设计，应全部采用流式布局，针对控件及元素的尺寸应尽可能采用百分比来约束，除非必要不要使用像素作为长度单位。</li>
 </ul>
 <h3>2.4 开发约定</h3>
 <ul>

src/less/basic/scaffolding.less

@@ -2,16 +2,18 @@
 // Scaffolding
 // ==================================================
 
-*, *:before, *:after { .box-sizing(border-box); }
+*, *:before, *:after{ .box-sizing(border-box); }
 
 // Body reset
 
-html {
+html
+{
   font-size: 62.5%;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
 }
 
-body {
+body
+{
   font-family: @font-family-base;
   font-size: @font-size-base;
   line-height: @line-height-base;
@@ -23,7 +25,8 @@ body {
 input,
 button,
 select,
-textarea {
+textarea
+{
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
@@ -32,17 +35,20 @@ textarea {
 
 // Links
 
-a {
+a
+{
   color: @link-color;
   text-decoration: none;
 
   &:hover,
-  &:focus {
+  &:focus
+  {
     color: @link-hover-color;
     text-decoration: underline;
   }
 
-  &:focus {
+  &:focus
+  {
     .tab-focus();
   }
 }
@@ -55,7 +61,8 @@ audio,
 canvas,
 img,
 svg,
-video {
+video
+{
   vertical-align: middle;
   max-width: 100%;
 }
@@ -63,7 +70,8 @@ video {
 // Only display content to screen readers
 //
 // See: http://a11yproject.com/posts/how-to-hide-content/
-.sr-only {
+.sr-only
+{
   position: absolute;
   width: 1px;
   height: 1px;
@@ -78,17 +86,20 @@ video {
 // Remove text-shadow in selection highlight: h5bp.com/i
 // These selection rule sets have to be separate.
 // Customize the background color to match your design.
-::-moz-selection {
+::-moz-selection
+{
   background: #b3d4fc;
   text-shadow: none;
 }
-::selection {
+::selection
+{
   background: #b3d4fc;
   text-shadow: none;
 }
 
 // Remove default fieldset styles.
-fieldset {
+fieldset
+{
   border: 0;
   margin: 0;
   padding: 0;
@@ -96,6 +107,7 @@ fieldset {
 
 
 // Allow only vertical resizing of textareas.
-textarea {
+textarea
+{
   resize: vertical;
 }

src/less/controls/buttons.less

@@ -7,7 +7,8 @@
 // --------------------------------------------------
 
 // Button sizes
-.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
+.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius)
+{
   padding: @padding-vertical @padding-horizontal;
   font-size: @font-size;
   line-height: @line-height;
@@ -19,7 +20,8 @@
 // --------------------------------------------------
 
 // Core styles
-.btn {
+.btn
+{
   display: inline-block;
   margin-bottom: 0; // For input.btn
   font-weight: @btn-font-weight;
@@ -32,18 +34,21 @@
   .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base);
   .user-select(none);
 
-  &:focus {
+  &:focus
+  {
     .tab-focus();
   }
 
   &:hover,
-  &:focus {
+  &:focus
+  {
     color: @btn-default-color;
     text-decoration: none;
   }
 
   &:active,
-  &.active {
+  &.active
+  {
     outline: 0;
     background-image: none;
     .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
@@ -51,7 +56,8 @@
 
   &.disabled,
   &[disabled],
-  fieldset[disabled] & {
+  fieldset[disabled] &
+  {
     cursor: not-allowed;
     pointer-events: none; // Future-proof disabling of clicks
     .opacity(.65);
@@ -64,26 +70,32 @@
 // Alternate buttons
 // --------------------------------------------------
 
-.btn-default {
+.btn-default
+{
   .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
 }
-.btn-primary {
+.btn-primary
+{
   .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
 }
 // Warning appears as orange
-.btn-warning {
+.btn-warning
+{
   .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
 }
 // Danger and error appear as red
-.btn-danger {
+.btn-danger
+{
   .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
 }
 // Success appears as green
-.btn-success {
+.btn-success
+{
   .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
 }
 // Info appears as blue-green
-.btn-info {
+.btn-info
+{
   .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
 }
 
@@ -92,7 +104,8 @@
 // -------------------------
 
 // Make a button look and behave like a link
-.btn-link {
+.btn-link
+{
   color: @link-color;
   font-weight: normal;
   cursor: pointer;
@@ -101,26 +114,31 @@
   &,
   &:active,
   &[disabled],
-  fieldset[disabled] & {
+  fieldset[disabled] &
+  {
     background-color: transparent;
     .box-shadow(none);
   }
   &,
   &:hover,
   &:focus,
-  &:active {
+  &:active
+  {
     border-color: transparent;
   }
   &:hover,
-  &:focus {
+  &:focus
+  {
     color: @link-hover-color;
     text-decoration: underline;
     background-color: transparent;
   }
   &[disabled],
-  fieldset[disabled] & {
+  fieldset[disabled] &
+  {
     &:hover,
-    &:focus {
+    &:focus
+    {
       color: @btn-link-disabled-color;
       text-decoration: none;
     }
@@ -131,16 +149,19 @@
 // Button Sizes
 // --------------------------------------------------
 
-.btn-lg {
+.btn-lg
+{
   // line-height: ensure even-numbered height of button next to large input
   .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
 }
 .btn-sm,
-.btn-xs {
+.btn-xs
+{
   // line-height: ensure proper height of button next to small input
   .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
 }
-.btn-xs {
+.btn-xs
+{
   padding: 1px 5px;
 }
 
@@ -148,7 +169,8 @@
 // Block button
 // --------------------------------------------------
 
-.btn-block {
+.btn-block
+{
   display: block;
   width: 100%;
   padding-left: 0;
@@ -156,15 +178,18 @@
 }
 
 // Vertically space out multiple block buttons
-.btn-block + .btn-block {
+.btn-block + .btn-block
+{
   margin-top: 5px;
 }
 
 // Specificity overrides
 input[type="submit"],
 input[type="reset"],
-input[type="button"] {
-  &.btn-block {
+input[type="button"]
+{
+  &.btn-block
+  {
     width: 100%;
   }
 }
@@ -179,28 +204,35 @@ input[type="button"] {
 // Button carets
 // Match the button text color to the arrow/caret for indicating dropdown-ness.
 
-.caret {
-  .btn-default & {
+.caret
+{
+  .btn-default &
+  {
     border-top-color: @btn-default-color;
   }
   .btn-primary &,
   .btn-success &,
   .btn-warning &,
   .btn-danger &,
-  .btn-info & {
+  .btn-info &
+  {
     border-top-color: #fff;
   }
 }
-.dropup {
-  & .btn-default .caret {
+.dropup
+{
+  & .btn-default .caret
+  {
     border-bottom-color: @btn-default-color;
   }
   .btn-primary,
   .btn-success,
   .btn-warning,
   .btn-danger,
-  .btn-info {
-   .caret {
+  .btn-info
+  {
+   .caret
+   {
       border-bottom-color: #fff;
     }
   }
@@ -208,21 +240,25 @@ input[type="button"] {
 
 // Make the div behave like a button
 .btn-group,
-.btn-group-vertical {
+.btn-group-vertical
+{
   position: relative;
   display: inline-block;
   vertical-align: middle; // match .btn alignment given font-size hack above
-  > .btn {
+  > .btn
+  {
     position: relative;
     float: left;
     // Bring the "active" button to the front
     &:hover,
     &:focus,
     &:active,
-    &.active {
+    &.active
+    {
       z-index: 2;
     }
-    &:focus {
+    &:focus
+    {
       // Remove focus outline when dropdown JS adds it after closing the menu
       outline: none;
     }
@@ -230,69 +266,85 @@ input[type="button"] {
 }
 
 // Prevent double borders when buttons are next to each other
-.btn-group {
+.btn-group
+{
   .btn + .btn,
   .btn + .btn-group,
   .btn-group + .btn,
-  .btn-group + .btn-group {
+  .btn-group + .btn-group
+  {
     margin-left: -1px;
   }
 }
 
 // Optional: Group multiple button groups together for a toolbar
-.btn-toolbar {
+.btn-toolbar
+{
   .clearfix();
 
-  .btn-group {
+  .btn-group
+  {
     float: left;
   }
   // Space out series of button groups
   > .btn,
-  > .btn-group {
+  > .btn-group
+  {
     + .btn,
-    + .btn-group {
+    + .btn-group
+    {
       margin-left: 5px;
     }
   }
 }
 
-.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
+.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle)
+{
   border-radius: 0;
 }
 
 // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
-.btn-group > .btn:first-child {
+.btn-group > .btn:first-child
+{
   margin-left: 0;
-  &:not(:last-child):not(.dropdown-toggle) {
+  &:not(:last-child):not(.dropdown-toggle)
+  {
     .border-right-radius(0);
   }
 }
 // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
 .btn-group > .btn:last-child:not(:first-child),
-.btn-group > .dropdown-toggle:not(:first-child) {
+.btn-group > .dropdown-toggle:not(:first-child)
+{
   .border-left-radius(0);
 }
 
 // Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
-.btn-group > .btn-group {
+.btn-group > .btn-group
+{
   float: left;
 }
-.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
+.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn
+{
   border-radius: 0;
 }
-.btn-group > .btn-group:first-child {
+.btn-group > .btn-group:first-child
+{
   > .btn:last-child,
-  > .dropdown-toggle {
+  > .dropdown-toggle
+  {
     .border-right-radius(0);
   }
 }
-.btn-group > .btn-group:last-child > .btn:first-child {
+.btn-group > .btn-group:last-child > .btn:first-child
+{
   .border-left-radius(0);
 }
 
 // On active and open, don't show outline
 .btn-group .dropdown-toggle:active,
-.btn-group.open .dropdown-toggle {
+.btn-group.open .dropdown-toggle
+{
   outline: 0;
 }
 
@@ -301,42 +353,51 @@ input[type="button"] {
 //
 // Remix the default button sizing classes into new ones for easier manipulation.
 
-.btn-group-xs > .btn { .btn-xs(); }
-.btn-group-sm > .btn { .btn-sm(); }
-.btn-group-lg > .btn { .btn-lg(); }
+.btn-group-xs > .btn
+{ .btn-xs(); }
+.btn-group-sm > .btn
+{ .btn-sm(); }
+.btn-group-lg > .btn
+{ .btn-lg(); }
 
 
 // Split button dropdowns
 // ----------------------
 
 // Give the line between buttons some depth
-.btn-group > .btn + .dropdown-toggle {
+.btn-group > .btn + .dropdown-toggle
+{
   padding-left: 8px;
   padding-right: 8px;
 }
-.btn-group > .btn-lg + .dropdown-toggle {
+.btn-group > .btn-lg + .dropdown-toggle
+{
   padding-left: 12px;
   padding-right: 12px;
 }
 
 // The clickable button for toggling the menu
 // Remove the gradient and set the same inset shadow as the :active state
-.btn-group.open .dropdown-toggle {
+.btn-group.open .dropdown-toggle
+{
   .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
 }
 
 
 // Reposition the caret
-.btn .caret {
+.btn .caret
+{
   margin-left: 0;
 }
 // Carets in other button sizes
-.btn-lg .caret {
+.btn-lg .caret
+{
   border-width: @caret-width-large @caret-width-large 0;
   border-bottom-width: 0;
 }
 // Upside down carets for .dropup
-.dropup .btn-lg .caret {
+.dropup .btn-lg .caret
+{
   border-width: 0 @caret-width-large @caret-width-large;
 }
 
@@ -344,9 +405,11 @@ input[type="button"] {
 // Vertical button groups
 // ----------------------
 
-.btn-group-vertical {
+.btn-group-vertical
+{
   > .btn,
-  > .btn-group {
+  > .btn-group
+  {
     display: block;
     float: none;
     width: 100%;
@@ -354,9 +417,11 @@ input[type="button"] {
   }
 
   // Clear floats so dropdown menus can be properly placed
-  > .btn-group {
+  > .btn-group
+  {
     .clearfix();
-    > .btn {
+    > .btn
+    {
       float: none;
     }
   }
@@ -364,35 +429,44 @@ input[type="button"] {
   > .btn + .btn,
   > .btn + .btn-group,
   > .btn-group + .btn,
-  > .btn-group + .btn-group {
+  > .btn-group + .btn-group
+  {
     margin-top: -1px;
     margin-left: 0;
   }
 }
 
-.btn-group-vertical > .btn {
-  &:not(:first-child):not(:last-child) {
+.btn-group-vertical > .btn
+{
+  &:not(:first-child):not(:last-child)
+  {
     border-radius: 0;
   }
-  &:first-child:not(:last-child) {
+  &:first-child:not(:last-child)
+  {
     border-top-right-radius: @border-radius-base;
     .border-bottom-radius(0);
   }
-  &:last-child:not(:first-child) {
+  &:last-child:not(:first-child)
+  {
     border-bottom-left-radius: @border-radius-base;
     .border-top-radius(0);
   }
 }
-.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
+.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn
+{
   border-radius: 0;
 }
-.btn-group-vertical > .btn-group:first-child {
+.btn-group-vertical > .btn-group:first-child
+{
   > .btn:last-child,
-  > .dropdown-toggle {
+  > .dropdown-toggle
+  {
     .border-bottom-radius(0);
   }
 }
-.btn-group-vertical > .btn-group:last-child > .btn:first-child {
+.btn-group-vertical > .btn-group:last-child > .btn:first-child
+{
   .border-top-radius(0);
 }
 
@@ -401,12 +475,14 @@ input[type="button"] {
 // Justified button groups
 // ----------------------
 
-.btn-group-justified {
+.btn-group-justified
+{
   display: table;
   width: 100%;
   table-layout: fixed;
   border-collapse: separate;
-  .btn {
+  .btn
+  {
     float: none;
     display: table-cell;
     width: 1%;
@@ -416,6 +492,7 @@ input[type="button"] {
 
 // Checkbox and radio options
 [data-toggle="buttons"] > .btn > input[type="radio"],
-[data-toggle="buttons"] > .btn > input[type="checkbox"] {
+[data-toggle="buttons"] > .btn > input[type="checkbox"]
+{
   display: none;
 }

src/less/controls/image.less

@@ -2,19 +2,22 @@
 // ------------------------
 
 // Responsive images (ensure images don't scale beyond their parents)
-.img-responsive {
+.img-responsive
+{
   .img-responsive();
 }
 
 // Rounded corners
-.img-rounded {
+.img-rounded
+{
   border-radius: @border-radius-large;
 }
 
 // Image thumbnails
 //
 // Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`.
-.img-thumbnail {
+.img-thumbnail
+{
   padding: @thumbnail-padding;
   line-height: @line-height-base;
   background-color: @thumbnail-bg;
@@ -27,6 +30,7 @@
 }
 
 // Perfect circle
-.img-circle {
+.img-circle
+{
   border-radius: 50%; // set radius in percents
 }

src/less/controls/textbox.less

-.form-control {
+.form-control 
+{
   display: block;
   width: 100%;
   height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)