Share
Tot dusver heb je al een aantal van de nieuwe CSS-functies gezien die beschikbaar zijn in versie 3 van Bootstrap. In deze zelfstudie gaan we wat meer in detail over alleen wat als nieuw wordt beschouwd en wat niet.
In veel gevallen zijn deze nieuwe klassen slechts nieuwe namen van de oude, maar we behandelen ze hier als nieuw, zodat u gemakkelijk het onderscheid kunt maken.
De verschillende klassen waaruit de typografiesectie van BS3 bestaat, zijn niet zo veel veranderd als sommige andere elementen. Tags H1door H6worden nog steeds op dezelfde manier behandeld als in v2, met de toevoeging die u nu kunt gebruiken in lijn met elk headerelement zonder dat het eerst in a moet worden ingepakt divde ... gebruiken pagina hoofdklasse. Dit betekent nu geen extra markup, tenzij u wilt dat uw block heading wordt onderstreept met een andere paragraafmarge.
Dit is mijn superwebpagina Het is de beste die er is
In v2 had je geen andere keuze dan je H1 in een div-header van de pagina te wikkelen, omdat dit de enige manier was waarop de output van de kleine tags netjes zou worden uitgelijnd. Dit is nu gerectificeerd en ook toegepast op alle niveaus van de header, in plaats van alleen de eerste drie.
Dit is mijn superwebpagina het is de beste die er is
Verderop, de standaard body copy-klasse heeft geen wijzigingen en heeft een standaardgrootte van 14 pixels met een regelhoogte van ongeveer 1,4.
Tekstkopie wordt automatisch toegepast op alle tekst in een alinealabel, dus er zijn geen klassen nodig, tenzij u bepaalde speciale functies wilt gebruiken (zoals we binnenkort zullen zien).
Lead body copy (alinea's met de klassenaam van lood) hebben ook geen wijzigingen in hun naam of styling en zijn net als bij v2 ontworpen om uw openingsparagraaf iets meer nadruk te geven dan de andere gewone body-kopie. Door deze drie CSS-regels te combineren, hebt u misschien ongeveer het volgende:
Dit is mijn superwebpagina Het is de beste die er is
Welkom op mijn super-duper webpagina, er is geen andere webpagina zoals deze in de hele wereld, mijn pagina is het beste op internet dat je moet bezoeken
Op deze fantastische pagina heb ik tekst en wat meer tekst, en er is zelfs wat tekst voor je te lezen, evenals een leuk uitziende paginatitel
Wanneer weergegeven in uw browser, zou het er als volgt uit moeten zien:
De tag kan nu ook op zichzelf worden gebruikt, omdat de stijl ervan nu correct wordt afgehandeld en toegepast in de context waarin het wordt gebruikt, dus de vormgeving volgt zijn positie in het document ongeacht de parent-tag.
Op dezelfde manier wordt vetgedrukte tekst nog steeds gemaakt met behulp van de tag en cursief met behulp van de label; zoals met veel van de typografie-klassen, is dit niet anders dan het v2-framework.
De uitlijningsklassen behouden ook dezelfde klassennamen van text-links, text-center, text-rechts, en text-rechtvaardigen, en nog steeds dezelfde functies uitvoeren als beschreven in het BS2-boek dat aan deze reeks voorafgaat.
Evenzo worden afkortingen nog steeds gemaakt met behulp van de tag met de titelattribuut fungeert als de volledige beschrijving van de afkorting. Er is een nieuwe klas, initialism, die kan worden toegevoegd aan een afkortingstag en geeft de gerenderde uitvoer een iets kleiner uiterlijk en gevoel dan de omringende tekst.
Adressen (met behulp van de tag) en blokkoersen (met behulp van de tag) hebben ook geen wijzigingen in de CSS- of basisregels tussen v2 en v3 van het framework.
De laatste paar tags die in de typografische categorie blijven, zijn onder meer , gebruikt om een inline codevoorbeeld te maken. Nogmaals, dit is op geen enkele manier veranderd, met het beoogde gebruik nog steeds voor codevoorbeelden die in overeenstemming zijn met de reguliere lichaamstekst.
Voor codevoorbeelden (of iets dat platte tekst is) dat moet worden opgemaakt volgens indentatie en regelterugloop, moet u nog steeds de label; opnieuw is de vormgeving hier niet veranderd van v2, en de lay-out met deze tag moet zich nog steeds gedragen zoals verwacht.
Het laatste typografische element is de toevoeging van een nieuw element genaamd .
Het doel van deze nieuwe tag is om tekst op een manier weer te geven die aangeeft dat de gebruiker de informatie op de een of andere manier in de computer moet invoeren, meestal door deze in te typen.
Bijvoorbeeld:
Open een opdrachtprompt door te typen cmd in het vak en klik op de button markt 'Uitvoeren', wanneer het opent type in myprogram en druk op Enter, waarna de app moet worden uitgevoerd
Welke in een HTML-document wordt weergegeven, moet er ongeveer als volgt uitzien:
Over het algemeen zijn de normale lijstelementen waaruit bestaat list-ongestijlde, list-inlinesamen met de dl-horizontalklassen voor definitielijsten blijven ook ongewijzigd in BS3 en hebben hetzelfde gedrag als in BS2.
Er zijn echter enkele wijzigingen in de elementen in de lijst, maar omdat deze zich voordoen met de gespecialiseerde klassen die worden gebruikt om menu's en navigatielijsten te maken, zullen we die bespreken wanneer we de wijzigingen aan de navigatie-elementen in de volgende zelfstudie in de reeks behandelen.
Tabellen worden nog steeds gestyled zoals ze waren in BS2 door een standaard te maken Deze opmaak zou u het volgende moeten geven: Net als bij BS2, de klassen om de optionele stijlen toe te voegen aan een tabel- Deze code geeft u bijvoorbeeld een tabel met een buitenste rand en afwisselende kleuren op elke tabelrij. Een ding om op te merken is echter dat tabelstriping nu de De rest van de tabelklassen voor het kleuren van uw tabelrijen zijn enigszins gewijzigd. Allereerst is er een nieuwe klasse genaamd De resterende contextuele klassen, zoals BS2, zijn ontworpen om de tabelrijen te markeren om verschillende omstandigheden te laten zien en zijn hetzelfde, behalve één kleine wijziging. De klassenaam die een gevaarlijke of negatieve actie vertegenwoordigt, is hernoemd naar Als het wordt weergegeven, ziet het er ongeveer zo uit: Er zijn twee nieuwe toevoegingen aan de klassen die worden gebruikt om tabellen te ondersteunen. Ten eerste is er een nieuwe responsieve klasse die rekening houdt met de grootte van uw rastersysteem en verticale verticale schuifbalken of een opnieuw uitgetekende tabel biedt voor weergave op verschillende formaten. Ten tweede is er het vermogen om de hiervoor genoemde gekleurde rijklassen op individuele cellen te gebruiken in plaats van alleen hele rijen, zoals het geval was in BS2. Als u de kleurklassen op celniveau wilt gebruiken, hoeft u alleen de klassen aan de persoon toe te voegen Deze code zou in het volgende moeten resulteren: De laatste tafel gerelateerde toevoeging is een klasse genaamd Wanneer deze nieuwe klasse wordt gebruikt op een scherm van meer dan 768 pixels (dat wil zeggen, elke weergave met een andere classificatieklasse dan Net als bij BS2 hebben alle normale formulierelementen standaard een minimum markup waarmee ze een basisstijl krijgen. Dit betekent dat simpelweg het markeren van een normale formuliertag en bijbehorende besturingselementen uw formulier de standaard Bootstrap-uiterlijk geeft. Neem het volgende voorbeeld: Als we dit voorbeeld in een browser weergeven, zien we dat we een redelijk goede uitvoer krijgen zonder extra klassen toe te voegen, zoals je kunt zien in de volgende afbeelding: Notitie: Sinds het vorige voorbeeld is geschreven, is er een kleine update geweest van de BS3-code. Als u het voorbeeld probeert, zoals hier geschreven, zal de uitvoer waarschijnlijk niet lijken zoals verwacht. De verandering die is aangebracht in BS3 lijkt nu te betekenen dat het eenvoudig markeren van een formulier zonder BS3-klassen niet het effect heeft dat het formulier een consistent uiterlijk krijgt. Ik heb hier het voorbeeld verlaten, omdat het instemt met de informatie die nog steeds aanwezig is op de documentatie-site en als zodanig nog steeds het officiële advies van de raamwerkauteurs lijkt te zijn. Zoals ik in de migratiesectie vermeldde, waren de klassen en componenten rond HTML-formulieren enkele van de grootste verliezen bij het veranderen van klassen, maar dit is om een goede reden. Vóór BS3 waren veel van de klassen die voor formulieren werden gebruikt, erg smal - er waren individuele klassen voor veel individuele doeleinden, in plaats van een enkele klasse die vele bases omvatte. Er waren bijvoorbeeld afzonderlijke klassen om de alignementen van selectievakjes en keuzerondjes af te handelen en er waren afzonderlijke klassen om invoervakken en tekstgebieden te verwerken met betrekking tot hun rijuitlijning.. In BS3 zijn veel van deze klassen verwijderd en zijn nu allemaal opgerold onder een kleiner aantal klassen en elementen. Ons vorige voorbeeld nemen en de aanbevolen opmaak toevoegen zoals wordt weergegeven in de BS3-documentatie, geeft ons het volgende: Extern, als u deze code rendert, ziet u geen verschil voor de uitvoer gegenereerd voor steekproef 18. Intern kan Bootstrap echter nu individuele elementen veel eenvoudiger vinden en bewerken dan voorheen mogelijk was. In BS2 was er geen vereiste om besturingselementen te groeperen, tenzij u met de automatische validatieklassen wilde werken. Er is nog steeds geen absolute vereiste om ze te gebruiken, maar daarmee kan BS het formaat wijzigen en de dingen correct herpositioneren bij gebruik van het raster (naast vele andere dingen). U zult ook merken dat elk besturingselement nu slechts één exemplaar heeft Merk ook op dat de formuletag zelf nu een heeft Ten slotte, als je naar de Helaas is er nog steeds een gebied in de ondersteuning voor formulieren die ontbreken - het besturingselement voor het uploaden van bestanden. Net als bij BS2 is dit te wijten aan het feit dat beveiliging in alle huidige uitsneden van browsers de mogelijkheid beperkt om bestandsinvoerbesturingselementen stijl te geven zodat deze overeenkomen met de rest van de beschikbare invoerbesturingselementen. Zoals ik in het vorige boek al heb vermeld, zijn er echter nog steeds externe toevoegingen die dit gebied omvatten, en omdat je nu je eigen uploadsysteem kunt maken met behulp van de HTML5-klassen, heb je strikt genomen geen bestandsupload nodig controle - u kunt uw eigen produceren. In BS2 waren er een aantal specifieke formuliertypen zoals de De In het voorbeeld van het vorige codevoorbeeld toevoegen De Notitie: In de moedige nieuwe wereld van HTML 5 is het belangrijker dan ooit om invoerelementen correct te markeren met een bijbehorend label. Omdat kansarme gebruikers mogelijk hulpmiddelen gebruiken om hen te helpen, zal het niet verstrekken van de benodigde stukjes om deze hulpmiddelen correct te laten werken, in de toekomst als een slechte zaak worden gezien, en bedrijven die ze verlaten, kunnen hiervoor worden gemeden. Maar maak je geen zorgen: BS3 heeft je gedekt. Als u beslist dat u geen labels in uw formulieren wilt, kunt u ze markeren met een optionele klasse, Als u de code van dit voorbeeld in uw browser weergeeft, moet deze er als volgt uitzien: Zoals je kunt zien aan de hand van de code in voorbeeld 20, is de extra opmaak niet zo veel meer, en het meeste bestaat alleen om de kolommen correct in te stellen, zodat alles goed past. De belangrijkste punten om op te letten in steekproef 20 zijn: Voor de rest van de klassen en bijbehorende delen in de sectie formulieren van BS3 is niets anders dan de tot nu toe genoemde klassen veranderd. Vanuit het gezichtspunt van de daadwerkelijke toepassing, voert u echter nu invoerbesturingselementen in moet een correct type erop hebben om gestyled te worden. Dit betekent dat je minimaal minstens moet hebben Het wordt echter sterk aanbevolen dat u de juiste typen gebruikt. Zoals u snel zult zien als we bij validatiegroepen komen, zal het hebben van het juiste type de meeste validatieactiviteiten toestaan om correct te werken zonder uw opmaak te wijzigen. Selectievakjes en keuzerondjes, zoals BS2, worden standaard gestapeld. Als u wilt dat ze verticaal over het scherm worden weergegeven, moet u de Het weergeven van voorbeeld 21 in uw browser moet er ongeveer als volgt uitzien: Select- en multiselectievakjes zijn gemarkeerd met standaardstijlen, gewoon door de elementen te gebruiken zoals ze zijn; dit is geen verandering ten opzichte van BS2, waar de opmaak en stijl van deze elementen identiek is. Een nieuwe stijl die is geïntroduceerd in BS3 is de statische besturingsstijl. In BS2 moest u vaak een uitgeschakelde formuliercontrole gebruiken om statische formuliergegevens weer te geven die niet konden worden gewijzigd. BS3 verandert dit door een Wanneer dit wordt weergegeven in de browser, produceert dit een normale formulierlay-out, waarbij het statische besturingselement duidelijk is gemarkeerd als niet-bewerkbaar of eruit ziet als een invoerbesturingselement, zoals de volgende afbeelding laat zien: De uitgeschakelde stijl van formulierbesturingselementen is nog steeds gemarkeerd en op dezelfde manier gebruikt als in BS2, simpelweg door het kenmerk "uitgeschakeld" aan het invoerelement toe te voegen zoals het volgende laat zien: Dit zorgt voor de klassieke functie voor uitgeschakeld en gearceerd controle, zoiets als het volgende: Als u de Het laatste dat ik wil vermelden terwijl ik het over formulieren heb, zijn de validatie- en focusklassen. Zoals ik eerder heb opgemerkt, helpt het toevoegen van de juiste invoertypen in HTML5-elementen u echt als het gaat om het gebruik van de validatieklassen. Waarom is dat? Naast speciale klassenamen en stijlen die u kunt gebruiken, haken de validatieklassen ook de nieuwe HTML5-pseudo-elementen zoals Dit betekent dat als u een tekstvak markeert als Als dit niet het geval is, of u heeft een andere manier om uw validatie te laten werken, dan kunt u eenvoudig de Als u deze code in uw browser weergeeft, ziet u ongeveer het volgende: Aandachtspunten zijn dat ik de klassen aan de formuliergroepen heb toegevoegd om een statische weergave te produceren; U moet echter ook proberen het formulier met de juiste invoertypes te markeren. Ik heb ontdekt dat browser-ondersteuning op de pseudo-klassen nog steeds een beetje fragmentarisch is, hoewel er geen melding van is in de BS3-documenten, dus ik raad aan dat je ook de klassennamen gebruikt bij het manipuleren van je elementen met behulp van JavaScript. Merk ook op dat de helptekst op blokniveau en op blokniveau de juiste kleur van de groep aanneemt, dus u hoeft kleuren of stijlen hieraan niet afzonderlijk toe te voegen aan de formuliercontrolegroep. Vergeet niet dat de Het laatste dat u moet vermelden voor validatiegroepen, is dat u ook optionele feedbackpictogrammen rechtstreeks in de formulierbesturingselementen kunt opgeven om te helpen met de status. U doet dit door een span-element op te geven per direct na het invoerelement waarmee het zou moeten worden gebruikt. Op dit spanelement worden de gebruikelijke pictogramklassen toegepast (die we in de volgende zelfstudie zullen zien), samen met een klasse van Als we het vorige codevoorbeeld uitbreiden om dit in rekening te brengen en feedbackpictogrammen toe te voegen, is dit hoe het eruit zou moeten zien: Zodra we deze wijzigingen opnieuw weergeven, ziet u het volgende: Deze tutorial staat voor een hoofdstuk van Bootstrap 3 Shortlyly, een gratis eBoek van het team van Syncfusion.arrangement, en vervolgens een
tafelklasse naar de markup. Net als bij BS2 moeten tabellen altijd worden gemaakt met het volledige bereik van ,
, en HTML-elementen in het volgende voorbeeld laten zien:
Col A Col B Col C Val A Val B Val C Val A Val B Val C 
Rooster gestreepte, Rooster grenst, table-hover, en Rooster gecondenseerde-werk precies hetzelfde als in BS2; deze extra klassen worden toegevoegd als secundaire klassen aan de hoofdtabelklasse op het tabelelement zelf. : N-kind pseudo-selector, wat betekent dat het niet meer in IE8 of eerder zal werken zonder een poly-fill of andere oplossing om te helpen. actief. Vóór BS3, de actiefklasse was niet beschikbaar op alle elementen, maar voornamelijk alleen op navigatie- en knopelementen. Vanaf BS3 kan het nu worden toegepast op a element om die rij als een gemarkeerde rij weer te geven, die standaard een lichtgrijs is. Gevaar. In BS2 werd de rode klasse genoemd fout. Anders dan dat, worden de klassen op dezelfde manier toegepast op de element zoals de volgende code laat zien:
Klasse Col B Col C Actief Val B Val C Succes Val B Val C info Val B Val C Waarschuwing Val B Val C Gevaar Val B Val C 
of elementen als volgt:
Klasse Col B Col C Val A Val B Val C 
table-responsieve, welke je kunt gebruiken door het toe te passen op een als volgt:
Col A Col B Col C Val A Val B Val C * -XS- *), dan zal de tabelweergave zich gedragen als een normale bootstrap-responsieve tabel. Als de tabel echter wordt weergegeven op een apparaat dat een doelwit is * -XS- *klasse en is minder dan 768 pixels, de container zal worden gewijzigd zodat een verticale scroll beschikbaar is, waardoor de hele tabel naar links en rechts kan worden verplaatst zonder de rest van de pagina te beïnvloeden. 
Uitvoer van codevoorbeeld op een apparaat met een breedte van meer dan 768 pixels
Uitvoer van codevoorbeeld op een apparaat met een breedte van minder dan 768 pixelsFormulierwijzigingen
vorm-controlklasse toegewezen, in plaats van veel verschillende gericht op verschillende aspecten. roltoegewezen. Dit wordt, behalve dat het overal goede praktijken is, nu afgedwongen door BS3 om te helpen met aria-rollen en -standaarden die het gebruik van web-apps door mensen met een handicap begeleiden.. tag met a help-blok, je zult merken dat dit nu ook in alle gevallen wordt gebruikt voor inline-formuliertekst, terwijl we in BS2 een aantal verschillende klassen hadden, zoals form-info. zoekformulier; onder BS3 zijn al deze opgerold in drie hoofdtypen. Ten eerste hebt u het standaardformulier; zoals we hebben gezien, is dit een normale vorm zonder dat er extra klassen aan de formuliertag worden toegevoegd. De twee andere typen vormen zijn -vorm inlineen horizontale vorm-. -vorm inlineklasse is ontworpen voor formulieren op kleine plaatsen met een beperkte hoogte, zoals menu- en navigatiebalken. Een woord van waarschuwing: alle invoerelementen in deze klasse en de andere formuliertypen hebben standaard een standaardgrootte van 100 procent, dus als u het formulier nodig hebt om slechts een kleine hoeveelheid ruimte op te nemen (met name in de navigatiebalkformulieren), moet u handmatige formaten op de afzonderlijke bedieningselementen plaatsen. -vorm inlineof horizontale vorm-verander op zijn beurt uw basisvormlay-out om er als volgt uit te zien: 
Formulier geproduceerd door vorig codevoorbeeld met de form-inline-klasse toegevoegd aan de formuletag.horizontale vorm- class wordt gebruikt om normale top-down-formulieren te maken met invoerbesturingselementen met bijbehorende labels links ervan, in plaats van daarboven, zoals de standaardvorm doet. Houd er echter rekening mee dat, om horizontale vormen correct te laten werken, u een kleine extra opmaak aan het formulier in het algemeen moet toevoegen, zoals in de volgende voorbeeldcode wordt getoond. sr-only. Als u deze klasse toevoegt, voorkomt u dat het label of de bijbehorende Help-tekst zichtbaar wordt in uw document, maar zorgt u ervoor dat het is gemarkeerd op een manier die zichtbaar is voor schermlezers en andere soortgelijke apparaten of software.
Uitvoer weergegeven uit vorig codevoorbeeld, waarbij ons formulier is gemarkeerd als horizontaal.
Besturing labeltoegevoegd. Dit is niet vereist voor de andere formuliertypen en BS2 negeert het eenvoudigweg. horizontale vorm-wordt toegepast op de buitenste formuliertag. type = "tekst"voor BS3 om zijn magie te doen. checkbox-inlineen radio-inlineklassen als volgt: 
form-control-statischeklasse die kan worden toegepast op individuele besturingselementen in plaats van de reguliere vorm-control, zoals de volgende code laat zien: 
invalideattribuut aan een veldset die een formulier omgeeft, worden alle bedieningselementen in die groep tegelijkertijd uitgeschakeld met dezelfde stijl. Dit is iets dat niet gebeurde in BS2 - je moest in plaats daarvan elke individuele controle markeren. focus:, fout:, en anderen. type = "email", en plaats er dan geen e-mailadres in bij het indienen, de browser moet automatisch het veld rood voor u markeren. heeft-succes, heeft-waarschuwing, en heeft foutenklassen in uw formuliergroepen, zoals de volgende code laat zien: 
vorm-groepsecties kunnen ook al het andere gebruiken dat we tot nu toe hebben genoemd, om formulierelementen naar behoefte uit te schakelen, in te schakelen en te vergroten of verkleinen. form-control-feedback. Deze moet achter het invoerbesturingselement worden geplaatst, en vóór elke andere opmaak in de invoergroep, vanwege de manier waarop het besturingselement wordt verplaatst om het in het besturingselement weer te geven. Nadat u de reeks hebt toegevoegd, moet u ook een klasse toevoegen heeft-feedbackin de lijst met formuleklassen naast de andere heeft-xxxxxklassen die worden gebruikt om de validatiestatus te tonen. 
Accentsconagua