✅ Bootstrap Framework avancerad webbgränssnittsutveckling

Innehållsförteckning

Tabeller och rader med effekter
Flernivåmeny med Css Bootstrap
Kolumner och block på sidan
Hur man anpassar Bootstrap för att ändra stilar och funktioner

I en annan handledning förklarades en introduktion till Bootstrap -användargränssnitt och även en handledning om hur man utformar ett webbprojekt med Bootstrap 2.0, i detta kommer vi att gå mot de gränssnitt och element som används mest i webbutveckling.
Vi kan ladda ner Bootstrap och lägga den i en katalog på vår webbplats eller använda den genom att länka den till ditt onlinebibliotek.
Bootstrap är ett ramverk med öppen källkod och öppna för snabbare och enklare webbutveckling.
Genom att söka kan vi hitta många bidrag från css -communityn och anpassade komponenter och designmallar som andra användare har gjort och göra dem tillgängliga, det finns många komponenter för att skapa navigeringsfält, modala fönster och popup -fönster, bildkaruseller, menyer och många andra, liksom som JavaScript- och Jquery -plugins för att validera formulär och andra funktioner

Tabeller och rader med effekter

Bootstrap har CSS -stilar och effekter redan programmerade som vi kan använda till exempel för att ändra färgen på raderna i en tabell och när musen passerar över den.

Koden kommer att vara följande:

Tabell och rader med effekt
 

 
 Fordon  Källa  Tillstånd  Pris 

 

 

 
 Fiat 500  Madrid  Begagnade  9690€ 

 
 Honda överenskommelse  Barcelona  Begagnade  14500€ 

 
 Renault laguna  Toledo  Begagnade  2800€

Fordon	Källa	Tillstånd	Pris
Fiat 500	Madrid	Begagnade	9690€
Honda överenskommelse	Barcelona	Begagnade	14500€
Renault laguna	Toledo	Begagnade	2800€

Därefter skapar vi en meny med undermeny med endast Bootstrap CSS:

FÖRSTORA

Koden kommer att vara följande:


Flernivåmeny med Css Bootstrap
Kunds försäljningsadministratör 

Systemet
Användare
inställningar

Behörigheter
Servrar

Vps -server A
Vps -server B


Resursförbrukning
Säkerhetskopiering

Vi förklarar strukturen och dess fördefinierade klasser. Klassen definierar storleken på webben som finns som standard i Bootstrap.

 .container {bredd: 1170px; }

Följande radklasser ger en vänster och höger marginal på hela sidan:

 .rad {; marginal -höger: -15px; }

I rullgardinsmenyklassen finns redan Bootstrap och btn btn-primära knappklasser. Vi lägger till undermenyn och nivåklasserna för att kunna generera undermenyn. Kom ihåg att klasser har hierarkier, så om vi heter samma klass som vi har i Bootstrap och lägger till något attribut till den, gäller den senaste deklarationen.
Detta är fallet där vi lägger till ett skift vänster -attribut trots att klassen redan är definierad i bootstrap.min.css

 .dropdown-meny {vänster: 150px; }

Css och jquery popup med html -innehåll
Vi använder popover -funktionen som visar en popup när en länk svävar med musen och innehållsvariabeln har html att visa.
Vi tar föregående tabell och lägger till en kolumn för ett tekniskt blad.
I varje länk kommer vi att ha följande mening och sedan med id kommer vi att åberopa ett skript.

 
 

 
 Fordon  Källa  Tillstånd  Pris  Foton 

 

 

 
 Fiat 500  Madrid  Begagnade  9690€  Datablad 

 
 Honda överenskommelse  Barcelona  Begagnade  14500€  Datablad

Fordon	Källa	Tillstånd	Pris	Foton
Fiat 500	Madrid	Begagnade	9690€	Datablad
Honda överenskommelse	Barcelona	Begagnade	14500€	Datablad

Om vi har en bred lista kan vi skapa en JQuery -funktion där vi kan skicka dynamiskt innehåll till exempel extraherat från en databas.

Kolumner och block på sidan

Bootstrap är baserad på en bredd på 1200 pixlar, uppdelat i 12 block som täcker 99% av webbens struktur, varje block täcker 8.3333%, motsvarande 100 pixlar och har också ett utrymme på 1 pixel.
Alltid kombinationen av block på samma rad för att lägga till 12 till exempel:
Två block om 3 och ett av 6

Bootstrap -block

Col-md-3 block på 300px.

Col-md-6 block på 600px.

Col-md-3 block på 300px.

800px col-md-8 block.

Nedan lägger vi en blockstorlek 8 som är 800 pixlar:

Dessa block reagerar eftersom de är konfigurerade i Bootstrap css. Här kan vi se ett exempel på hur blocken anpassar sig till en skärmbyte på en mobil enhet.

Hur man anpassar Bootstrap för att ändra stilar och funktioner

För att skapa stilar och funktioner för att vara kompatibla med Bootstrap måste vi använda det som alla andra css- eller js -bibliotek, som en annan ram för projektet, i det här fallet kommer det att användas för design och funktionalitet i användarens webbläsare. Vi bör undvika att reformera de ursprungliga biblioteken, men docka våra egna, så när Bootstrap -utvecklare släpper en uppdatering har vi inga problem med att införliva det nya om vi håller våra ändringar åtskilda.
För att definiera våra egna formatmallar måste vi skapa en ny CSS -formatfil för att definiera våra ändringar utan att det påverkar det ursprungliga css. Låt oss komma ihåg hierarkin, till exempel.
Om i Bootstrap css bootstrap.min.css

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

Och vi vill att den ska ha en kant och sedan i en separat fil mina styles.css, kan vi förklara:

 .borderojo {border: 1px solid red}

Sedan på sidan anropar vi båda filerna

I blocket tillämpar vi det enligt följande:

Col-md-3 block på 300px.

Detta skulle motsvara att deklarera det så här:

 col-md-3 {bredd: 25%; kant: 1px fast röd; }

Om den av någon anledning hade två liknande uttalanden, antar vi

 .borderojo {border: 1px fast röd; } .clientblock {border: 1px fast blå; }
Col-md-3 block på 300px.

Vem som råder är den dom som förklarades sist. Därför kommer blocket att ha en blå kant.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng