Steeën · Bootstrap op Lëtzebuergesch

Verlaangt HTML5 doctype

Bootstrap benotzt verschidden HTML Elementer an CSS Eegeschaften déi d'Benotzung vum HTML5 Doktype erfuerderen. Gitt et am Ufank vun all Äre Projeten un.

<!DOCTYPE html>
<html lang="de">
  ...
</html>

Typographie a Linken

Bootstrap setzt Basis global Display, Typographie a Linkstiler. Konkret, mir:

Ewechzehuelen marginop de Kierper
Setzt background-color: white;opbody
Benotzt d' @baseFontFamily, @baseFontSize, an @baseLineHeightAttributer als eis typographesch Basis
Setzt d'global Linkfaarf iwwer @linkColoran applizéiert Link ënnersträicht nëmmen op:hover

Dës Stiler kënnen an scaffolding.less fonnt ginn .

Reset via Normalize

Mat Bootstrap 2 ass den alen Resetblock zugonschte vun Normalize.css , e Projet vum Nicolas Gallagher a Jonathan Neal , deen och den HTML5 Boilerplate dréit . Während mir vill vun Normalize bannent eisem Reset.less benotzen , hu mir e puer Elementer speziell fir Bootstrap geläscht.

Live Gitter Beispill

De Standard Bootstrap Gitter System benotzt 12 Sailen , fir en 940px breet Container ouni reaktiounsfäeger Funktiounen aktivéiert. Mat der reaktiounsfäeger CSS-Datei bäigefüügt, passt d'Gitter op 724px an 1170px breet ofhängeg vun Ärem Viewport. Ënner 767px Viewports ginn d'Säulen fléissend a stackelen vertikal.

Basis Gitter HTML

Fir eng einfach zwee Kolonn Layout, schafen eng .rowa füügt déi entspriechend Zuel vu .span*Sailen. Well dëst en 12-Kolonn-Raster ass, .span*spant all eng Zuel vun deenen 12 Spalten aus, a soll ëmmer bis zu 12 fir all Zeil addéieren (oder d'Zuel vun de Spalten an der Elterendeel).

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

Gitt dëst Beispill, hu mir .span4an .span8, fir 12 Gesamtkolonnen an eng komplett Zeil ze maachen.

Offset Sailen

Beweegt Spalten no riets mat .offset*Klassen. All Klass erhéicht de lénksen Rand vun enger Kolonn ëm eng ganz Kolonn. Zum Beispill, .offset4bewegt .span4iwwer véier Sailen.

3 offset 2

3 offset 1

3 offset 2

6 offen3

<div class="row">
  <div class="span4">...</div>
  <div class="span3 offset2">...</div>
</div>

Nesting Sailen

Fir Ären Inhalt mat dem Standardgitter ze nestéieren, füügt eng nei .rowa Set vu .span*Spalten an enger existéierender .span*Kolonn. Nested Zeile sollen eng Rei vu Sailen enthalen, déi d'Zuel vu Spalten vu sengem Elterendeel addéieren.

Niveau 1 Kolonn

Niveau 2

<div class="row">
  <div class="span9">
    Niveau 1 Kolonn
    <div class="row">
      <div class="span6">Niveau 2</div>
      <div class="span3">Niveau 2</div>
    </div>
  </div>
</div>

Live Fluid Grid Beispill

De Flësseggitter System benotzt Prozenter amplaz Pixel fir Kolonnbreet. Et huet déiselwecht reaktiounsfäeg Fäegkeeten wéi eise fixe Gittersystem, a garantéiert proper Proportiounen fir Schlësselbildschirmresolutiounen an Apparater.

Basis flësseg Gitter HTML

Maacht all Zeil "flësseg" andeems Dir .rowop ännert .row-fluid. D'Kolonnklassen bleiwen genau d'selwecht, sou datt et einfach ass tëscht fixen a flëssege Gitter ze flippen.

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

Flëssegkeet Offset

Fonctionnéiert déiselwecht Manéier wéi de fixe Gittersystem Offset: Füügt .offset*all Kolonn un fir duerch esou vill Kolonnen ze kompenséieren.

4 offset 4

3 offset 3

6 offen 6

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span4 offset2">...</div>
</div>

Flësseg Nascht

Flësseggitter benotzen d'Nisting anescht: all nestet Niveau vu Kolonnen soll bis zu 12 Säulen derbäi ginn. Dëst ass well d'Flëssegkeetsgitter Prozentzuelen benotzt, net Pixel, fir Breeten ze setzen.

Flëssegkeet 12

Flëssegkeet 6

<div class="row-fluid">
  <div class="span12">
    Flëssegkeet 12
    <div class="row-fluid">
      <div class="span6">
        Flëssegkeet 6
        <div class="row-fluid">
          <div class="span6">Flësseg 6</div>
          <div class="span6">Flësseg 6</div>
        </div>
      </div>
      <div class="span6">Flësseg 6</div>
    </div>
  </div>
</div>

Fixed Layout

Bitt eng gemeinsam fix Breet (an optional reaktiounsfäeger) Layout mat nëmmen <div class="container">néideg.

<Kierper>
  <div class="container">
    ...
  </div>
</body>

Flësseg Layout

Erstellt eng fléissend zwee-Kolonn Säit mat <div class="container-fluid">- super fir Uwendungen an Dokumenter.

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar Inhalt-->
    </div>
    <div class="span10">
      <!--Kierper Inhalt-->
    </div>
  </div>
</div>

Aktivéiert reaktiounsfäeger Funktiounen

Aktivéiert reaktiounsfäeger CSS an Ärem Projet andeems Dir de passende Meta Tag an zousätzlech Stylesheet an <head>Ärem Dokument enthält. Wann Dir Bootstrap vun der Customize Säit kompiléiert hutt, musst Dir nëmmen de Meta Tag enthalen.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Kapp erop! Bootstrap enthält keng reaktiounsfäeger Funktiounen als Standard zu dëser Zäit well net alles reaktiounsfäeger muss sinn. Amplaz d'Entwéckler ze encouragéieren dës Feature ze läschen, si mir et am beschten et z'aktivéieren wéi néideg.

Iwwer reaktiounsfäeger Bootstrap

Media Ufroen erlaben personaliséiert CSS baséiert op enger Zuel vu Bedéngungen - Verhältnisser, Breeten, Displaytyp, etc - awer konzentréiert sech normalerweis ronderëm min-widthan max-width.

Ännert d'Breet vun der Kolonn an eisem Gitter
Stack Elementer amplaz ze schwammen wou et néideg ass
D'Gréisst vun den Rubriken an den Text änneren fir méi passend fir Apparater ze sinn

Benotzt Medienufroen verantwortlech an nëmmen als Start fir Är mobil Publikum. Fir gréisser Projeten, betruecht engagéiert Code Basen an net Schichten vun Medien Ufroen.

Ënnerstëtzt Apparater

Bootstrap ënnerstëtzt eng Handvoll Medienufroen an enger eenzeger Datei fir ze hëllefen Är Projete méi passend op verschidden Apparater an Écranresolutiounen ze maachen. Hei ass wat abegraff ass:

Label	Layout Breet	Kolonn Breet	Gutter Breet
Grouss Display	1200px a méi	70px	30 px
Default	980px a méi	60px	20 px
Portrait Pëllen	768px a méi	42px vun	20 px
Handyen op Pëllen	767px an drënner	Flësseg Sailen, keng fix Breet
Handyen	480px an drënner	Flësseg Sailen, keng fix Breet

/* Groussen Desktop */
@media (min-Breet: 1200px) { ... }

/* Portrait Tablet op Landschaft an Desktop */
@media (min-Breet: 768px) an (max-Breet: 979px) { ... }

/* Landschaftstelefon op Porträt-Tablet */
@media (max-Breet: 767px) { ... }

/* Landschaft Telefonen an erof */
@media (max-Breet: 480px) { ... }

Reaktiounsfäeger Utility Klassen

Fir méi séier mobilfrëndlech Entwécklung, benotzt dës Utility Klassen fir Inhalt per Apparat ze weisen an ze verstoppen. Drënner ass eng Tabell vun de verfügbare Klassen an hiren Effekt op e bestëmmte Medienufro Layout (vum Apparat markéiert). Si kënnen an fonnt ginn responsive.less.

Klass	Telefonen 767px an drënner	Pëllen 979px ze 768px	Desktops Default
`.visible-phone`	Siichtbar	Verstoppt	Verstoppt
`.visible-tablet`	Verstoppt	Siichtbar	Verstoppt
`.visible-desktop`	Verstoppt	Verstoppt	Siichtbar
`.hidden-phone`	Verstoppt	Siichtbar	Siichtbar
`.hidden-tablet`	Siichtbar	Verstoppt	Siichtbar
`.hidden-desktop`	Siichtbar	Siichtbar	Verstoppt

Wéini ze benotzen

Benotzt op enger limitéierter Basis a vermeit ganz verschidde Versioune vum selwechte Site ze kreéieren. Amplaz benotzt se fir d'Presentatioun vun all Apparat ze ergänzen. Reaktiounsfäeger Utilities sollen net mat Dëscher benotzt ginn, a sinn als solch net ënnerstëtzt.

Responsive Utilities Testfall

Ännert Äre Browser d'Gréisst oder lued op verschidden Apparater fir déi uewe genannte Klassen ze testen.

Siichtbar op ...

Gréng Scheckzeechen weisen datt d'Klass an Ärem aktuelle Viewport siichtbar ass.

Telefon ✔ Telefon
Tablet ✔ Tablet
Desktop ✔ Desktop

Verstoppt op ...

Hei, gréng Scheckzeechen weisen datt d'Klass an Ärem aktuelle Viewport verstoppt ass.

Telefon ✔ Telefon
Tablet ✔ Tablet
Desktop ✔ Desktop

Steieren

Global Astellungen