Bootstrap Framework geavanceerde webinterface-ontwikkeling

In een andere tutorial werd een inleiding tot Bootstrap-gebruikersinterfaces uitgelegd en ook een tutorial over het ontwerpen van een webproject met Bootstrap 2.0, hierin gaan we naar de interfaces en elementen die het meest worden gebruikt bij webontwikkeling.
We kunnen Bootstrap downloaden en in een directory op onze website plaatsen of gebruiken door het te koppelen aan uw online bibliotheek.
Bootstrap is een open source framework en open voor snellere en eenvoudigere webontwikkeling.
Als we zoeken, kunnen we veel bijdragen vinden van de css-gemeenschap en aangepaste componenten en ontwerpsjablonen die andere gebruikers hebben gemaakt en beschikbaar stellen, er zijn veel componenten om navigatiebalken, modale vensters en pop-ups, afbeeldingscarrousels, menu's en vele anderen te maken, evenals als JavaScript- en JQuery-plug-ins om formulieren en andere functionaliteiten te valideren

Tabellen en rijen met effecten

Bootstrap heeft al CSS-stijlen en effecten geprogrammeerd die we kunnen gebruiken om bijvoorbeeld de kleur van de rijen in een tabel te veranderen en wanneer de muis erover gaat.

De code zal de volgende zijn:

Tabel en rijen met effect
 

 
 
Voertuig
 
Bron
 
Voorwaarde
 
Prijs
 

 

 

 
 
Fiat 500
 
Madrid
 
Gebruikt
 
9690€
 

 
 
Honda-akkoord
 
Barcelona
 
Gebruikt
 
14500€
 

 
 
Renault laguna
 
Toledo
 
Gebruikt
 
2800€
 

 

 

Vervolgens zullen we een menu met submenu maken met alleen Bootstrap CSS:

VERGROTEN

De code zal de volgende zijn:

Menu met meerdere niveaus met CSS Bootstrap
Klanten Verkoop Beheerder 

Systeem
Gebruikers
Instellingen

Rechten
Servers

Vps-server A
Vps-server B


Het verbruik van hulpbronnen
Back-up

We leggen de structuur en de vooraf gedefinieerde klassen uit. De klasse definieert de grootte van het web dat standaard wordt gevonden in Bootstrap.

 .container {breedte: 1170px; } 

De volgende rijklassen zorgen voor een linker- en rechtermarge op de hele pagina:

 .rij {; marge-rechts: -15px; } 

De dropdown-menuklasse wordt al geleverd met Bootstrap en de btn btn-primary-knopklassen ook. We zullen het submenu en de niveauklassen toevoegen om het submenu te kunnen genereren. Onthoud dat klassen hiërarchieën hebben, dus als we dezelfde klasse noemen die we in Bootstrap hebben en er een attribuut aan toevoegen, prevaleert de laatst gemaakte verklaring.
Dit is voor het geval waarin we een shift left-attribuut toevoegen, ook al is de klasse al gedefinieerd in bootstrap.min.css

 .dropdown-menu {links: 150px; } 

Css- en jQuery-pop-up met html-inhoud
We zullen de popover-functie gebruiken die een pop-up weergeeft wanneer een link met de muis wordt geplaatst en de inhoudsvariabele de html heeft om weer te geven.
We nemen de vorige tabel en voegen een kolom toe voor een technische fiche.
In elke link hebben we de volgende zin en dan zullen we met de id een script aanroepen.

 
 

 
 
Voertuig
 
Bron
 
Voorwaarde
 
Prijs
 
Foto's
 

 

 

 
 
Fiat 500
 
Madrid
 
Gebruikt
 
9690€
 
Data papier
 

 
 
Honda-akkoord
 
Barcelona
 
Gebruikt
 
14500€
 
Data papier
 

 

 

 

Als we een brede lijst hebben, kunnen we een JQuery-functie maken waar we dynamische inhoud kunnen verzenden, bijvoorbeeld geëxtraheerd uit een database.

Kolommen en blokken op de pagina

Bootstrap is gebaseerd op een breedte van 1200 pixels, verdeeld in 12 blokken die 99% van de structuur van het web beslaan, elk blok beslaat 8,3333%, wat overeenkomt met 100 pixels en heeft ook een ruimte van 1 pixel.
Altijd de combinatie van blokken in dezelfde regel om 12 toe te voegen, bijvoorbeeld:
Twee blokken van 3 en een van 6

Bootstrap-blokken
Col-md-3 blok van 300px.
Col-md-6 blok van 600px.
Col-md-3 blok van 300px.
800px col-md-8 blok.

Hieronder plaatsen we een blokgrootte 8 die 800 pixels is:

Deze blokken reageren zoals ze zijn geconfigureerd in de Bootstrap-css. Hier kunnen we een voorbeeld zien van hoe de blokken zich aanpassen aan een verandering van scherm van een mobiel apparaat.

Hoe Bootstrap aan te passen om stijlen en functionaliteit te veranderen

Om stijlen en functionaliteiten te creëren die compatibel zijn met Bootstrap, moeten we het gebruiken zoals elke andere css- of js-bibliotheek, als een ander raamwerk van het project, in dit geval zal het worden gebruikt voor ontwerp en functionaliteit in de browser van de gebruiker. We moeten voorkomen dat we de originele bibliotheken hervormen, maar onze eigen bibliotheken docken, dus wanneer Bootstrap-ontwikkelaars een update uitbrengen, zullen we geen probleem hebben om de nieuwe op te nemen als we onze wijzigingen gescheiden houden.
Om onze eigen stylesheets te definiëren, moeten we een nieuw CSS-stijlenbestand maken om onze wijzigingen te definiëren zonder de originele CSS te beïnvloeden. Laten we bijvoorbeeld de hiërarchie niet vergeten.
Als in Bootstrap css bootstrap.min.css

 .col-md-3 {breedte: 25%; } 

En we willen dat het een rand heeft, dan kunnen we in een apart bestand mijn stijlen.css declareren:

 .borderojo {rand: 1px effen rood} 

Vervolgens roepen we op de pagina beide bestanden op

In het blok passen we het als volgt toe:

Col-md-3 blok van 300px.

Dit zou gelijk zijn aan het als volgt declareren:

 col-md-3 {breedte: 25%; rand: 1px effen rood; } 

Als het om de een of andere reden twee soortgelijke uitspraken had, stel dan…

 .borderojo {rand: 1px effen rood; } .clientblock {rand: 1px effen blauw; }
Col-md-3 blok van 300px.

Wie prevaleert, is de straf die het laatst is uitgesproken. Daarom krijgt het blok een blauwe rand.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven