bootstrap less @import problem

Dieses Thema im Forum "Webdesign" wurde erstellt von onip, 29. Januar 2014 .

Schlagworte:
  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #1 29. Januar 2014
    hallo zusammen,

    ich experimentiere etwas mit boostrap und less herum.
    ich steh da vor einem problem, was das arbeit erschwert.
    in der variables.less kann ich bequem meine änderungen vor nehmen.
    jedoch wird die änderung erst aktiv, wenn ich in bootstrap.less
    1. @import "variables.less"; entferne
    2. seite neu laden
    3. @import "variables.less"; wieder einfüge
    4. seite neu laden

    als test hab ich etwas kleines gebaut:
    bootstrap.less
    HTML:
    @import "variables.less";
    @import "grid.less";
    
    variables.less
    HTML:
    @width: 990px;
    @height: 550px;
    @border: 1px solid #ff0;
    
    grid.less
    HTML:
    .container{
     width: @width;
     height: @height;
     border: @border;
     margin: 0 auto;
    }
    
    html
    HTML:
    <!DOCTYPE html>
    <html lang="de">
     <head>
     <meta charset="utf-8" />
     <title>demo.less</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet/less" href="less/bootstrap.less" />
     <script src="js/less-1.6.1.min.js"></script>
     </head>
     <body>
     <div class="container">
     <div class="row">
     <div class="col-lg-1">
     <div class="well"></div>
     </div>
     <div class="col-lg-1">
     <div class="well"></div>
     </div>
     <div class="col-lg-1">
     <div class="well"></div>
     </div>
     <div class="col-lg-1">
     <div class="well"></div>
     </div>
     <div class="col-lg-1">
     <div class="well"></div>
     </div>
     <div class="col-lg-1">
     <div class="well"></div>
     </div>
     </div>
     </div>
     </body>
    </html>
    
    der effekt ist der selbe :(

    schmeiß ich alles in bootstrap.less
    HTML:
    @width: 990px;
    @height: 550px;
    @border: 1px solid #f00;
    .container{
     width: @width;
     height: @height;
     border: @border;
     margin: 0 auto;
    }
    
    läuft's ohne probleme.
    kann es sein, dass @import gecached wird?
     

  2. Anzeige
  3. #3 29. Januar 2014
    AW: bootstrap less @import problem

    peinlich, die arbeit hätte ich mir selbst machen können. :oops:
    danke.

    so geht's:
    HTML:
    <!DOCTYPE html>
    <html lang="de">
     <head>
     <meta charset="utf-8" />
     <title>demo.less</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet/less" href="less/bootstrap.less" />
     </head>
     <body>
     <div class="container">
     <div class="row">
     <div class="col-lg-1">
     <div class="well"></div>
     </div>
     <div class="col-lg-1">
     <div class="well"></div>
     </div>
     <div class="col-lg-1">
     <div class="well"></div>
     </div>
     <div class="col-lg-1">
     <div class="well"></div>
     </div>
     <div class="col-lg-1">
     <div class="well"></div>
     </div>
     <div class="col-lg-1">
     <div class="well"></div>
     </div>
     </div>
     </div>
     <script type="text/javascript">
     var less=less||{};
     less.env='development';
     </script>
     <script src="js/less-1.6.1.min.js"></script>
     </body>
    </html>
    
     

  4. Videos zum Thema
Die Seite wird geladen...
Similar Threads - bootstrap less @import
  1. Antworten:
    2
    Aufrufe:
    506
  2. Bootstrap 3 Grid Positionierung

    DeltaFox , 14. Februar 2014 , im Forum: Webdesign
    Antworten:
    3
    Aufrufe:
    1.431
  3. Bootstrap 3 - Grid Optimierung

    elf4 , 9. Februar 2014 , im Forum: Webdesign
    Antworten:
    4
    Aufrufe:
    1.512
  4. Bootstrap CC BY 3.0

    Blackb!rd , 9. November 2012 , im Forum: Webentwicklung
    Antworten:
    3
    Aufrufe:
    826
  5. Antworten:
    8
    Aufrufe:
    714