Accentsconagua

Bootstrap 3 bondig componenten van extra veranderde componenten

Web ontwerp
Share

In deze serie over Bootstrap 3 nemen we u mee door alle nieuwe functies in de nieuwste versie van dit populaire framework. In de laatste zelfstudie hebben we gekeken naar enkele wijzigingen in componenten, en deze keer zullen we afronden door te kijken naar wijzigingen in andere componenten, zoals labels, badges, lijstgroepen en panels.

Wijzigingen label en badge

Dit wordt een zeer kort gedeelte, omdat er slechts twee wijzigingen in de labels zijn aangebracht en een grote wijziging in de insignes.

Om een ​​label in BS2 te maken, hebben we het gewoon een label-xxxx klasnaam, waar xxxx staat voor de staat die het label moest uitbeelden. Onder BS3 hebben we nu een tweedelige klassendefinitie en een hernoeming van fout naar Gevaar voor de rode kleurklasse, zodat de naamgeving nu overeenkomt met al het andere, en dat is zo ongeveer alles.

Er zijn ook geen formaatklassen / opties voor deze in BS3, omdat labels de grootte van de omringende container aannemen. Dus als je een maakt met een geschikte labelklasse en verpak deze vervolgens in a

, de maat van dat label zal veel groter zijn dan de rest.

Het volgende codevoorbeeld laat dit zien:

Standaard
 
primair
 
Succes
 
info
 
Waarschuwing
 
Gevaar
Uitgang geproduceerd door codevoorbeeld

Badges hebben daarentegen een grotere verandering ondergaan.

In BS3 hebben badges niet langer contextuele kleurklassen. Dat wil zeggen, er is niet langer een label-succes of label-waarschuwing, zoals er is met de vorige labels en met andere elementen.

Dit betekent dat u badges niet op dezelfde manier kunt kleuren als BSN, en elk label dat u maakt, kan alleen worden weergegeven met de standaard grijze kleur. Nou ja, in ieder geval officieel kan dat niet.

Als u een alert-xxxxx naast een label les op de wordt gebruikt voor uw label, dan krijgt het label de inkleuring van die waarschuwingsklasse, en hoewel dit geen ondersteunde manier is om dingen te doen, werkt het wel, en kunt u de labels gebruiken zoals u deed in BS2.

Als u een standaardlabel wilt markeren, hoeft u alleen maar een toe te voegen label en 'Label-default' klasse tot a , en je bent klaar om te gaan:

Dit is een label
Label geproduceerd door codevoorbeeld

Als u uw labels wilt hacken om de verschillende kleuren te gebruiken, kunt u dit als volgt doen:

normaal Succes info Waarschuwing Gevaar
Uitgang geproduceerd door codevoorbeeld

Een leuke functie die de badge-component nog heeft, is echter het gebruik van de leeg: pseudo-selector, waardoor deze automatisch van weergave verdwijnt als de interne tekst leeg is. Dit helpt bij de interne wijzigingen die zijn ontworpen om te werken aan lijstgroepen en pillelijsten, omdat het nu betekent dat het enorm eenvoudig is om dingen te maken zoals inboxwaarschuwingslijsten, waar de waarden verdwijnen wanneer de inhoud wordt verwijderd. Hier is een voorbeeld:

 
     
  •   42 Postvak IN  
    •  
  •   10000 Spam  
    •  
  •    Loterij wint  
    •
Uitgang geproduceerd door codevoorbeeld

Als u de code bekijkt, ziet u dat de laatste optie in de lijst geen waarde heeft binnen de span-tag, die vanwege de leeg: pseudo-selector, zorgt ervoor dat de browser het niet weergeeft. Echter, de tweede plaats waar je iets erin stopt met behulp van JavaScript of een methode die de DOM kan manipuleren, die badge springt meteen terug in het bestaan ​​zonder een beat te missen. Let ook op het gebruik van de pull-rechts uitlijningsklasse om ervoor te zorgen dat het label aan de rechterkant van het element zit, waardoor alles er mooi uitziet en uitgelijnd.

Wijzigingen lijstgroep

Lijstgroepen zijn een nieuw ding toegevoegd in BS3, ontworpen om de BS2 navigatielijsten te vervangen, en hebben veel meer mogelijkheden dan hun BS2-tegenhanger.

Als je ze eenmaal begint te gebruiken, zul je je realiseren dat lijstgroepen meer op volledig styleable box met lijstitems lijken, en om eerlijk te zijn, het enige wat nodig zou zijn om een ​​volledig styleable list box te maken, zou in feite zijn om ze in hun eigen map te verpakken. div en stel de overloop in om op de juiste manier te scrollen.

Een basislijstgroepcomponent kan worden gemaakt met opmaak vergelijkbaar met de volgende:

     
  • Kaas
    •  
  • Burger
    •  
  • Bun
    •  
  • augurken
    •  
  • Tomaat
    •
Uitgang geproduceerd door codevoorbeeld

Zoals je eerder in het badgesgedeelte hebt gezien, kun je badges aan lijsten en andere objecten toevoegen. Als je ze aan een lijstgroep toevoegt, stellen ze zich perfect op:

     
  • 4Kaas
    •  
  • 2Burger
    •  
  • 1Bun
    •  
  • augurken
    •  
  • 2Tomaat
    •
Uitvoer van codevoorbeeld

De meest opmerkzame persoon denkt misschien: "Ok, dus lijstgroepen zien er goed uit, maar ze zijn nog steeds rechtvaardig