Beiträge zu “Bootstrap”

Windows Virtualbox VMs in Proxmox

Microsoft bietet auf dieser Seite virtuelle Maschinen von Windows 7 und Windows 10 mit verschiedenen IE und Edge Browserversionen zum testen der Browser an. Leider ist dort keine Format für Proxmox enthalten. Auf Basis dieser und dieses Dokumentes konnte ich ein VirtualBox Image importieren. Hier meine Notizen (wie immer Use at your own risk)

Image auf den Server kopieren, einloggen und auspacken

   scp -P 22 IE11.Win7.VirtualBox.zip root@proxmox-server.ip:/root
   ssh proxmoxhos-server.ip
   unzip IE11.Win7.VirtualBox.zip

Wenn ich das richtig verstanden habe ist diese ausgepackte ova Datei ein Tarfile aus “Hardwarebeschreibung” und “Festplatte”. Also auspacken

  tar -xf IE11\ -\ Win7.ova

Aus der “PC” Beschreibung kann man erkennen wir groß diese Platte ist

  <Info>List of the virtual disks used in the package</Info>
    <Disk ovf:capacity="42949672960" ovf:diskId="vmdisk1" ovf:fileRef="file1" ovf:format="http://www.vmware.com/interfaces/specifications/vmdk.html#strea
  mOptimized" vbox:uuid="c523f6ad-edc8-4652-8f86-959e366ab2ac"/>

Also: 42949672960 byte = 42,94967296 GB

In Proxmox haben ich dann eine neue VM eingerichtet mit einer Festplatte dieser Größe. Die VM hatte die ID 110. Dann musste ich herausfinden wo die Festplatte von diesem neuen Rechner liegt:

    more /etc/pve/nodes/proxmoxserver/qemu-server/110.conf
    bootdisk: ide0
    cores: 1
    ide0: local-lvm:vm-110-disk-1,size=43G
    ide2: none,media=cdrom
    memory: 4512
    net0: e1000=8A:63:4A:B8:74:9B,bridge=vmbr0
    numa: 0
    ostype: win10
    scsihw: virtio-scsi-pci
    smbios1: uuid=a0f26105-45f5-4b0f-acf7-ee1cca4f1ec0

Das mit den Logischen Volumes habe ich nicht zu Ende verstanden aber so bekommt man den Dateinamen

     lvdisplay
    .....
    .....
    --- Logical volume ---
      LV Path                /dev/pve/vm-109-disk-1
      LV Name                vm-109-disk-1

Jetzt überschreibe ich den dort angegebenen Namen mit der konvertierten Version meines Images von Microsoft.

    qemu-img convert -p -f vmdk IE11\ -\ Win7-disk001.vmdk -O raw /dev/pve/vm-110-disk-1

Und dann konnte ich in das Windows 7 Image booten und es sieht gut aus.

7.3.19
Weitere Beiträge zu: Grunt   Bootstrap  

Bootstrap mit sass und grunt

Für unseren Webshop möchte ich langfristig auf eine neue Bootstrapversion umstellen und ein neues Template bauen. Ich arbeite zwar schon länger mit Grunt aber nur in Teilbereichen. Für die neuen Projekte möchte ich das mit npm noch etwas besser automatisieren. Vor allem das manuelle Downloaden und Anpassen der Abhängigkeiten soll entfallen.

Basis für meine Notizen sind dieses und dieses Dokument und wie immer gilt. Das sind meine Notizen und kein Bulletproof Tutorial

Wir starten also im Rootverzeichnis des Webprojekt und initialisieren unseren npm

npm init vi package.json “dependencies”: { “bootstrap”: “^4.2.1”, “jquery”: “^3.3.1”, “popper.js”: “^1.14.6” }

Damit haben wir eine Art “Inhaltsverzeichnis” eröffnet auf dessen Basis der npm Packete installiert. Jetzt kann ich einfach Boostrap mit allen Abhängigkeiten installieren.

  npm install       
  shop-rusticus-template@1.0.0 /home/hbauer/Dokumente/rusticus/shop/shoproot/templates/tpl_modified
  ├── bootstrap@4.3.1
  ├── jquery@3.3.1
  └── popper.js@1.14.7

  ls node_modules
  bootstrap  jquery  popper.js

Zu Beginn brauche ich erst mal nur die Werkzeuge die ich zum zusammenstellen der Bootstrap CSS Dateien aus den sass Quellen benötige.

 sudo npm install grunt -save-dev
 sudo npm install grunt-contrib-sass -save-dev
 sudo npm install grunt-contrib-watch -save-dev

Dann erstelle ich die Steuerungsdatei für Grunt. Hier werden erst einmal nur die saas Elemente eingebaut und getestet. Die anderen Grunt Funktionen übernehme ich von meinen alten Beispielen. Hier geht es mir vor allem um das Zusammenspiel der Bootstrap Elemente die über npm installiert werden und meine eigenen Notwendigen Anpassungen.

   module.exports = function(grunt) {
       grunt.initConfig({
           sass: {
               dev: {
                   options: { style: 'expanded',
                             loadPath: ['node_modules/bootstrap/scss','sass']},  //Wichtig
                   files: { 'mystyle.css': 'sass/mystyle.scss' }
                   },
               dist: {
                   options: { style: 'compressed',
                       loadPath: 'node_modules/bootstrap/scss' },
                   files: {
                       'mystyle.css': 'sass/mystyle.scss' }
               }
           },
           watch: {
               sass: {
                   files: 'sass/*.scss',
                   tasks: ['sass:dev']  } }
       });
       grunt.loadNpmTasks('grunt-contrib-sass');
       grunt.loadNpmTasks('grunt-contrib-watch');
       grunt.registerTask('buildcss', ['sass:dist']);
       grunt.registerTask('devcss', ['sass:dev']);
   };

Im Verzeichniss sass/ möchte ich alle meine Anpassungen halten. Dazu zählen die Anpassungen in den Variablen und gegebenenfalls eine reduziete bootstrap.scss aus der nicht gewünschte Elemente auskommentiert worden sind. Wichtig ist das wir das !default am ende entfernen (Die Änderung in der _bootstrap_variables_override ist nur ein Testbeispiel um zu sehen das es geht. )

 mkdir sass
 vi _bootstrap-variables-override
    $headings-font-weight: 1800;

 vi sass/mystyle.scss
     @import "bootstrap-variables-override";
     @import "functions";
     @import "variables";
     @import "mixins";
     @import "root";
     @import "reboot";
     @import "type";
     @import "images";
     @import "code";
     @import "grid";
     @import "tables";
     @import "forms";
     @import "buttons";
     @import "transitions";
     //@import "dropdown";
     @import "button-group";
     @import "input-group";
     @import "custom-forms";
     ....
     ...

Jetzt mal starten und dann schauen wir ob die geänderte Schriftform für die Überschriften im CSS ankommt.

   grunt sass:dev                            
   Running "sass:dev" (sass) task

   Done.

   grep -b3 h1 mystyle.css

        .h1, .h2, .h3, .h4, .h5, .h6 {
          margin-bottom: 0.5rem;
          font-weight: 1800;
          line-height: 1.2;
        }

Jetzt kann ich mit einem Werkzeug (npm) sowohl meine Gruntkomponenten als auch meine Abhängigkeiten installieren, updaten und dann direkt meine produktiven Dateien bauen. In meiner Versionskontrolle brauche ich nur die Dateien

  • Gruntfile.js
  • package.json
  • sass/*

zu halten.

2.3.19
Weitere Beiträge zu: Grunt   Bootstrap  

Bootstrap Modal mit remote Content befüllen

Bei Bootstrap gibt es die Möglichkeit eine Dialogboxen (Modals) für die Darstellung von Inhalten zu verwenden.

Den “Inhalt” kann man direkt beim Starten der Dialogbox aufrufen oder man lädt einfach eine bereits existierende Seite.

Der Aufruf ist relativ einfach. Den folgenden HTML Markup an “irgendwo” auf die Webseite plazieren.

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- hier kommt später der Content hin-->
        </div>
    </div>
</div>

Gestartet wird das ganze dann über einen Button oder HTML Link

<a href="http://your.server.com/inhalt.php" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Launch Demo Modal</a>

Soweit so gut. Ein Nachteil hat das ganze. Es gibt keine Möglichkeit die Titelzeile der Dialogbox oder einen “Cancel” Button beim Aufruf mitzugeben. Der Inhalt wir ausschließlich von der entfernten Webseite gefüllt.

In meinem Fall wird der Inhalt allerdings nicht nur über das Modal angezeigt sondern auch direkt im Browser wenn der Browser kein Javascript verwendet. Dort möchte ich dann natürlich keine Buttons sehen wenn die Seite nicht aus dem Modal heraus angezeigt wird.

Der Ansatz den ich gewählt habe ist folgender. Da ich ja weiß, daß die Seite nur direkt angezeigt wird wenn kein Javascript erlaubt ist verwende ich einfach Javascript um die notwendigen Bootstrap Markup für Headline und Schliessen Knopf in die Seite zu platzieren.

In der Seite inhalt.php wird also am Anfang kurz nach dem Bodytag eine leere Klasse eingefügt. <div class="modalheader"> </div>

Und am Ende dann ein

<script type="text/javascript">
     $(document).ready(function addcopy() {
        $(".modalheader").html("<div class=\"modal-header\"><button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button><h4 class=\"modal-title\">Informationen</h4></div>");
  });
</script>

Für dann Fall das die Seite aus dem Model heraus aufgerufen wird (Javascript enabled) wird ein Header und ein “X” zum Schließen angezeigt. Und für den Fall das die Seite direkt (Javascript disabled) bleibt die Zeile leer

16.8.14
Weitere Beiträge zu: Bootstrap  

Erweiterte Glyphicons in Bootstrap verwenden

Mit Bootstrap werden kostenlose Icons von Glyphicons mit ausgeliefert. Der Ersteller dieser Icons bietet über diese kostenlosen Icons noch ein erweitertes Set an. Mit folgenden Schritten habe ich diese Schriften eingebunden. Zuerst die Schriften an die richtige Stelle kopieren. Da ich wie hier beschrieben Anpassungen an Bootstrap mit Less vollziehe müssen noch die Less Dateien kopiert und eingebunden werden

Schritt 1 Schriften und Less Datein an die richtige Stelle

cd /glyphicons_pro/glyphicons/web/html_css/fonts
cp glyphicons-regular.* target/bootstrap/fonts
cd /glyphicons_pro/glyphicons/web/html_css/less
cp social.less target/bootstrap/

Schritt 2: Die neue Less Datei in die angepasste Bootstrap Definition einbinden

vi custom1/custom-bootstrap.less 
@import "../../../../var/www/dev-server/html/templates/xtc5/bootstrap/custom-variables.less";

Schritt 3: Die Bootstrap.css neu bauen

lessc custom-bootstrap.less > /var/www/dev-server/html/templates/xtc5/bootstrap/css/bootstrap.css

Danach kann man die neuen Fonts wie die anderen Bootstraps Glyphicons einbinden

3.8.14
Weitere Beiträge zu: Glyphicons   Bootstrap  

Anpassen von Bootstrap mit Less

verwendet man Bootstrap kommt recht schnell der Wunsch auf hier Anpassungen an Farben oder Abständen zu machen. Eine Möglichkeit ist es die entsprechenden CSS Klassen in einer eigenen CSS Datei “zu überschreiben. Möchte man zum Beispiel die Farbe des Texten in der Navigation ändern so muss man hierzu allerdings eine Vielzahl von CSS Klassen überschreiben.

Ändert man dies in den Quelldateien direkt so geschieht das nur einmal und wird automatisch durch Less an alle notwendigen Stellen übernommen. Außerdem kann man auf diese Weise auch eigene CSS Anweisungen direkt mit übernehmen und damit die Anzahl der zu ladenden CSS Dateien reduzieren. Die Beschreibung ging analog diesem Dokument.

Folgenden generellen Aufbau habe ich mir eingerichtet. In einem Verzeichnis werden die Bootstrap Quelldaten abgelegt sowie für die unterschiedlichen Projekte eigene Verzeichnisse.

mkdir boostrap-dev
cd boostrap-dev
wget https://github.com/twitter/bootstrap/zipball/master
unzip master
ln -s twbs-bootstrap-a035ee5 bootstrap

Jetzt legen wir ein Verzeichnis an für unser Projekt das wir anpassen wollen und kopieren die Datei mit den Variablen die wir anpassen können dorthin

mkdir custom1
cp bootstrap/less/variables.less custom1/custom-variables.less
vi custom1/custom-bootstrap.less
   @import "../bootstrap/less/bootstrap.less";
   @import "custom-variables.less";
   @import "../bootstrap/less/utilities.less";

Und jetzt machen wir Änderungen in den Variablen. Zum Beispiel die Änderung der Hintergrundfarbe und Höhe in der Navigationleiste

vi variables.less 
  @navbar-height:                    40px;
  @navbar-default-bg:                #eeab00;

und mit dem Befehl

lessc custom-bootstrap.less > /var/www/dev-server/html/templates/xtc5/bootstrap/css/bootstrap.css

wird dann eine komplett neue CSS Datei erzeugt. Wenn man mag auch minified.

Eigentlich wäre ich jetzt fertig. Nur möchte ich nun Änderungen in meinen Anpassungen in die Subversion Versionskontrolle übernehmen. Irgendwie scheint Less aber bei @import Schwierigkeiten mit Pfadnahmen zu haben. Um es kurz zu machen. Ich habe meine Less Dateien mit den Änderungen zum Template gepackt und die custom-bootstrap.less im Quellverzeichniss für Bootstrap gelassen.

So sieht das ganze jetzt aus

/home/hhauer/bootstrap-dev/
- aktuelle-bootstrap version
- boostrap -> link-auf-aktuelle-bootstrap-version
- custom1 mit den Import-Anweisungen custom-bootstrap.less

    @import "../../../../var/www/dev-server/html-1bis3-v25x/templates/xtc5/bootstrap/custom-settings.less";
    @import "../bootstrap/less/bootstrap.less";
    @import "../../../../var/www/dev-server/html-1bis3-v25x/templates/xtc5/bootstrap/custom-variables.less";
    @import "../bootstrap/less/utilities.less";


/var/www/devserver/htmt/templates/xtc5/bootstrap/
- custom-settings.less (eigene Erweiterungen die ich mit in die css aufnehmen möchte
- custom-variables.less (mit Anpassungen der Variablen aus bootstrap)

Aufgerufen wir das ganze so

cd /home/hbauer/bootstrap-dev/custom1
lessc custom-bootstrap.less > /var/www/dev-server/html/templates/xtc5/bootstrap/css/bootstrap.css
30.7.14
Weitere Beiträge zu: Bootstrap  

Bootstrap Suchmenü bei einer Eingabe vergrössern

Wenn man in einem Bootstrap Suchfeld die Klasse so erweitert

<form class="navbar-form pull-right" method="post" action="/search/">
      <input class="form-control mac-style" name="search" value="" placeholder="Suchen" type="text">
</form>

Und die CSS erweitert

.mac-style {
    width: 200px;
    -webkit-transition: width 1s ease-in-out;
    -moz-transition:width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
}
.mac-style:focus{
    width: 460px;
}

dann verlängert sich das Suchfeld automatisch wenn man einen Begriff eingibt.

23.2.14
Weitere Beiträge zu: Movabletype   Bootstrap  

Movabletype: Bootstrap Umstellung auf Version 3

Der Update von V2.x auf V3 ist leider nicht nur ein einfaches Einspielen von neuen Datein sondern diese neue Version ist mit starken Veränderungen verbunden.

In  meinem einfachen Fall dieses Blogs waren es vor allem die Grid Anweisungen, Formulare für die Suche/Kommentare und die Buttons.

Um die neuen zu verändernden Elemente schnell zu finden hat mir dieses Tool etwas geholfen. Ich wollte möglichst schnell erstmal die neue Version bekommen und werde später versuchen die Neuerungen zu nutzen.

Ich habe die Veränderungen im "laufenden Betrieb" vorgenommen. Folgende Reihenfolge habe ich gewählt

  • Seiten
  • Einträge
  • Monatsarchive
  • Hauptindex 

Es ist noch nicht alles fertig und ich schätze das mit der notwendingen minimalen Einarbeitung das ganze ca 2 Stunden gedauert hat.

http://code.divshot.com/bootstrap3_upgrader/
6.11.13
Weitere Beiträge zu: Movabletype   Bootstrap  

Work in Progress

Die nächsten Tage kann es zu "visuellen Unstimmigkeiten" hier im Blog kommen. Ich stelle von Bootstrap V2 auf V3 um.

201311-boostrap-v3-umstellung.png

 

3.11.13
Weitere Beiträge zu: Bootstrap  

Bootstrap: Den Button in der Navigationsleiste anpassen.

Ich wollte in einem Bootstrap Template den Button für die mobile Navigationszeile von den drei waagerechten Strichen gegen einen Text austauschen. Durch folgende einfache Änderungen kann man das erreichen.

Zuerst den Button ändern:

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">Navigation </a>

Dann noch in einer lokalen CSS Datei die Defaults von Bootstrap mit den eigenen Farben überschreiben.

.btn-navbar {
    background-color: #fff;
    background-image: none;
}

.btn-navbar:hover, .btn-navbar:active, .btn-navbar.active, .btn-navbar.disabled, .btn-navbar[disabled] {
    background-color: #fff;
}

Fertig
 

21.10.12
Weitere Beiträge zu: Bootstrap  

Bootstrap: Gridbreite und Spaltenanzahl ändern

Um eine bestehen Web Site auf Bootstrap zu migrieren und das aktuelle Layout möglichst genau umzusetzen brauchte ich eine andere Breite. Auch war mit die Spalteneinteilung zu grob, so das ich von 12 auf 24 Spalten umstellen wollte. Da Bootstrap auf Less basiert und auch viele Variable bereitstellt ist dies recht einfach.

Zuerst das Packet mit Dokumentation von hier laden, auspacken und das Verzeichnis less in ein Arbeitsverzeichnis verschieben.

Mein Ziel: Anpassung der fixen Breite von 940px mit 12 Spalten auf 980px mit 24 Spalten. Die Anpassung ergibt sich aus diesem Dokument Im Standard gibt es 12 Spalten mit 60px und 11 Zwischenräume mit 20px

(12*60)+(11*20)=940

Um auf meine Größe von 980 zu kommen (oder fast ganz daran)

(24*32.20) + (23*9) = 979,8

Jetzt die Datei variable.less öffnen und die Werte setzen

@gridColumns:             24;
@gridColumnWidth:         32.20px;
@gridGutterWidth:         9px;

Dann einfach

lessc bootstrap.less > ../boostrap.css

und schon hat man ein angepasstes Stylesheet und man bekommt die Klassen mit span1 bis span24 frei Haus geliefert.

13.6.12
Weitere Beiträge zu: Bootstrap  

Eigene Icon Sets für Bootstrap verwenden

Bei der Verwendung von Icons werden im allgemeinen CSS Sprites empfohlen. Dabei handelt werden mehrere kleine Icons in einer Datei zusammengefasst und dann über CSS Formatierungen entsprechend positioniert.

Für Bootstrab konnte ich dies mit folgenden einfachen Schritten auf meinem Blog installieren. Zuerst müssen die Icons zusammengestellt werden (z.B. aus einem existierenden Set wie famfam ) Um die Dateigröße klein zu halten habe ich mir die benötigten Icons rausgesucht und in ein Zip File gepackt.

Auf dieser Webseite kann man aus diesem Zip dann einfach die Sprite Datei und die zugehörigen CSS Anweisungen bekommen. Wichtige Angaben:

horizontal undvertical offset 5 px
class prefix cus-

Dann Hochladen der PNG Datei und die CSS Informationen in eine neue oder existierende CSS Datei auf dem Server einbinden und noch folgende Element dazupacken

/* icons */
[class^="cus-"],
[class*=" cus-"] {
display: inline-block;
width: 17px;
height: 16px;
*margin-right: .3em;
line-height: 14px;
vertical-align: text-top;
background-image: url("/cas-hbauer-icon.png");
background-position: 14px 14px;
background-repeat: no-repeat;
}
[class^="cus-"]:last-child,
[class*=" cus-"]:last-child {
*margin-left: 0;
}
.cus-comments{ background-position: 0 0; width: 16px; height: 16px; }
.cus-date{ background-position: 0 -21px; width: 16px; height: 16px; }
.cus-email{ background-position: 0 -42px; width: 16px; height: 16px; }
.cus-find{ background-position: 0 -63px; width: 16px; height: 16px; }
.cus-house_go{ background-position: 0 -84px; width: 16px; height: 16px; }
.cus-magnifier{ background-position: 0 -105px; width: 16px; height: 16px; }
.cus-tick{ background-position: 0 -126px; width: 16px; height: 16px; }

Danach müssen im Design an den gewünschten Stellen dieser Tag einfügt werden.

<i class="cus-date"></i>

 

8.6.12
Weitere Beiträge zu: Bootstrap  

Movabletype: Paginierung von Bootstrap verwenden

Movabletype verwendet eine sehr "rustikale" Anzeige wenn man zwischen den Seiten bei Kategorien und Suchergebnissen navigiert. Ich habe die Gestaltung des Bootstrap Frameworks durch folgenden einfache Änderungen eingefügt,

201205-mt-pager-before-bootstrap.png201205-mt-pager-after-bootstrap.png

Kategorien und Monatsarchive

Entry Listing Template: Ersetze

<div class="content-nav">
    <mt:ArchivePrevious>
    <a href="<$mt:ArchiveLink$>">&laquo; <$mt:ArchiveTitle$></a> |
    </mt:ArchivePrevious>
    <a href="<$mt:Link template="main_index"$>">Hauptseite</a> |
    <a href="<$mt:Link template="archive_index"$>">Archive</a>
    <mt:ArchiveNext>
    | <a href="<$mt:ArchiveLink$>"><$mt:ArchiveTitle$> &raquo;</a>
    </mt:ArchiveNext>
</div>

Durch

<div class="pager">
    <mt:ArchivePrevious>
    <a href="<$mt:ArchiveLink$>"> <$mt:ArchiveTitle$></a>
    </mt:ArchivePrevious>
    <a href="<$mt:Link template="main_index"$>">Hauptseite</a>
    <a href="<$mt:Link template="archive_index"$>">Archive</a>
    <mt:ArchiveNext>
    <a href="<$mt:ArchiveLink$>"><$mt:ArchiveTitle$></a>
    </mt:ArchiveNext>
</div>

Suchergebnissse

Im System Template "Search results" ersetze:

 <div class="content-nav">
        <mt:IfPreviousResults>
         <a href="<$mt:PreviousLink$>" rel="prev" onclick="return swapContent(-1);">&lt; Previous</a>&nbsp;&nbsp;
        </mt:IfPreviousResults>
        <mt:PagerBlock>
          <mt:IfCurrentPage>
              <$mt:Var name="__value__"$>
          <mt:Else>
              <a href="<$mt:PagerLink$>"><$mt:Var name="__value__"$></a>
          </mt:IfCurrentPage>
          <mt:Unless name="__last__">&nbsp;</mt:Unless>
        </mt:PagerBlock>
        <mt:IfMoreResults>&nbsp;&nbsp;<a href="<$mt:NextLink$>" rel="next" onclick="return swapContent();">Next &gt;</a></mt:IfMoreResults>
    </div>

Durch

<div class="pagination">
        <mt:IfPreviousResults>
    <li> <a href="<$mt:PreviousLink$>" rel="prev" onclick="return swapContent(-1);">«</a></li>
         </mt:IfPreviousResults>
         <mt:PagerBlock>
            <mt:IfCurrentPage>
             <li class="active"> <a href="<$mt:PagerLink$>"><$mt:Var name="__value__"$> </a></li>
              <mt:Else>
             <li> <a href="<$mt:PagerLink$>"><$mt:Var name="__value__"$></a> </li>
            </mt:IfCurrentPage>
            <mt:Unless name="__last__"></mt:Unless>
          </mt:PagerBlock>
          <mt:IfMoreResults>
    <li>  <a href="<$mt:NextLink$>" rel="next" onclick="return swapContent();">»</a></li>
          </mt:IfMoreResults>
    </div>


 

18.5.12
Weitere Beiträge zu: Bootstrap   Movabletype  

Responsive Images in Bootstrap

Bootstrap bietet zwar die Möglichkeit, das sich das Layout "responsive" auf die Grösse des Bildschirms anpaßt, leider werden dabei aber die Bilder nicht mit gändert.

Mit folgenden einfachen CSS Zeilen kann man dies für die Bilder doch erreichen

img {
    max-width: 100%;
    height: auto;
}

Den Tipp hatte ich hier gefunden

(geht zwar nicht beim IE8 aber wer den benutzt hat auf meinem Blog halt Pech)

17.5.12
Weitere Beiträge zu: Bootstrap  

MovableType mit Twitter Bootstrap

Durch einen Hinweis von Stephan Wissel bin ich auf Bootstrap von Twitter gestossen. Bootstrap ist en Open Source Framework von Twitter für eine schnelle und elegante Entwicklung von Webseiten mit HTML5, CSS und JavaScript. For Starters wollte ich damit mal meinen eigenen Blog gestalten. Es enthält ziemlich viel was ich alles noch nicht genutzt habe aber auf jeden Fall bekommt man damit eine einfache schnelle Möglichkeit ein Layout zu gestalten das mit verschiedenen Auflösungen vom PC und mobilen Geräten gut gelesen werden kann.

Ein paar Sachen fehlen noch aber "das wichtigste" geht schon.

201204-bootstrap-movabletype.png

12.4.12
Weitere Beiträge zu: Bootstrap   Movabletype  

Dies ist ein privater Blog von Hagen Bauer- berufstätiger Vater, Ehemann, Naturliebhaber, Läufer, Zelter, technikverliebt.


Creative Commons License
This blog is licensed under a Creative Commons License