Share
In de vorige tutorial in onze serie over Bootstrap 3, hoorde je enkele van de CSS-functies die in versie 3 zijn veranderd. In deze tutorial maken we dat uit door te kijken naar andere gewijzigde functies, zoals afbeeldingen en knoppen.
De meest opvallende wijziging in de klassen die wordt gebruikt om knoppen in BS3 te stijlen, is de standaardstijl. Onder BS2, simpelweg toevoegen van de BTNklasse naar een invoerelement van de typeknop, of naar een ankertag, zou de besturing de standaardknop eruit laten zien en aanvoelen.
Vanaf BS3 moet je nu expliciet toevoegen btn-default; gewoon toevoegen BTNop zichzelf zal nu geen effect meer hebben.
De tweede belangrijkste verandering is het hernoemen van enkele van de basisklassen. specifiek, btn-erroris hernoemd naar btn-gevaarzodat het naamschema overeenkomt met de andere gelijknamige klasseveranderingen en uniformiteit in de Bootstrap-basisbibliotheek brengt.
Anders dan dat, blijven de klassen van de basisknoppen ongewijzigd, zoals het volgende codevoorbeeld laat zien:
Wanneer weergegeven in de browser, ziet u de normale platte knop zien die de BS3 nu heeft voor besturingselementen:
Er zijn een paar nieuwe klassen voor het knopelement toegevoegd om uniformiteit in de klassen voor het sorteren van het raster te brengen. Deze klassen zijn btn-lg, btn-sm, en btn-xs; er is geen btn-md, omdat de middelgrote knop de standaardgrootte is die wordt gebruikt als er geen klasse is opgegeven.
Het volgende codevoorbeeld toont alle knopstijlen in verschillende grootten:
Wanneer dit in de browser wordt weergegeven, zou dit codevoorbeeld u de volgende uitvoer moeten geven:
Wanneer u de klas toevoegt btn-blocknaar een knop of ankerelement dat is opgemaakt met een van de vorige knoppenklassen, die knop wordt uitgerekt om 100 procent van de beschikbare ruimte te vullen. Dit is handig bij het produceren van dialoogvensters en dimensioneringsbesturingselementen met het BS3-rastersysteem, omdat u hiermee specifiek op maat gemaakte knoppen (en andere elementen) kunt gebruiken om een goede balans te behouden in uw formulierontwerpen.
In de meeste gevallen hoeft u de actieve status van een knop niet zelf in te stellen, maar als u dat wel doet, kunt u eenvoudig de actiefklasse voor elk element dat is gemarkeerd met de knopklassen. Actiefin het algemeen (op de element tenminste) gebruikt meestal de :actiefpseudo-selector om de stijl van de knop te veranderen. Het toevoegen van de actiefklasse dwingt de knop echter om de actieve status ervan weer te geven.
Notitie: Als u overweegt de actieve status te gebruiken om plakknoppen te maken, moet u er rekening mee houden dat we in de volgende zelfstudies knoptoestanden bespreken met behulp van de beschikbare component en JavaScript-voorzieningen. BS3 biedt zo'n plakkerige knop met behulp van de extra functies die beschikbaar zijn in deze faciliteiten, dus je hoeft geen eigen plakkerige knoppen te maken die actief zijn in de meeste omstandigheden.
U kunt ook uw knoppen uitschakelen en deze markeren als inactief met dezelfde "disabled" klassen en attributen die we eerder hebben besproken met de wijzigingen in formulierelementen.
De volgende code toont knoppen die zijn gemarkeerd om er actief uit te zien en in de uitgeschakelde staten:
Houd er echter rekening mee dat in het geval van ankerknoppen, de invalideelement / klasse doet niet schakel de link uit; om ervoor te zorgen dat de ankervink voor uitgeschakelde staat niet vuurt, moet u aangepast JavaScript gebruiken.
Om deze reden raadt het BS3-team u aan om de element waar mogelijk om knoppen te markeren, en gebruik alleen ankertags in specifieke omstandigheden.
Laten we ook het onderwerp "idempotence" en het belang van het gebruik van knoppen boven ankers niet vergeten. Over het algemeen is een ankerlink geschikt als de bestemming een get-aanvraag is en het meerdere keren maken van de link geen problemen veroorzaakt door herhaalde activering; gebruik anders een knop.
CSS-wijzigingen, waar de eenvoudige afbeeldingstag betreft, zijn niet zo verstrekkend als op andere plaatsen in BS3. Voorheen waren de afbeeldingen standaard niet responsief en zoals met veel dingen in BS2, moest je de optionele responsieve klassen toevoegen om overal goed te kunnen reageren..
Helaas waren de dingen nog steeds niet perfect, zelfs nadat u de optionele responsieve klassen had toegevoegd; veel mensen noemden problemen met pagina's waarin Google Maps werd gebruikt, onder andere.
BS3 verandert dit allemaal. Nu zijn afbeeldingen standaard volledig responsief met behulp van een img-responsievevoor wie dan ook
Anders dan dat, is de enige andere verandering in de afbeeldingensectie de naam van de img-polaroidclass (gebruikt voor het genereren van miniaturen) voor img-thumbnail, zodat het overeenkomt met andere vergelijkbare hernoemingen in de bibliotheek.
De BS2-klassen ik heb huisarresten img cirkelnog steeds werken zoals ze eerder deden, en gaven een miniatuureffect met cirkelvormige en afgeronde rechthoeken.
Ten slotte komen we bij de wijzigingen die betrekking hebben op dingen die niet echt in een specifieke categorie passen.
Onder de typografieklassen in BS2, werd u oorspronkelijk geïntroduceerd in een reeks kleurklassen die worden gebruikt om de kleur van een tekstelement in te stellen op dezelfde merkkleuren die worden gebruikt in andere elementen in het kader.
BS3 gaat nog een stap verder en introduceert het concept van dezelfde kleuren die ook worden gebruikt voor contextuele achtergronden.
In dit geval zijn de achtergronden een lichtere variant, zoals gebruikt in panelen en waarschuwingsvakken elders. Er is een extra bonus: als u deze contextuele kleurklassen op ankertags gebruikt en al het andere dat standaard een zweefteken heeft ingesteld, worden de kleuren automatisch iets gedimd om aan te geven dat ze zijn overgeheveld.
Net als bij de naamgeving in andere op kleuren gebaseerde klassen, zijn de hier beschikbare klassen -Text gedempt, text-primaire, text-succes, text-info, text-waarschuwing, en text-gevaarvoor alinea-, span- en andere inline- of blokgebaseerde tekstelementen.
Voor achtergrondkleuren zijn de klassenamen bg-primair, bg-succes, bg-info, bg-waarschuwing, en bg-gevaar.
De volgende code toont een voorbeeld van het gebruik ervan:
Deze paragraaf gebruikt de gedempte tekstklasse, meestal gereserveerd voor iets dat niet echt belangrijk of minder prominent is.
Deze alinea gebruikt de primaire tekstklasse, meestal gereserveerd voor iets belangrijks of standaards en zichtbaar.
Deze paragraaf maakt gebruik van de succestekstklasse, meestal gereserveerd voor een actie die net is geslaagd of iets goeds en felicitaties.
Deze paragraaf gebruikt de informatietekstklasse, meestal gereserveerd voor informele berichten, zoals een achtergrondtaak die net is voltooid of een nieuw bestand beschikbaar is.
Deze paragraaf maakt gebruik van de waarschuwingstekstklasse, meestal gereserveerd voor iets dat gevaarlijk kan zijn of dat aandacht nodig heeft, maar een tijdje kan wachten.
Deze paragraaf gebruikt de gevaarstekstklasse, meestal gereserveerd voor iets heel belangrijks, of iets dat echt aandacht nodig heeft om er naar toe te trekken.
Deze alinea gebruikt normale tekst, maar met een primaire achtergrondkleur om u te laten weten dat wat u ziet de standaardstatus is.
Deze paragraaf gebruikt normale tekst, maar met een achtergrondkleur met succes om u te laten weten dat wat u ziet allemaal goed is.
Deze paragraaf gebruikt normale tekst, maar met een achtergrondkleur om u te vertellen dat wat u ziet informatief is en moet worden gelezen, maar niet altijd gehandeld.
Deze paragraaf gebruikt normale tekst, maar met een waarschuwende achtergrondkleur om u te laten weten dat wat u ziet problemen kan veroorzaken waarvan u op de hoogte moet zijn.
Deze paragraaf gebruikt normale tekst maar met een gevaarlijke achtergrondkleur om u te vertellen dat wat u ziet, nu nodig is om er aandacht aan te schenken.
Een ding waarvan werd opgemerkt dat het nodig was in BS3, en niet aanwezig is in BS2, is een speciale taak dakjeklasse voor drop-down indicatoren op knoppen en andere schermmeubilair.
U kunt dit nu op uw eigen elementen gebruiken door een klassenaam toe te voegen Een andere nieuwe toevoeging in BS3, hoewel het niet echt een klasse is, verdient nog steeds een vermelding: het dialoogvenster is dichtbij. Net als de Het volgende codevoorbeeld toont een voorbeeld van zowel de Deze tekst wordt weergegeven in een div-element met een eigen pictogram ernaast. Net als in BS2, de quick float utility-klassen Andere nieuwe klassen zijn de We hebben al gezien dat een nieuwe klasse werd genoemd Als u een paginatitel definieert met een afbeeldingbanner, kan een normale schermlezer niet vertellen wat de tekst in de afbeelding zegt. Lange tijd hebben veel auteurs een hack genaamd beeldvervanging gebruikt om dit te omzeilen. Het vervangen van afbeeldingen werkt door de afbeeldingsbanner in een Wat dan gebeurt, is dat de beeldbanner visueel wordt gezien door mensen met een goed gezichtsvermogen, maar degenen die een schermlezer gebruiken, horen de lezer de eigenlijke tekst in de beeldbanner zeggen. BS3 biedt nu een klasse genaamd Uiteindelijk komen we bij de laatste van de laatste in het gedeelte CSS-wijzigingen. Wat zou een responsief framework voor webontwerp zijn zonder bruikbaarheidsklassen om u te helpen uw responsieve lay-outs te beheren? "Maar wacht even, we hebben dat met rasters behandeld," hoor ik u zeggen, en ja, dat hebben we. Maar BS3 heeft nog een truc in petto, die in alle eerlijkheid was aanwezig in BS2, maar werkte niet echt zo goed. Dus wat is deze extra magie? Laat me je voorstellen aan de reagerende zichtbaarheidsklassen. Kortom, wat deze juweeltjes doen, is dat je delen van je gebruikersinterface kunt wisselen en wijzigen, afhankelijk van je raster en weergavegrootte. Laten we ons bijvoorbeeld voorstellen dat u een lijst met items voor e-mailinboxen hebt en wanneer deze op een desktopcomputer wordt bekeken, heeft elk item een voorbeeld ernaast, net als in een klassieke toepassing voor het lezen van e-mail. Iets als het volgende: Nu is dit geweldig totdat je het op een mobiel apparaat past, waar je absoluut het preview-paneel wilt verbergen en alleen de e-maillijst wilt laten staan. Normaal gesproken wordt een taak als deze uitgevoerd met een klein beetje JavaScript om de zichtbaarheid van het element te wijzigen door de zichtbare instellingen van het element te wijzigen. BS3 heeft een ingebouwde oplossing met behulp van CSS-klassen waarmee u gemakkelijk dergelijke situaties kunt verwerken. Neem het volgende stukje code: Lieve persoon, Blah blah blah blah blah blah blah Als u dit in uw browser weergeeft, zou u iets moeten krijgen dat op het volgende lijkt: Als u echter de grootte van uw browser wijzigt naar de grootte van het mobiele scherm, ziet het er een beetje vreemd uit: Dit kan voor sommigen werken, maar over het algemeen is het een slecht idee. Wat gebeurt er wanneer u 100 ongelezen e-mails hebt en telkens naar de onderkant van de weergave moet scrollen om het voorbeeld te lezen? Neem de hoofdpreview Als u vervolgens uw browser ververst en de grootte ervan aanpast, zou u dat moeten zien Net als bij het rastersysteem, zijn er vier verschillende grootten en zijn er klassen om te verbergen en zichtbaar te maken. De zichtbare klassen maken het element in kwestie zichtbaar enkel en alleen op de opgegeven schermgrootte en de verborgen klassen maken het betreffende element verborgen enkel en alleen op de opgegeven schermgrootte. De klassenamen zijn als volgt: De breedten van de apparaten en de bijbehorende triggerpunten zijn dezelfde als die in het rastersysteem in het algemeen worden gebruikt met Er zijn twee laatste klassen die in deze categorie worden gebruikt om u te helpen bij het gebruik van op display of op afdrukken gebaseerde lay-outs. Je kunt gebruiken Deze tutorial staat voor een hoofdstuk van Bootstrap 3 Shortlyly, een gratis eBoek van het team van Syncfusion.dakjenaar je buitenste container-a of dakje, dit was aanwezig in BS2, maar was niet beschikbaar om afzonderlijk van het bedoelde gebruik te worden gebruikt in modale dialogen en waarschuwingsbalken. Vanaf BS3 kun je het echter prima alleen gebruiken. dakjeklasse en close cross in generieke mark-up: 
pull-linkeren pull-rechtsnog steeds bestaan, maar ze zijn nu verbonden door center-block, die eenvoudig beide marges automatisch maakt en het element in zijn ouder centreert, en Clearfix, die alle drijvers die u gebruikt opruimt, waardoor de normale documentstroom wordt hersteld. laten zien, verborgen, en onzichtbaarklassen. Laten zienspreekt vrij veel voor zichzelf, maar wat is het verschil tussen de laatste twee? Verborgenvouwt fysiek de ruimte in die wordt gebruikt door het element, dus als je het in een div met volledige hoogte hebt, klapt die div dan in tot de kleinste hoogte. Maar als je het gebruikt onzichtbaar, het element behoudt zijn ruimte (en neemt ook nog steeds zijn plaats in in de elementstroom), maar het verdwijnt uit het zicht. sr-onlyis geïntroduceerd om een blok te markeren als zichtbaar voor schermlezers en niets anders. Er is nu een andere klasse zoals deze die wordt gebruikt voor grafische koppen. H1of een andere tag van het standaardtype, de naam erin als een duidelijke tekst naast de afbeeldingbanner plaatsen en vervolgens CSS gebruiken om de tekst van het scherm te verplaatsen. text-hideom dit te vergemakkelijken. Een eenvoudig voorbeeld volgt:
Een grafische afbeelding gebaseerde titel
Uitgang gegenereerd door codevoorbeeld in een normale pc-browser
Voorbeeld lay-out e-mailtoepassing
E-mail 1 (1/1/11) Email 2 (1/1/11) Email 3 (1/1/11) Email 4 (1/1/11) E-mail 5 (1/1/11) E-mail 6 (1/1/11) Email 2: Ontvangen (1/1/11)
To: Een persoon
Mock-up van e-mailtoepassing geproduceerd door vorig codevoorbeeld
Mock-up van e-mailtoepassing in een gewijzigde weergavehidden-sm, als volgt: 
Mock-up model van e-mailtoepassing, van grootte veranderd, maar met verborgen klassen toegevoegd
zichtbare-xs: Zichtbaar maken op extra kleine schermen zichtbare sm: Zichtbaar maken op kleine schermen zichtbare md: Zichtbaar op middelgrote schermen zichtbare-lg: Zichtbaar maken op extra grote schermen
verborgen-xs: Verberg op extra kleine schermen hidden-sm: Verberg op kleine schermen hidden-md: Verberg op middelgrote schermen hidden-lg: Verberg op grote schermen -xsvoor tablets met een palmformaat en kleiner, -smvoor het bedekken van gemiddelde tot grote tabletten, -mdvoor de meeste desktopcomputers, en -lgvoor breedbeeld-desktops. zichtbare afdruken hidden-printop dezelfde manier als de op grootte gebaseerde klassen hierboven, maar deze keer maakt een element zichtbaar en onzichtbaar wanneer een pagina naar de printer wordt verzonden. 
Accentsconagua