Share
Welkom bij deze serie over het Twitter Bootstrap (BS) UI en CSS-framework.
In mijn boek, Twitter Bootstrap bondig, heb ik de eerste basis gelegd en ben ik begonnen met Bootstrap 2.
Sinds dat boek is uitgebracht, is Bootstrap 3 de standaardversie geworden.
In deze serie gaan we door met bouwen aan dat basiswerk en gaan we verder met het gebruik van BS v3. We zullen kijken waar de dingen anders zijn en als we de nieuwe functies verkennen, zien we dat een groot deel van wat aanwezig was in v2 nog steeds van toepassing is op v3.
Als je het boek over Bootstrap 2 nog niet hebt gelezen, dan moedig ik je aan dit te doen, omdat ik het op verschillende punten in deze serie zal hebben..
Waarom? Ik geloof dat je het vanaf het begin moet onderzoeken om het hele Bootstrap-landschap te begrijpen. U moet kunnen begrijpen wat het heeft bereikt en op welke manier.
Je kunt alleen deze serie volgen en de basisprincipes van BS v3 leren, maar je krijgt een veel dieper, beter begrip als je eerst het v2-boek leest.
Dus wat is er veranderd van v2 naar v3?
Best veel.
De belangrijkste verandering tussen de twee versies is dat v3 nu "Mobile First" is. Bootstrap v2 was een responsieve lay-out CSS-kit, maar de mobiele en responsieve functies waren altijd de tweede plaats voor de rijke gebruikersinterface-functies. Om het responsieve spul correct te laten werken, moest je in feite een tweede CSS-bestand opnemen dat als enige doel had de responsieve, mobiele functies en niets anders in te schakelen.
In v3 is deze hele situatie volledig omgedraaid. Het volledige framework is nu mobielvriendelijk en responsief en heeft nu extra werk nodig om uw lay-outs aan te passen voor grotere schermindelingen. Begrijp me niet verkeerd - het is zeker geen enorme hoeveelheid werk. Het grootste deel van wat u moet veranderen, is nog steeds eenvoudigweg het omwisselen van klassen over en het structureren van uw HTML-mark-up correct.
De andere grote verandering zit in het benoemen van klassen en API-aanroepen. Veel van de klassenamen die in v2 zijn geïntroduceerd, zijn nu verouderd of zijn hernoemd tot iets dat meer geschikt is voor hun beoogde doel.
Er is ook een grote inspanning geleverd om klassen te hernoemen om consistenter te zijn. In v2 bijvoorbeeld, voor items die de RODE foutkleur als doel hadden, hadden we de volgende klassen:
Accentsconagua
btn-gevaar text-error tr.error .belangrijk .belangrijk .fout vooruitgang-gevaar In v3 zijn deze nu geconsolideerd, zodat naamgeving als volgt over alle componenten gelijk is:
btn-gevaar text-gevaar .Gevaar .Gevaar vooruitgang-bar-gevaar Zoals u kunt zien, is consistentie nu een belangrijke speler in de v3-klassen en vele andere vergelijkbare wijzigingen zijn aangebracht in het gehele framework.
Er zijn ook nogal wat kleine veranderingen geweest. Het box-model dat Bootstrap gebruikt, is bijvoorbeeld nu aanzienlijk verbeterd, waarbij alle elementen nu worden gebruikt border-box als het standaard CSS-box-dimensioneringsmodel.
Het rastersysteem is ook uitgebreid en verbeterd, en in plaats van een monolithisch rastersysteem met optionele klassen, bestaat het nu uit vier rijen rastergroottes specifiek gericht op telefoons, tablets, desktops en grote desktops..
Alle JavaScript-dingen zijn nu ook op naam verdeeld om conflicten met andere JavaScript-code te verminderen; de beschikbare evenementen zijn nu beter benoemd om hun doel te weerspiegelen en zijn veel duidelijker gedocumenteerd.
modals en navigatiebalken zijn enorm verbeterd in termen van reactievermogen, en samen met de naamgeving van klassenwijzigingen zijn de dimensioneringsklassen voor alle componenten (Inc Nav Modals) nu uitgelijnd.
Componentengewijs zijn sommige oudere, minder vaak gebruikte componenten verouderd en verwijderd, waarvan de meest opvallende de Accordeon component. Maar wanhoop niet - de accordeon is vervangen door een gloednieuwe inklapbaar-panel component dat veel flexibeler is dan zijn voorganger.
We hebben ook een nieuw, smal jumbotron, nieuwe paneel typen, lijstgroepen en nog veel meer.
Eindelijk, degene die dat verandert iedereen zal opmerken is de look en feel: TWB V3 is plat. Het heeft een enkele gekleurde, nieuwe interface, maar met afgeronde hoeken plat.
De hover-klassen hebben geen mooie, gegradueerde effecten meer, en de voortgangsbalkjes en -knoppen zien er niet langer semi-3D uit zoals in v2. In plaats daarvan hebben de beheerders van Twitter Bootstrap besloten om het gemakkelijker te maken om het uiterlijk van de elementen in de CSS aan te passen..
De beheerders hebben zelfs een "Bootstrap" -thema beschikbaar gesteld waarmee v3 eruit ziet als het originele v2-ontwerp om u op weg te helpen. In het laatste deel van deze serie, laat ik je zien hoe eenvoudig het nu is om de verschillende klassen te negeren en je te laten zien hoe je het platte thema kunt herzien om je eigen look & feel aan te nemen.
Maar voor nu, als je de v2-ervaring wilt, moet je ervoor zorgen dat je ook het juiste CSS-bestand opneemt, zoals vereist. Als je de standaard v3 wilt behouden, heb je niets extra nodig.
Toen BS2 voor het eerst werd uitgebracht, was de enige manier om het te krijgen via een download van de projectwebsite. Dit werd uitvoerig behandeld in het eerste boek met een diepgaande bespreking van precies welke bestanden in het zipbestand waren en waarom.
Omdat zoveel mensen Bootstrap gebruikten, duurde het niet lang voordat het op een CDN gratis beschikbaar werd gesteld door de mensen die MaxCDN gebruiken. Deze traditie is doorgegaan in de v3-codebasis en je kunt nu eenvoudig de door jou gekozen standaard v3-installatie krijgen door de volgende HTML-scripttags te gebruiken:
Als u de CDN-versies gebruikt, moet u er rekening mee houden dat u ook een recent exemplaar van JQuery moet opnemen; geen van de BS3 JS-functies werkt, tenzij u dat doet.
Naast de CDN-link is er nu ook een directe download op de site getbootstrap.com, niet alleen voor de standaard JavaScript & CSS-bundel zoals beschreven in het vorige boek, maar ook een directe link naar een zipbestand van het origineel " Minder "bronnen en een conversie naar" Sass "voor die mensen die graag een volledig op variaties gebaseerde, aanpasbare versie van de kit in uw eigen buildsysteem willen opnemen met behulp van tools zoals Grunt om dingen te automatiseren.
Naast de nieuwe bronnen kunt u nu ook Bower gebruiken om alles wat u nodig hebt te installeren met behulp van het volgende vanuit de opdrachtregel voor projectmappen:
prieel installeren bootstrap
Bower is een HTML-steiger- en pakketsysteem dat is ontworpen om een groot deel van de ketelplaat van de toepassing te automatiseren. U hoeft het niet te begrijpen om BS v3 te begrijpen, maar een snelle Google-zoekopdracht naar "Bower" zal veel referenties opleveren om uw begrip te verdiepen.
Op dezelfde manier kan BS v3 ook worden geïnstalleerd met behulp van de NuGet-pakketbeheerder als u in Visual Studio werkt. Net als Bower zal dit een groot deel van het proces voor het installeren en instellen van de vereiste bestanden automatiseren. Maar wees voorzichtig - er zijn veel Bootstrap-pakketten beschikbaar in NuGet, waarvan sommige meer werk met zich zullen meebrengen dan dat ze je redden.
Ten slotte is de TWB-aanpasser nog steeds beschikbaar. Het is enorm geherstructureerd en opnieuw opgebouwd om meer opties te bieden en een gemakkelijkere, meer intuïtieve kijk op wat je verandert en waarom.
Het is nu zo eenvoudig om dingen te veranderen met behulp van de aanpasser dat uw ontwerper of ontwerpteam 90 procent van het benodigde werk kan doen om de kleuren en branding van uw download in te stellen voordat de vereiste bestanden zelfs worden gedownload. Hierdoor kan uw ontwerpafdeling direct kleur- en opmaakkeuzes maken, terwijl u werkt aan de paginalay-outs en aanvullende code voor de vereiste interactiviteit. U hoeft dan alleen uw standaardbestanden te vervangen door de bestanden die uw ontwerpers aan u hebben geleverd en er moet onmiddellijk een wijziging in het thema plaatsvinden.
Officieel ondersteunt BS v3 alleen de nieuwste ronde HTML5-compatibele browsers en Internet Explorer 10 en hoger.
In werkelijkheid ondersteunt het framework ook IE8 en IE9; Er zijn echter enkele functies van CSS3 en HTML5 die niet helemaal werken zoals verwacht. In het bijzonder, als u wilt dat de responsieve elementen correct werken, moet u gebruiken respond.js, die je uit deze GitHub-repository kunt downloaden.
Als je eenmaal hebt toegevoegd reageren voor uw project is het in feite gewoon een algemene verwachting van wat wel en niet op verschillende tijdstippen aan de verschillende browsers was toegevoegd.
De onderdelen die het meest worden opgemerkt als vermist zijn als volgt:
Voor IE8:
border-radius is niet ondersteunde.box-shadow is niet ondersteunde.transformeren is niet ondersteunde.overgang is niet ondersteunde.placeholder tekst is niet ondersteunde.Dit betekent in feite dat de tijdelijke tekst in de invoerelementen niet wordt weergegeven en dat alles dat afgeronde hoeken of slagschaduwen gebruikt of een overgang of transformatie op het element bevat, niet correct wordt weergegeven.
Voor IE9:
border-radius is ondersteunde.box-shadow is ondersteunde.transformeren is ondersteund (maar alleen met -Mevrouw voorvoegsel).overgang is niet ondersteunde.placeholder tekst is niet ondersteunde.Bij IE9 zijn de dingen iets verbeterd, afgeronde hoeken en slagschaduwen zijn nu in orde en transformaties werken ook, als ze maar een -Mevrouw voorvoegsel versie.
Overgangen en plaatsaanduidingen op de invoerelementen ontbreken echter helaas nog steeds.
De officiële ondersteuningsmatrix voor de huidige versie van BS3 in de huidige browsers ziet er als volgt uit:
| Chrome | Firefox | D.W.Z | Opera | Safari | |
|---|---|---|---|---|---|
| Android | ✓ | ✗ | ✗ | ||
| iOS | ✓ | ✗ | ✓ | ||
| Mac OS X | ✓ | ✓ | ✓ | ✓ | |
| ramen | ✓ | ✓ | ✓ | ✓ | ✗ |
Als u IE9 en IE8 target en gebruikt respond.js om die inspanningen te ondersteunen, houd dan rekening met de volgende punten:
U moet verwijzen naar de respond.js docs als u CSS, etc. host op een ander domein (bijvoorbeeld een CDN) om problemen tussen verschillende domeinen te verhelpen.
Browserbeveiliging zal problemen veroorzaken met het dossier:// en @importeren gebaseerde bronreferenties.
Eigen aan @importeren is dat respond.js kan de regels niet goed lezen, wat belangrijk is voor Drupal-gebruikers, zoals Drupal gebruikt @importeren vrij zwaar.
Oudere IE-compatibiliteitsmodi zullen Bootstrap ervan weerhouden volledig te werken, niet alleen met respond.js, dus wees voorzichtig als je op compatibiliteit met eerdere versies test met behulp van een moderne IE in emulatiemodus - de resultaten zullen waarschijnlijk zijn niet wat je verwacht.
Deze tutorial staat voor een hoofdstuk van Bootstrap 3 Shortlyly, een gratis eBoek van het team van Syncfusion.
