Share
Ok dus een paar weken geleden, op zijn eigen tweejarige jubileum, kondigden Mark Otto en de andere jongens die verantwoordelijk waren voor de ontwikkeling en het onderhoud van Bootstrap de officiële release van de derde versie van het raamwerk aan, en het kwam op steroïden. Laten we kijken wat we krijgen.
Ten eerste zijn de belangrijkste veranderingen die u in de nieuwe Bootstrap-release zult vinden de ondersteuning voor responsieve websites, in feite is de responsieve module verwijderd. Nu, vanuit de kern, Bootstrap is responsief, meer dan dat, deze nieuwe versie wordt geleverd met de benadering van "Mobile First", wat betekent dat bijna alles opnieuw is ontworpen om te beginnen met een lagere schermgrootte en opschalen (daarover meer in een beetje).
Bijna alles is opnieuw ontworpen en opnieuw opgebouwd om vanaf uw handheld-apparaten te starten en op te schalen.
In de look en feel zie je ook veel veranderingen, prominent het feit dat de hele stijl plat is en er is een optioneel thema voor een 2.0-er look. Bovendien zijn de pictogrammen van afbeeldingen naar een lettertype gegaan, wat handig is om te gebruiken als u verschillende formaten en kleuren nodig hebt.
Laten we beginnen te praten over het rastersysteem, oh the Grid, trouwens, er zijn vier Grid Systems in deze nieuwe versie van Bootstrap, die elk precies hetzelfde werken, waarbij ze worden gedifferentieerd door de schermbreedte waarmee ze werken.
Om ervoor te zorgen dat het rastersysteem goed werkt en ook om een juiste weergave en aanraakzoom te garanderen, voegt u de metatag voor de viewport aan uw document toe:
Er zijn vier Grid Systems in deze nieuwe versie van het framework, waarbij de breedte van de viewport de parameter is die ze onderscheidt. De breedten die de grenzen tussen de een en de ander bepalen, zijn als volgt:
En elk van de verschillende ondersteunde viewports heeft een specifieke klasse om het aan te pakken, als volgt:
Om gebruik te maken van het rastersysteem heeft u een containerelement nodig, met een klasse "houder", en in een tweede container met een klasse "rij". Merk op hoe in beide gevallen het "vloeibare" achtervoegsel is verdwenen, dit in tegenstelling tot Bootstrap 2. En in de tweede container zou je je kolommen plaatsen.
col-xs-6col-xs-6
Zoals ik eerder al zei, deze nieuwe versie van Bootstrap wordt geleverd met een Mobile First-aanpak, wat dit betekent is dat de kolommen met een klasse als suffix met een "Xs" zijn altijd horizontaal zwevend worden, ongeacht de grootte van de viewport. Als u zou zeggen, gebruik dan kolommen voorafgegaan door een "Md" en de viewport was minder dan 992px breed (zelfs 991px), die kolommen zullen de een onder de ander stapelen met een breedte van 100%, zoals in het volgende voorbeeld.
col-md-4col-md-4col-md-4
Wanneer deze pagina wordt bekeken in een kijkvenster van 992px of meer, ziet het er als volgt uit:
Als je dat document toevallig zou zien in een kijkvenster van 991px of minder, zou het er als volgt uitzien:
U kunt ook klassen combineren om uw elementen te adresseren met een bepaalde viewport-grootte. Als u bijvoorbeeld in het volgende voorbeeld de eerste twee kolommen naast elkaar wilt hebben in kleine apparaten (sm) en gestapeld op telefoons, kunt u de col-sm-6 in aanvulling op de col-md-4 klasse.
col-sm-6 col-md-4col-sm-6 col-md-4col-sm-6 col-md-4
In dit geval, als u de pagina opent in een kijkvenster dat groter is dan 991 px, ziet u drie gelijke kolommen, de een naast de ander, net als in het vorige voorbeeld. Als u het echter zou zien in een kijkvenster met een breedte tussen 768px en 991px, zou u het volgende resultaat krijgen:
Net als in het bovenstaande voorbeeld kunt u kolommen combineren en nesten in veel verschillende combinaties om zeer complexe lay-outs te maken. Er zit veel meer in het Grid-systeem in Bootstrap, maar een gedetailleerd overzicht van elk aspect ervan zou een tijdje duren, dus voor een diepgaandere beoordeling zou ik u sterk willen aanraden om de documentatie te bekijken..
De meeste klassen voor het Base CSS-deel van Bootstrap zijn hetzelfde gebleven, maar er zijn enkele wijzigingen die we in gedachten moeten houden wanneer we deze nieuwe versie gebruiken.
De code als geheel is opnieuw geschreven en de namen van de variabelen zijn gewijzigd. Als u naar de .loze bestanden kijkt, ziet u dat alle variabelen in het framework zijn overgestapt camelCase om streepjes te gebruiken voor woordscheiding, en ook is elke variabele naam gestandaardiseerd in een "element-state-pseudo-statusWat dit betekent, zijn elementspecifieke stijlen zoals:
Nu worden de prefix gebruikt met het element waarop ze worden toegepast, dus in deze nieuwe versie van Bootstrap zou de vorige lijst worden.
Hetzelfde geldt voor lijsten met een "in lijn"stijl toegepast op hen. Sommige andere wijzigingen in de namen van variabelen weerspiegeld in de klassen die we hebben gekend uit de vroegere dagen zijn die gerelateerd aan de grootte, bijvoorbeeld met knoppen, in versie 2. * je zou hebben:
Deze achtervoegsels voor de grootte zijn gewijzigd om overeen te komen met de algemene naamgevingsconventie en deze is hetzelfde als voor het rastersysteem, dus de vorige knopverklaring voor versie drie wordt:
Hetzelfde geldt voor invoerformaten en zichtbaarheidsverklaringen.
De algehele syntaxis en lay-out voor de tabellen blijven hetzelfde in deze versie van het framework, maar, loyaal aan het hele "Mobile First" -paradigma, nu hebben we responsieve tabellen in deze iteratie van Bootstrap. Om er gebruik van te maken, wikkelt u eenvoudig de hele tafel in een container met een klasse van "responsieve-table", wat dit zal doen is ervoor zorgen dat de tabellen horizontaal in kleine apparaten scrollen (< 768px).
...
En de resulterende tabel:
vormen
In de CSS-afdeling bevindt het zich in de formulieren waarin u de grootste verschillen ziet. Om te beginnen wordt elke invoer in een formulier in Bootstrap drie nu weergegeven als een "blok" -element met een breedte van 100%. De "size" -attributen die u kunt aanpassen met een klasse in formulierelementen hebben betrekking op de opvulling en lettertype van het element en niet op de breedte, om te regelen dat u deze in een container van de gewenste breedte moet plaatsen.
De opmaak voor de formulieren is ook veranderd, in de meest elementaire vorm, in versie 2. * een formulier zou er ongeveer zo uitzien.
De opmaak voor hetzelfde formulier in de nieuwe versie voegt een extra element en een klasse toe aan de invoer zelf, en gaat als volgt.
Bootstrap is gemaakt met Accessibility in gedachten, dat is de reden voor de toevoeging van het "rol" -attribuut, merk ook op dat de label / invoercombinatie is gewikkeld in een omslag met een klasse van "
vorm-groep"en net als al het andere heeft dit te maken met de responsieve aard van het framework.Het zoekformulier is verdwenen in deze versie en aangezien alle ingangen en tekstgebieden standaard 100% breed zijn, moet speciale aandacht worden besteed aan inline formulieren, maar de opmaak hiervan is vrijwel identiek aan die van de vorige vorm.
Let op de toevoeging van de klasse "
-vorm inline"naar het formulierelement en dat van"sr-only"naar het label heeft deze laatste klasse te maken met het toegankelijkheidsgedeelte van het raamwerk.Het gebruik van een label is optioneel met inline-formulieren, maar het wordt zeer aangemoedigd en doet niemand pijn.sr-only" betekent Alleen schermlezer. Schermlezers zullen het label dus vinden en "zeggen" aan de gebruiker.Als laatste, om een horizontaal formulier te maken, stelt u eenvoudig de breedte van het label in door in te stellen dat het "col-md-"of"
_sm"of wat dan ook en de bijbehorende"Besturing label"klasse, net als bij versie twee. en wikkel de invoer vervolgens in een container met een eigen gespecificeerde kolombreedte.En de resulterende vorm.
Er zijn enkele andere wijzigingen aangebracht met betrekking tot formulieren, zoals het verwijderen van "
input-prepend"en"input-append"klassen, in het voordeel van"input-groep"en"input-groep-addon". Er valt echter nog veel meer te bespreken, dus raadpleeg de documentatie voor meer informatie hierover.Glyphicons
Een ander gebied waar u grote veranderingen zult vinden, is de pictogrammen in het kader. De pictogrammenbibliotheek bevat 40 nieuwe glyphs, en niet alleen dat, ze zijn overgestapt van het gebruik van afbeeldingen naar lettertypen, dus nu in plaats van de twee "glyphicons- *" afbeeldingen toe te voegen aan uw "
img"map, moet u de vier" glyphicons "-lettertypen aan uw"fonts"directory, en ja, vier van hen. Dit heeft te maken met de compatibiliteit van de browser.Om prestatieredenen vereist elk pictogram een basisklasse en een pictogramspecifieke klasse. Dus nu, om een gebruikerspictogram toe te voegen dat u zou gebruiken:
De overschakeling van afbeeldingen naar lettertypen, geeft controle over pictogramkleuren en -grootte, en stelt u ook in staat om de standaardpictogrammen te vervangen door enkele aangepaste pictogrammen die u misschien leuk vindt. Als je je afvraagt waar je zulke lettertypepictogrammen kunt vinden, is Fontello een geweldige bron.
JavaScript-componenten
Hoewel de JavaScript-componenten in Bootstrap 3.0 opnieuw ontworpen en opnieuw gemaakt zijn, behouden ze dezelfde namen en gebruik. Met een paar lichtjes en niet zo zachte verschillen.
modals
Misschien is een van de meest gebruikte plug-ins in Bootstrap Modals. Je zult zien dat het vrij gelijkaardig is, met de verschillen dat de containers "modale-header", "modal-body" en "modal-footer" niet in een "modale inhoud" zijn verpakt in een "modale dialoog" houder. Dus wat was vroeger:
Veranderd naar:
Ja, het is een beetje meer markup, maar het verbetert de responsiviteit van de component en maakt het ook mogelijk om door de hele viewport te scrollen in plaats van een "max-height" parameter te hebben.
Om ze via JavaScript te activeren, zou je dezelfde methode als hiervoor gebruiken.
$ ('# my-modal') .modal ('show');De rest van de plug-ins blijven grotendeels hetzelfde. Op een speciale noot, de accordeon is gegaan in het voordeel van inklapbare panelen, ze werken vrijwel hetzelfde en hebben een zeer vergelijkbare syntaxis. Omdat sommige klassen een beetje veranderen, hebben ze nog steeds de transitie-plugin nodig en hebben ze geen extra containers nodig.
Ook is de Typeahead-plug-in verdwenen uit Bootstrap in het voordeel van Twitter's Typeahead-plug-in.
Evenementen
JavaScript-events zijn nu namespaced, maar wat betekent dat voor jou? Nou, in Bootstrap twee, om te luisteren naar het moment waarop een waarschuwing in je site "
dichtbij", zou je toevoegen:$ ('# mijn-waarschuwing'). bind ('close', function () );Nu in deze derde versie is de naam van de gebeurtenis gewijzigd, is deze naam toegevoegd aan het framework, dus het vorige fragment zou zijn:
$ ('# mijn-waarschuwing'). bind ('close.bs.alert', function () );Ga je gang en bekijk de rest van de JavaScript-componenten die Bootstrap te bieden heeft (die nog steeds afhankelijk zijn van jQuery).
Nieuwe componenten
Er zijn een paar nieuwe componenten in het CSS-gedeelte van het framework, lijstgroepen en panelen.
Lijstgroepen
Lijstgroepen, van de officiële documentatie.
... zijn een flexibel en krachtig onderdeel voor het weergeven van niet alleen eenvoudige lijsten met elementen, maar ook complexe met aangepaste inhoud.
Om een lijstgroep te maken, maakt u gewoon een ongeordende lijst met een "
list-groep"klasse, en voeg de" toelist-group-post"naar elk item in de lijst.
- Lorem ipsum ...
- Dolor zit ...
U kunt de "
actief"Classeer een item in de lijst om het te markeren, ook als je toevallig een insigne erin plaatst, wordt het verticaal gecentreerd en uitgelijnd aan de rechterkant, in het item. Ga je gang en probeer het.panels
Panelen zijn een manier om doos in sommige inhoud op uw site of applicatie, markeer het en geef het een gevoel van eenheid. De paneelmarkering is vrij eenvoudig en de inhoud kan worden gecombineerd met verschillende elementen om een unieke look en feel te krijgen.
Panelen kunnen kop- en voetteksten hebben en een speciale betekenis krijgen met de bekende "
sucess","fout","waarschuwing", enz. klassen. Bijvoorbeeld.PaneelrubriekSommige inhoud hier
- Lorem ipsum ...
- Dolor zit ...
Zoals u kunt zien, werken panels goed met lijstgroepen en ook met niet-begrensde tabellen.
Customizer
Ook nieuw in deze versie is de Customizer, waarin niet alleen het uiterlijk is veranderd, maar ook veel beter is georganiseerd en u controle heeft over zaken als de breedte van de viewport waarbij een bepaald rastersysteem de controle overneemt.
Zoals altijd kunt u al uw lettertypen, stijlen en kleuren instellen. Het is een enorm onderwerp op zich, dus ik zou je willen aanmoedigen om er alleen voor te gaan en er mee te rotzooien.
Browserondersteuning
Lang is het leed voor ons allemaal geweest door Internet Explorer, versie zes was een totale nachtmerrie en zijn voorgangers hebben nog veel inhaalbewegingen te maken. In versie 2. * Bootstrap's team ondersteunde nog steeds de versie zeven van de browser van Microsoft. In deze nieuwe versie van het framework is ondersteuning voor IE seven verdwenen, evenals voor Mozilla Firefox 3.6 en lager.
Bootstrap ondersteunt specifiek de nieuwste versie van alle belangrijke browsers (Safari, Opera, Chrome, Firefox en IE), zowel in Windows als Mac, wanneer beide beschikbaar zijn.
Voor IE ondersteunt het versie acht en forward, en hoewel er sommige eigenschappen zijn die de browser niet weergeeft, zoals "
border-radius", het raamwerk is alleen volledig functioneel met een paar kleine verschillen tussen uiterlijk en uiterlijk, IE 8 vereist ook response.js voor ondersteuning voor mediaquery's.Om een gedetailleerde lijst van oplossingen en valkuilen voor de verschillende browsers te krijgen (hoesten Internet Explorer hoesten) bekijk de officiële documenten.
Conclusie
Sinds het begin is Bootstrap een geweldig hulpmiddel voor snelle prototyping en het maken van geweldige sites en webapplicaties en deze derde versie is niet anders. Als je slechts één reden nodig hebt om het te gebruiken, zou ik zeker voor het Grid-systeem gaan, met de groei van mobiel browsen en de steeds groter wordende viewport-afmetingen, is responsiviteit nu een must, meer dan ooit. En in deze nieuwste versie is dat het gebied waar Bootstrap het meest schittert.
Als u hulp nodig hebt om aan de slag te gaan, kunt u een van de eenvoudig te gebruiken Bootstrap-sjablonen gebruiken die beschikbaar zijn op Envato Market.
Accentsconagua
