Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
bootstrap [2015/06/08 16:22] – Externe Bearbeitung 127.0.0.1bootstrap [2024/02/29 13:36] (aktuell) – Externe Bearbeitung 127.0.0.1
Zeile 3: Zeile 3:
 [[http://getbootstrap.com/getting-started/]] [[http://getbootstrap.com/getting-started/]]
  
-[[http://www.w3schools.com/bootstrap/default.asp|w3school-Tutorial]]+[[http://www.w3schools.com/bootstrap/default.asp|w3school-Tutorial/Referenz]]
  
 +
 +[[http://getbootstrap.com/css/]]
 +
 +===== Grids =====
 +
 +Immer erst .container (full width mit .container-fluid), dann div .row, dann die Spalten. Diese müssen zusammen immer 12 ergeben.
 +
 +
 +  * xs x-small (for phones)
 +  * sm small (for tablets)
 +  * md middle (for desktops)
 +  * lg large (for larger desktops)
 +
 +also: col-[size]-[anzahl von 12]
 +
 +<code>
 +
 +<div class="container">
 +  <div class="row">
 +    <div class="col-*-*"></div>
 +  </div>
 +  <div class="row">
 +    <div class="col-*-*"></div>
 +    <div class="col-*-*"></div>
 +    <div class="col-*-*"></div>
 +  </div>
 +  <div class="row">
 +    ...
 +  </div>
 +</div>
 +
 +</code>
 +
 +==== Clear Floats ====
 +
 +Clear floats (with the .clearfix class) at specific breakpoints to prevent strange wrapping with uneven content:
 +<code>
 +  <!-- Add clearfix for only the required viewport -->
 +  <div class="clearfix visible-xs"></div>
 +</code>
 +
 +==== Rechtsbündig ====
 +class
 +<code>
 +pull-right
 +</code>
 +
 +===== Listen =====
 +
 +[[https://v4-alpha.getbootstrap.com/components/list-group/]]
 +
 +===== Typographie =====
 +
 +[[https://v4-alpha.getbootstrap.com/content/typography/]]
 +
 +==== Naming a source ====
 +
 +
 +Add a <footer class="blockquote-footer"> for identifying the source. Wrap the name of the source work in <cite> .
 +
 +<code>
 +<blockquote class="blockquote">
 +  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 +  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
 +</blockquote>
 +</code>
 +
 +==== Reverse layout ====
 +
 +
 +Add .blockquote-reverse for a blockquote with right-aligned content.
 +
 +<code>
 +<blockquote class="blockquote blockquote-reverse">
 +  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 +  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
 +</blockquote>
 +</code>
  
  
 
Nach oben
bootstrap.1433780525.txt.gz · Zuletzt geändert: 2024/02/29 13:34 (Externe Bearbeitung)
chimeric.de = chi`s home Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0
DFmW2CEce3htPL1uNQuHUVu4Tk6WXigFQp   Dogecoin Donations Accepted Here    DFmW2CEce3htPL1uNQuHUVu4Tk6WXigFQp  DFmW2CEce3htPL1uNQuHUVu4Tk6WXigFQp