Uittreden met Bootstrap van Twitter

Twitter heeft onlangs Bootstrap geïntroduceerd, een bibliotheek met CSS-stijlen die is bedoeld voor webapp-ontwikkelaars die behoefte hebben aan ontwerp-hulp. De toolkit omvat alles, van rasterlay-outs tot knoppen en modaliteiten, en werkt op vrijwel alle moderne browsers, helemaal terug naar IE7.

Laten we kijken wat we ermee kunnen doen?

Bootstrap wordt ook verbeterd door de Less preprocessor, die extra redenen toevoegt om Bootstrap te gebruiken, hoewel we de functionaliteit Minder uit de scope van deze tutorial, om het simpel te houden.

Bootstrap bevat een beetje documentatie, maar nergens legt het echt uit hoe je de toolkit gebruikt (in plaats daarvan is er maar één grote demopagina die je zelf kunt onderzoeken). In dit artikel gaan we de voorbeeldpagina van Bootstrap verwijderen en analyseren hoe de elementen die Bootstrap-covers bevatten, gerepliceerd kunnen worden. Bij het verstrekken van voorbeelden bouwen we ook een voorbeeldwebsite op die volledig is gemaakt met Bootstrap.

Wat is gedekt?

We gaan het volgende bekijken (gebruik de links om naar de verschillende secties te gaan):

Het rastersysteem
Typografie
tabellen
Formulieren en knoppen
Navigatie
Tabbladen en pillen
Paginering
Waarschuwingen en foutmeldingen
modals

Het rastersysteem

Roosters zijn een integraal onderdeel van veel webontwerpen. Net zoals een stadsplanner ontwerpt op een raster, kan een webontwerper ook zijn elementen op zo'n manier uitlijnen. Bootstrap bevat een rastersysteem met een totale breedte van 940 px, ingekapseld in de houder klasse. Er zijn zestien verschillende kolomklassen allemaal bij elkaar, waarbij de breedte van elke kolom cumulatief 60px toevoegt naarmate het aantal toeneemt, beginnend bij 40px. De klasse span1 heeft bijvoorbeeld een breedte van 40px, terwijl de span3-klasse een breedte van 160px heeft.

Zoals aangetoond in de afbeelding hierboven, kunnen we een combinatie van verschillende klassen gebruiken om een totale breedte van 940 px te maken, inclusief de toegevoegde 20px-marge. Bijvoorbeeld het gebruik van vier div.span4 klassen zouden, vertaald, zeggen: 220 + 20 + 220 + 20 + 220 + 20 + 220 die, zodra we de rekenmachine uitvegen, gelijk is aan een volledige 940 pixels. Door deze allemaal in een te verpakken rij class, Bootstrap is verantwoordelijk voor de marge van twintig pixels in de laatste kolom door het hele ding twintig pixels naar achteren te verplaatsen.

   Kolom # 1
 Inhoud voor kolom # 1.
 
  Kolom # 2
 Inhoud voor kolom # 2.
 
  Kolom # 3
 Inhoud voor kolom # 3.

De bovenstaande code genereert een redelijk gelijke reeks CSS-kolommen die minimale inhoud vertonen. Natuurlijk kunnen we sommige van deze klassen gewoon omwisselen of tags toevoegen / aftrekken om verschillende lay-outs te maken. Een ander kenmerk van de Bootstrap-toolkit is de mogelijkheid om een kolom "over te slaan" door deze te compenseren. De offsetklassen zijn opnieuw genummerd van 1-16, waar hun breedten hetzelfde +60-patroon volgen, hoewel ze nu een extra 40 px bevatten om te compenseren voor de linker- en rechtermarge van die kolom. We kunnen bijvoorbeeld het bovenstaande voorbeeld nemen, maar de middelste kolom verwijderen door de offset5 klasse tot het einde tag. Bijvoorbeeld:

   Kolom # 1
 Inhoud voor kolom # 1.
 
  Kolom # 3
 Inhoud voor kolom # 3.

Het is vrij eenvoudig om dit te manipuleren met slechts een paar nummers die moeten worden veranderd, en de afbeelding aan het begin van dit gedeelte moet worden gebruikt als een gids voor een aantal aanbevolen structuren.

Typografie

Een van de dingen die vrijwel alle elementen in deze tutorial doorloopt is typografie. Bootstrap wordt geleverd met alle typografische tags waarvoor u een stijl wilt hebben, alles van een

tag aan

en de hele kop hiërarchie. Eerlijk gezegd is dit 'Web Development 101'-materiaal dat u waarschijnlijk al kent, dus ik zal uw tijd niet verspillen met uitleggen hoe u kunt stylen. Het zijn mooie elementaire dingen.

Het is belangrijk om op te merken dat Bootstrap rekening houdt met oudere, nu niet meer gebruikte tags, dus maak je daar geen zorgen als je een CMS gebruikt die ze gebruikt, of voor een client die geen alternatief kent.

citeren

Waar Bootstrap wel wat meer uitleg nodig heeft, is wanneer je de

label. U kunt de tag alleen gebruiken om de inspringing aan te geven, met een dikke grijze rand aan de linkerkant. Het kan echter worden verbeterd door andere tags binnenin te nesten om het citaat toe te wijzen. Als het aankomt op het toevoegen van een attribuut, kunt u eenvoudig uw citaattekst in a plaatsen
tag en de bron in a tag en Bootstrap stylen automatisch en plaatsen een streepje voor de bron.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante venenatis dapibus posuere velit aliquet.
Connor Turnbull, 30 augustus

U krijgt uiteindelijk een resultaat dat lijkt op de afbeelding hieronder, afhankelijk van de inhoud die u tussen de alinea en de kleine tags plaatst.

lijsten

Lijsten zijn een ander bit van het typografiespectrum dat wordt behandeld in Bootstrap en wordt geleverd met vier verschillende sets met stijlen: lijsten met opsommingstekens, geneste lijsten met opsommingstekens, geordende lijsten en woordenlijsten. Nogmaals, deze zijn niet zo moeilijk te gebruiken omdat ze niet afwijken van wat standaard is in HTML. Omdat lijsten op verschillende manieren kunnen worden geconstrueerd, is hier een kort overzicht van hoe u ze kunt gebruiken met de Bootstrap-stijlen.

De onderstaande code is een standaard ongeordende lijst met opsommingstekens die iets soortgelijks zal produceren als het eerste voorbeeld in de onderstaande afbeelding. Ruil het ul voor een ol om een geordende lijst te produceren, zoals in het tweede voorbeeld.

Lorem ipsum dolor sit amet

Consectetur adipiscing elit
?

Als u de ongestijlde klasse aan de ongeordende lijst, worden niet-geneste lijstitems niet opsommingstekens gegeven of besteld. Ze verschijnen gewoon als gewone lijnen, terwijl geneste items een kogel links hebben.

Lorem ipsum dolor sit amet

Consectetur adipiscing elit
?

Het toevoegen van een beschrijvingslijst gebeurt op dezelfde manier als je zou verwachten buiten Bootstrap, en resulteert in een voorbeeld zoals de vorige in de bovenstaande afbeelding.

Lorem ipsum

Lorem ipsum dolor sit amet

consectetur

Consectetur adipiscing elit
?

tabellen

Bootstrap is een toolkit die deels gericht is op nieuwe webontwerpers, dus het hoeft niet altijd gezegd te worden dat deze dingen niet bedoeld zijn voor lay-outs. In plaats daarvan zijn tabellen bedoeld voor tabelgegevens, en Bootstrap kan behoorlijk goed werken aan het verfraaien van uw tabelgegevens met zijn stijlen, zonder dat extra klassen of attributen nodig zijn. We kunnen bijvoorbeeld een standaard HTML-fragment bekijken dat een tabel zou genereren.

# Voornaam Achternaam Taal

1 Sommige een Engels

2 Joe Sixpack Engels

3 Stu Deuk Code

De bovenstaande code maakt de tabel in de onderstaande afbeelding, zoals gebruikt in Twitter's officiële voorbeeld. Het heeft drie inhoudsrijen en een koptekst in vier kolommen, en is vrij standaard. Met weinig manipulatie (scratch die, geen manipulatie) tot het standaard aanmaken van een tabel, past Bootstrap automatisch zijn stijlen toe.

In dit geval is het belangrijkste om te onthouden om uw tags correct te nesten. De stijlen zijn niet van toepassing als u uw koprij niet in a verpakt tag, bijvoorbeeld.

Standaard is de tabel niet gestreept, waarbij alternatieve kleuren de achtergrond van elke rij kunnen vullen. Dit is eenvoudig in te schakelen, echter simpelweg door het toevoegen van de -Zebra gestreepte klasse voor de
tag zonder manipulatie van de rijen of afzonderlijke delen.

?
Eindelijk, met de toevoeging van een klein stukje jQuery, maar zonder toevoeging van HTML sortTableExample als de ID van de

#
tag, kunt u sorteerfunctionaliteit toevoegen wanneer er op de kop van een kolom wordt geklikt. Voor deze functionaliteit is de jQuery-plug-in Tablesorter 2.0 vereist, gratis te downloaden. Zoals je waarschijnlijk al geraden hebt, moet je jQuery ook bellen om dit te laten werken.

?
Formulieren en knoppen
De meeste dingen die we al hebben behandeld, zijn vrij eenvoudig, waarbij Bootstrap stijlen op je code toepast met weinig of geen verandering ten opzichte van normaal. Om dat uit de weg te ruimen, kunnen we nu verder gaan met iets dat een beetje meer uitleg en een beetje meer begeleiding vereist.
vormen
Voor formulieren zijn er veel verschillende stijlen die je kunt gebruiken, dus we gaan ze allemaal afzonderlijk bekijken. U kunt deze dan gewoon in combinatie met elkaar gebruiken en ze manipuleren met reeds bestaande kennis van reguliere oude HTML-formulieren.
Allereerst moet worden opgemerkt dat uw volledige formulier moet zijn ingepakt in een tag, maar dat weet u waarschijnlijk al. Bootstrap raadt ook aan om je elementen in te pakken
tags, met een extra label.

Lorem ipsum dolor sit amet (uw velden komen hier)

Over het algemeen moet uw formulierinstelling niet afwijken van de bovenstaande code. De enige andere optie die Bootstrap biedt, is om te kiezen voor gestapelde formulieren, waarbij labels zich boven in een veld bevinden, in plaats van naar links. Dat kan worden bereikt door de -Vorm gestapeld klasse voor de label.

Tekst invoer

Om onze dekking van formuliervelden te beginnen, zullen we kijken naar een regulier invoerveld met een label. Het onderstaande codefragment is in wezen een en een tag, ingepakt in a
tag met de Clearfix klasse om de juiste afstand te garanderen. Bovendien is het eigenlijke veld ingepakt in een ander veld
met de invoer klasse, nogmaals, om correcte spatiëring te verzekeren.

Lorem ipsum

Omwille van deze tutorial ga ik een paar praktijken negeren die in uw code moeten worden gebruikt. Elke invoer moet bijvoorbeeld een ID hebben, die via het kenmerk 'voor' aan het label is gebonden, en u wilt over het algemeen uw invoervelden een naam geven om ze te pakken als het gaat om de verwerking van uw gegevens. We kijken hier specifiek hoe u de stijlen van Bootstrap kunt gebruiken, dus die typen kenmerken zijn niet opgenomen in mijn voorbeelden om te proberen dingen zo eenvoudig mogelijk te houden. Niettemin, ook al worden ze gebruikt in combinatie met Bootstrap, deze taken mogen niet worden vergeten.

Door de xlarge klasse voor de , het formulierveld wordt verbreed.

We kunnen een invoer op de normale manier uitschakelen door de juiste kenmerken toe te voegen, zoals aangetoond in het onderstaande voorbeeld. De stijlen van Bootstrap zijn toegevoegd in de invalide klasse, die moet worden toegevoegd om visueel te laten zien dat een gebruiker geen interactie met dat veld kan hebben door het te laten verdwijnen.

Lorem ipsum

Terwijl de grijze benadering van een uitgeschakeld veld wordt bereikt met behulp van een tag, een niet-bewerkbare is dat niet. In plaats daarvan gebruikt Bootstrap een eenvoudig die kan worden gebruikt in combinatie met een verborgen invoer. Deze velden worden gebruikt voor informatie die de gebruiker niet mag bewerken, zoals een automatisch verzamelde datum of een IP-adres.

Lorem ipsum
Lorem ipsum dolor sit amet

Onze laatste blik op het stylen van tekstinvoer is om contextuele hulp te tonen wanneer een fout wordt aangetroffen. Het wordt gedaan door een fout klasse voor de
die de clearfix vormt, en de tag zichzelf. Een toevoegen tag met de help-inline onderstaande les voegt het helpbericht aan de rechterkant toe.

Lorem ipsum
Dolor zit op amet

Dropdown Select

Een vervolgkeuzemenu is op dezelfde manier gestructureerd, waarbij de reguliere code wordt gebruikt, zoals hieronder wordt weergegeven.

Lorem Ipsum

De xlarge klasse naar een tekstveld is het tegenovergestelde van de medium klasse tot a Lorem ipsum dolor sit amet

Die code genereert een enkel selectievakje met een label aan de rechterkant. Om een extra exemplaar te maken, herhaalt u gewoon het lijstitem en de inhoud ervan, en voil ?, u heeft een lijst met selectievakjes. Om een selectievakje uit te schakelen, voegt u gewoon de invalide toeschrijven aan de tag en de invalide klasse voor de label. Lorem ipsum dolor sit amet Bovendien zijn er twee extra soorten selectievakjes die worden gecombineerd met tekstvelden: voorgevulde en aangevulde selectievakjes. Nogmaals, dit is redelijk vanzelfsprekend en lijkt veel op een gewoon tekstveld. U moet deze keer echter het selectievakje in a. Plaatsen tag (met de toevoeging klasse), en de input-prepend of de input-append van klas tot ouder . Het enige dat overblijft is om ervoor te zorgen dat u het label en het veld op de juiste manier plaatst, afhankelijk van of u het wilt invoegen of toevoegen. Lorem ipsum De bovenstaande code is voor een toegevoegd selectievakje, maar als je een vooraf aangevraagde code wilt, is er weinig te veranderen. Lorem ipsum Bestandsinvoer Bestandsinvoer lijken veel op tekstvelden en de onderstaande code spreekt voor zich. Maak een normale bestandsinvoer met de Invoer bestand klasse. Lorem ipsum Tekstgebieden De laatste Bootstrap-stijl voor formulieren is het tekstgebied. Het tekstgebied wordt op dezelfde manier gemaakt als het tekstveld met één regel. Net als bij het vergroten van een tekstveld, heeft het tekstgebied ook een eigen klasse om het breder te maken, XXLarge. Lorem ipsum Optioneel kunt u een kleine hulplijn onder het veld toevoegen met de volgende regel direct na de </code> label.</p> <pre><span>Lorem ipsum dolor sit amet</span></pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_13.png"> <h3>Toetsen</h3> <p>Nu is het tijd om ons formulier te verwerken en normaal doen we dit door op een knop te klikken. Gelukkig bevat Bootstrap knoppen en zijn ze supereenvoudig om toe te voegen.</p> <p>Knoppen kunnen worden toegevoegd via een van beide <code><a></code> of a <code><button></code> label. Beide delen dezelfde klassen en zien er hetzelfde uit, maar je moet proberen om knoppen te reserveren voor acties en links voor, nou ja, links. Dus, bijvoorbeeld, zou een knop als volgt zijn geschreven:</p> <pre><button>Lorem ipsum</button></pre> <p>En een identieke knop, maar gemaakt als een link, zou als volgt worden geschreven:</p> <pre>Lorem ipsum</pre> <p>De knop verschijnt standaard in een lichtgrijze stijl. Dit kan echter eenvoudig worden gewijzigd in een van de vier andere (lichtblauw, blauw, groen en rood) door een extra klasse toe te passen.</p> <ul> <li> <code>primair</code> voor een blauwe knop die de primaire actie is (bijvoorbeeld het verzenden van een formulier)</li> <li> <code>info</code> voor een lichtere blauwe knop, meestal gebruikt om toegang te krijgen tot informatie</li> <li> <code>succes</code> voor een groene knop, gebruikt om succes aan te geven</li> <li> <code>Gevaar</code> voor een rode knop, meestal gebruikt voor onomkeerbare of gevaarlijke acties zoals verwijderen</li> </ul> <pre><button>primair</button> <button>Standaard</button> <button>info</button> <button>Succes</button> <button>Gevaar</button></pre> <p>We kunnen ook de grootte van een knop van de standaard wijzigen. Om het te vergroten, voegt u gewoon de <code>groot</code> klasse of krimpen met de (yep, je raadt het al) <code>klein</code> klasse.</p> <p>Om een knop uit te schakelen, hoeven we tenslotte alleen de. Toe te voegen <code>invalide</code> klasse en, in het geval van een actieknop, het kenmerk disabled (uitgeschakeld).</p> <pre><button disabled>Lorem ipsum</button></pre> <p>of</p> <pre><a>Lorem ipsum</pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_14.png"> <hr> <h2>Navigatie</h2> <p>Bootstrap bevat een vaste navigatiebalk die lijkt op die op Twitter's website. De balk bestaat in wezen uit drie delen, de titelkoppeling, de menu-items in de zoekbalk, ingekapseld in een paar <code><div></code> tags die niet de moeite waard zijn om uit te leggen.</p> <p>In de onderstaande code merk je een <code><h3></code> tag die de titel bevat. Het is vrij eenvoudig om dit aan te passen en om uw eigen link en tekst toe te voegen.</p> <pre><h3>Lorem ipsum</h3></pre> <p>Hierna volgen de menu-items, die alleen niet-geclassificeerde lijstitems met koppelingen zijn. Het is eenvoudig genoeg om deze items te dupliceren omdat ze geen Bootstrap-specifieke stijlen vereisen, afgezien van de <code>actief</code> klasse op de huidige link.</p> <pre><ul> <li>Huis</li> <li>Lorem</li> <li>ipsum</li> <li>smart</li> </ul></pre> <p>De laatste lijst is voor het vervolgkeuzemenu. Het bevat een enkel lijstitem, met een andere, geneste lijst die wordt weergegeven als de muisaanwijzer op de voorgrond staat. De derde regel van de onderstaande code is het lijstitem dat constant op de navigatiebalk verschijnt, terwijl de lijst die begint op regel 4 de zwevende items zijn.</p> <pre><ul> <li> Lorem ipsum <ul> <li>Dolor zit</li> <li>Amet Consequeter</li> <li>Genoeg met het Latijn</li> </ul> </li> </ul></pre> <p>Zoals u zult opmerken, voegt u een leeg lijstitem toe met de <code>verdeler</code> klasse voegt een scheidingslijn toe in het vervolgkeuzemenu.</p> <p>In gebruik ziet uw bovenste balk er ongeveer zo uit, die zich bovenaan uw pagina bevindt.</p> <pre><div> <div> <div> <h3>WebDesignTuts+</h3> <ul> <li>Huis</li> <li>tutorials</li> <li>artikelen</li> <li>Wekelijkse peilingen</li> </ul> <form> <input type="text" placeholder="Search" /> </form> <ul> <li> Lorem ipsum <ul> <li>Dolor zit</li> <li>Amet Consequeter</li> <li>Genoeg met het Latijn</li> </ul> </li> </ul> </div> </div> </div></pre> <p>Merk op dat je de 40-pixel hoogte van de balk boven aan je pagina wilt compenseren, anders overlapt het de eerste elementen op je pagina.</p> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_15.png"> <hr> <h2>Tabbladen en pillen</h2> <p>Tabbladen en pillen zijn waanzinnig eenvoudig te maken, omdat het gewoon oude lijsten zijn. Natuurlijk functioneren ze niet - Bootstrap gaat helemaal over de stijlen. Maak eenvoudig uw lijst met de <code>tabs</code> klasse voor de interface met tabbladen, of de <code>pillen</code> klasse voor de pillentabs. Net als in de navigatiebalk in het vorige gedeelte, het toevoegen van de <code>actief</code> klasse naar een lijstitem zal het markeren.</p> <p>Gebruik voor de tabswitcher iets soortgelijks:</p> <pre><ul> <li>Lorem</li> <li>ipsum</li> <li>smart</li> <li>Zitten</li> <li>Amet</li> </ul></pre> <p>Om in plaats daarvan pillen te gebruiken, verwisselt u de bovenste regel voor het volgende.</p> <pre><ul></pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_16.png"> <hr> <h2>Paginering</h2> <p>We gaan nu over naar paginering, die functionless is (zoals de tabbladen en pillen), maar nog steeds is vormgegeven in Bootstrap. Bootstrap verwerkt paginaknoppen op dezelfde tabbladen in een lijst die deze keer is ingepakt in a <code><div></code> met de <code>paginering</code> klasse. Elk lijstitem kan een gekoppeld nummer bevatten (of een ellips), behalve de eerste en laatste items die zijn gereserveerd voor de vorige / volgende links. Deze hebben de <code>prev</code> en <code>volgende</code> klassen, respectievelijk.</p> <p>Bovendien kan een knop worden uitgeschakeld door de knop toe te voegen <code>invalide</code> klasse en de actieve koppeling is gemarkeerd met de <code>actief</code> klasse. Zoals zo:</p> <pre><div> <ul> <li>Vorige</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>volgende</li> </ul> </div></pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_17.png"> <hr> <h2>Waarschuwingen en foutmeldingen</h2> <p>Waarschuwingsbalken lijken visueel sterk op knoppen, hoewel ze anders zijn geconstrueerd. Elke foutmelding is een <code><div></code> tag met de <code>alert-bericht</code> klasse. Er zijn vier verschillende soorten berichten, elk met een bijbehorende klasse die ook moet worden toegevoegd:</p> <ul> <li> <code>waarschuwing</code> voor een gele balk</li> <li> <code>fout</code> voor een rode balk</li> <li> <code>succes</code> voor een groene balk</li> <li> <code>info</code> voor een blauwe balk</li> </ul> <p>Waarschuwingsberichten worden dan als volgt geschreven en selecteren slechts één klas uit <code>waarschuwing / fout / succes / info</code>.</p> <pre><div> ? <p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit.</p> </div></pre> <p>Ter informatie: de tweede regel van de bovenstaande code voegt het "?" rechts van het alter-bericht, dat kan worden gekoppeld aan een actie om het bericht te verwijderen.</p> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_18.png"> <p>Waarschuwingen hoeven ook geen eenregelige affaire te zijn. Als uw bericht verder gaat dan een enkele regel, voegt u gewoon de <code>blok-message</code> klasse aan de code die u zou gebruiken voor een enkele regel, terwijl u nog steeds de verschillende typeklassen gebruikt.</p> <pre><div> × <p><strong>Lorem ipsum</strong> Fusce interdum euismod tempor? </p> </div></pre> <p>Deze berichten kunnen ook knoppen vasthouden, handig als de waarschuwing moet worden opgelost met een keuze. Als u teruggaat naar ons gedeelte over knoppen, weet u hoe u deze kunt toevoegen. Zorg ervoor dat u de kleine versies gebruikt, door de <code>klein</code> klasse naar de knop zelf, en verpak deze in a <code><div></code> tag met de <code>alert-acties</code> klasse.</p> <pre><div> × <p><strong>Lorem ipsum dolor sit amet!</strong> Fusce interdum euismod tempor? </p> <div> Lorem ipsum dolor sit amet </div> </div></pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_19.png"> <hr> <h2>modals</h2> <p>Modals kunnen handig zijn om informatie in bepaalde scenario's weer te geven, vaak gebruikt voor het invoeren van gegevens zoals gebruikersinformatie of berichten. Bootstrap's modal is vrij eenvoudig en is opgesplitst in drie secties; de koptekst, het hoofdgedeelte en het voettekst. Eerst beginnen we met het openen van de modal's <code><div></code> tag en positionering met enkele in-line stijlen die Bootstrap vereist.</p> <pre><div></pre> <p>Binnen die tag plaatsen we dan de drie secties, de eerste is de header. De kop heeft een klasse van <code>modale-header</code> en bevat slechts twee regels, een <code><h3></code> tag voor de titel en de (optioneel) gekoppelde "?" die kan worden aangepast om de popover te sluiten.</p> <pre><div> <h3>Lorem ipsum</h3> × </div></pre> <p>Vervolgens hebben we de belangrijkste inhoud. Het is heel simpel, gewoon een zijn <code><div></code> met de <code>modale lichaam</code> klasse en je inhoud erin. Als zo:</p> <pre><div> <p>Lorem ipsum dolor sit amet</p> </div></pre> <p>Ten slotte hebben we de modale voettekst (een andere <code><div></code>, deze keer met de <code>modale-footer</code> klasse) die over het algemeen bestaat uit knoppen om actie te ondernemen. Deze worden op precies dezelfde manier gegenereerd als alle andere knoppen die we met Bootstrap hebben gemaakt, dus ze hebben geen extra toelichting nodig.</p> <pre><div> Lorem ipsum dolor sit amet </div></pre> <p>Oké, ik heb gelogen. Dat was niet de laatste stap. We moeten het origineel nog steeds afsluiten <code><div></code>.</p> <pre></div></pre> <p>Zet al deze onderdelen samen als één, en je krijgt een mooie, zoete modale venster. Helaas, zoals ik je eraan zal herinneren, behandelt Bootstrap letterlijk de styling hier; het modale zal niet echt verschijnen alsof het is omgedraaid. Het zou geweldig zijn als Bootstrap uitgebreid is met wat functionaliteit naast de CSS, maar voorlopig zul je zelf moeten genereren of broncode maken.</p> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_20.png"> <hr> <h2>Laatste gedachten</h2> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_21.png"> <p>De afbeelding hierboven toont ons definitieve ontwerp. Het bestaat uit alle elementen die we in deze tutorial hebben gemaakt (er is een afzonderlijke demo voor de formulierelementen), volledig binnen het bereik van Bootstrap. Hopelijk is dit artikel nuttig voor u geweest, vooral omdat het voor sommigen moeilijk kan zijn om de meegeleverde voorbeeldpagina te ontcijferen (die fungeert als de enige documentatie die bij de download is inbegrepen).</p> <p>Ik hou van Bootstrap. Als u nog niet bekend bent met webontwikkeling, biedt dit een groot aantal elementen om te gebruiken, hoewel uw site er uiteindelijk misschien een beetje te Twitters uitziet doorheen veel gedeelde elementen. Desalniettemin is de eenvoud en het gebruiksgemak te moeilijk om te negeren als je je eigen niet wilt / kunt schrijven. Ik kan niet wachten om een deel van dit spul in een nieuw project te gebruiken.</p> <hr> <h3>Aanvullende bronnen</h3> <p>Minder CSS, BluePrint en WP gebruiken voor een snellere workflow-toevoegingen+<br>Snelle tip: typ nooit opnieuw een leveranciersvoorvoegsel Nettuts+<br>Bootstrap van Twitter is Dream Web AppStorm van een nieuwe webontwerper<br>Bootstrap-sjablonen op ThemeForest</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3810161443300697" data-ad-slot="9434875811"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="h-alltags"> <a href="articles/webdesign">Web ontwerp</a> </div> </div> </div> </div> </div> <div class="next_posts clearfix"> <div class="n_post"> <div class="next_posts-h1 left_nh1"><a href="/articles/code/steps-to-becoming-a-quality-wordpress-theme-developer.html">Stappen om een kwaliteit WordPress-thema-ontwikkelaar te worden</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_14/steps-to-becoming-a-quality-wordpress-theme-developer.jpg');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/photography/stepping-into-the-fashion-photography-industry.html">Stap in de mode-industrie</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_27_3/stepping-into-the-fashion-photography-industry_5.jpg');"></div> </div> </div> <footer> <div class="container"> <div class="footer-langs"> <ul class="site-langs-list"> <li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li> <li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li> <li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li> <li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li> <li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li> <li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li> <li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li> <li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li> </ul> </div> <div class="h-block"><a href="/">nl.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Interessante informatie en nuttige tips over programmeren. Website ontwikkeling, webdesign en webontwikkeling. Photoshop-zelfstudies. Creatie van computerspellen en mobiele applicaties. Word een volledig professionele programmeur. </div> </div> </footer> <div class="search"> <img class="searchico" src="//accentsconagua.com/img/search.svg" alt=""> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <input class="searchmain" type="text" id="search-input" placeholder="Zoeken..."> <ul class="searchli" id="results-container"></ul> </div> </div> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="js/scripts.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <script> var modal = document.querySelector(".modal"); var trigger = document.querySelector(".search"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); </script> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <script src="jquery.unveil2.min.js"></script> <script> $('img').unveil(); </script> </body> </html>

#