向Bootstrap添加完全響應的排版3.這可能嗎？看看這裏

Question

這是我今天搜索了一段時間的問題，除非我遇到this page。本博客的作者建議使用一些LESS mixin，以便根據使用媒體查詢的屏幕大小來改變印刷元素的大小。

閱讀完文章後，我跟着一篇關於如何使用customize Bootstrap 3的博客，以便獲得嘗試的基礎知識，並且我設法使用無插件插件將所有內容集成到Play Framework中。

現在，前提我是一個網頁設計師在宇宙中最遙遠的東西 - 我正在努力製作一個網頁應用程序，只是爲了好玩 - 我今天第一次讀了一些關於LESS的內容，我遵循了我的本能有關如何整合引導代碼的混入和我tryied這樣的：

• 創建從博客

• 修改我的自定義引導文件，包括它，這樣包含代碼的響應，typography.less文件：

  @framework: "lib/bootstrap/less"; // path to Bootstrap's "less" directory 
  
  // Core variables and mixins 
  @import "custom-variables.less"; // my customized variable file 
  @import "@{framework}/mixins.less"; 
  @import "responsive-typography.less"; // code from the blog 
  
  // Reset and dependencies 
  @import "@{framework}/normalize.less"; 
  @import "@{framework}/print.less"; 
  .... 
  

因此，我發現無論屏幕大小如何，我都能看到在responsive-typography.less文件中設置的最小字體。以下是我從博客修改的文件：

@xxs: ~'min-width: 377px'; 
@xs: ~'min-width: @{screen-xs-min}'; 
@sm: ~'min-width: @{screen-sm-min}'; 
@md: ~'min-width: @{screen-md-min}'; 


.bs3-responsive-type(@mq, @font-size-base, @mq-size-percentage) { 
    @media(@mq) { 

    @font-size-large: ceil((@font-size-base * 1.25) * @mq-size-percentage); 
    @font-size-small: ceil((@font-size-base * 0.85) * @mq-size-percentage); 
    @font-size-h1:  floor((@font-size-base * 2.6) * @mq-size-percentage); 
    @font-size-h2:  floor((@font-size-base * 2.15) * @mq-size-percentage); 
    @font-size-h3:  ceil((@font-size-base * 1.7) * @mq-size-percentage); 
    @font-size-h4:  ceil((@font-size-base * 1.25) * @mq-size-percentage); 
    @font-size-h5:  @font-size-base; 
    @font-size-h6:  ceil((@font-size-base * 0.85) * @mq-size-percentage); 
    @import (multiple) "lib/bootstrap/less/scaffolding.less"; 
    @import (multiple) "lib/bootstrap/less/type.less"; 
    } 
} 

.bs3-responsive-type(@sm, 13px, 0.85); 
.bs3-responsive-type(@xs, 12px, 0.8); 
.bs3-responsive-type(@xxs, 11px, 0.75); /* Everything takes this font even on large devices */ 

Answer 1

，因爲en實驗我回復的最後三個行的順序和一切正常。我得到了充分的響應行爲。

.bs3-responsive-type(@xxs, 11px, 0.75); 
.bs3-responsive-type(@xs, 12px, 0.8); 
.bs3-responsive-type(@sm, 13px, 0.85); 

此事被筆者在它的原帖中使用的「MAX-」變量，我用了「MIN-」（因爲他在博客的「移動第一」的方針建議），所以我需要恢復線路。

所以這裏有一個簡短的簡歷：

響應-typography.less文件：

/** 
* Responsive typographic mixins 
* http://www.thedotmack.com/tags/Bootstrap,-Responsive,-Typography/ 
*/ 

/** Use these settings if you DON'T want a mobile first approach 
@xxs: ~'max-width: 377px'; 
@xs: ~'max-width: @{screen-xs-max}'; 
@sm: ~'max-width: @{screen-sm-max}'; 
@md: ~'max-width: @{screen-md-max}'; 
*/ 

@xxs: ~'min-width: 80px'; 
@xs: ~'min-width: @{screen-xs-min}'; 
@sm: ~'min-width: @{screen-sm-min}'; 
@md: ~'min-width: @{screen-md-min}'; 


.bs3-responsive-type(@mq, @font-size-base, @mq-size-percentage) { 
    @media(@mq) { 

     @font-size-large: ceil((@font-size-base * 1.25) * @mq-size-percentage); 
     @font-size-small: ceil((@font-size-base * 0.85) * @mq-size-percentage); 
     @font-size-h1:  floor((@font-size-base * 2.6) * @mq-size-percentage); 
     @font-size-h2:  floor((@font-size-base * 2.15) * @mq-size-percentage); 
     @font-size-h3:  ceil((@font-size-base * 1.7) * @mq-size-percentage); 
     @font-size-h4:  ceil((@font-size-base * 1.25) * @mq-size-percentage); 
     @font-size-h5:  @font-size-base; 
     @font-size-h6:  ceil((@font-size-base * 0.85) * @mq-size-percentage); 
     @import (multiple) "lib/bootstrap/less/scaffolding.less"; 
     @import (multiple) "lib/bootstrap/less/type.less"; 
    } 
} 

/* IMPORTANT * Revert these lines if you want to switch to 'max-' variables */ 
.bs3-responsive-type(@xxs, 11px, 0.75); 
.bs3-responsive-type(@xs, 12px, 0.8); 
.bs3-responsive-type(@sm, 13px, 0.85); 
.bs3-responsive-type(@md, 14px, 0.9); 

導入此文件一切之後。我將它設置爲我的自定義引導程序中的最後一個導入。最後的考慮：原始腳本運行良好，如果要使用「min-」值，則需要更改一些內容。所以我建議使用原始腳本，而不是這個版本。

還有一件事：有一個來自ckuijjer的評論，他指出圖標引用可能存在問題。我使用fontawesome，並且一切都像魅力一樣。我還沒有嘗試過glyphicons。