Bootstrap Framework avanceret webinterfaceudvikling

I en anden vejledning blev en introduktion til Bootstrap -brugergrænseflader forklaret og også en vejledning i, hvordan man designer et webprojekt med Bootstrap 2.0, i dette vil vi bevæge os mod de grænseflader og elementer, der mest bruges i webudvikling.
Vi kan downloade Bootstrap og lægge det i et bibliotek på vores websted eller bruge det ved at linke det til dit online bibliotek.
Bootstrap er en open source -ramme og åbne for hurtigere og lettere webudvikling.
Når vi søger, kan vi finde mange bidrag fra css -fællesskabet og brugerdefinerede komponenter og designskabeloner, som andre brugere har lavet og gøre dem tilgængelige, der er mange komponenter til at oprette navigationslinjer, modale vinduer og pop -ups, billedkarruseller, menuer og mange andre, samt som JavaScript og Jquery -plugins til at validere formularer og andre funktionaliteter

Tabeller og rækker med effekter

Bootstrap har allerede programmeret CSS -stilarter og effekter, som vi f.eks. Kan bruge til at ændre farven på rækkerne i en tabel, og når musen passerer den.

Koden vil være følgende:

Tabel og rækker med virkning
 

 
 
Køretøj
 
Kilde
 
Tilstand
 
Pris
 

 

 

 
 
Fiat 500
 
Madrid
 
Brugt
 
9690€
 

 
 
Honda akkord
 
Barcelona
 
Brugt
 
14500€
 

 
 
Renault laguna
 
Toledo
 
Brugt
 
2800€
 

 

 

Dernæst opretter vi en menu med undermenu, der kun bruger Bootstrap CSS:

FORSTØRRE

Koden vil være følgende:

Multilevel menu ved hjælp af Css Bootstrap
Kunders salgsadministrator 

System
Brugere
Indstillinger

Tilladelser
Servere

Vps Server A
Vps Server B


Ressourceforbrug
Sikkerhedskopiering

Vi forklarer strukturen og dens foruddefinerede klasser. Klassen definerer størrelsen på internettet, der som standard findes i Bootstrap.

 .container {bredde: 1170px; } 

Følgende rækkeklasser giver en venstre og højre margin på hele siden:

 .row {; margin -højre: -15px; } 

Dropdown-menuklassen leveres allerede med Bootstrap og btn btn-primære knapklasser også. Vi tilføjer undermenuen og niveauklasserne for at kunne generere undermenuen. Husk, at klasser har hierarkier, så hvis vi navngiver den samme klasse, som vi har i Bootstrap, og tilføjer en attribut til den, er den sidste erklæring, der er gældende.
Dette er tilfældet, hvor vi tilføjer en shift -venstreattribut, selvom klassen allerede er defineret i bootstrap.min.css

 .dropdown-menu {venstre: 150px; } 

Css og jquery popup med html -indhold
Vi vil bruge popover -funktionen, der viser en popup, når et link svæver med musen, og indholdsvariablen har den html, der skal vises.
Vi tager den forrige tabel og tilføjer en kolonne til et teknisk ark.
I hvert link vil vi have følgende sætning, og derefter med id'et vil vi påberåbe et script.

 
 

 
 
Køretøj
 
Kilde
 
Tilstand
 
Pris
 
Fotos
 

 

 

 
 
Fiat 500
 
Madrid
 
Brugt
 
9690€
 
Dataark
 

 
 
Honda akkord
 
Barcelona
 
Brugt
 
14500€
 
Dataark
 

 

 

 

Hvis vi har en bred liste, kan vi oprette en JQuery -funktion, hvor vi kan sende dynamisk indhold, f.eks. Hentet fra en database.

Kolonner og blokke på siden

Bootstrap er baseret på en bredde på 1200 pixels, opdelt i 12 blokke, der dækker 99% af webens struktur, hver blok dækker 8.3333%, svarende til 100 pixels og har også et mellemrum på 1 pixel.
Altid kombinationen af ​​blokke i samme linje for at tilføje 12 for eksempel:
To blokke med 3 og en af ​​6

Bootstrap -blokke
Col-md-3 blok på 300px.
Col-md-6 blok på 600px.
Col-md-3 blok på 300px.
800px col-md-8 blok.

Nedenfor sætter vi en blokstørrelse 8, der er 800 pixels:

Disse blokke reagerer, da de er konfigureret i Bootstrap css. Her kan vi se et eksempel på, hvordan blokkene tilpasser sig en ændring af skærmen på en mobil enhed.

Sådan tilpasses Bootstrap til at ændre stilarter og funktionalitet

For at oprette stilarter og funktionaliteter, der er kompatible med Bootstrap, skal vi bruge det som ethvert andet css- eller js -bibliotek som en anden ramme for projektet, i dette tilfælde vil det blive brugt til design og funktionalitet i brugerens browser. Vi bør undgå at reformere de originale biblioteker, men forankre vores egne, så når Bootstrap -udviklere frigiver en opdatering, har vi ikke noget problem med at inkorporere det nye, hvis vi holder vores ændringer adskilt.
For at definere vores egne typografiark skal vi oprette en ny CSS -stilfil for at definere vores ændringer uden at påvirke det originale css. Lad os for eksempel huske hierarkiet.
Hvis i Bootstrap css bootstrap.min.css

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

Og vi vil have det til at have en grænse, så i en separat fil mine styles.css, kan vi erklære:

 .borderojo {border: 1px solid red} 

Så på siden påkalder vi begge filer

I blokken anvender vi det som følger:

Col-md-3 blok på 300px.

Dette ville svare til at erklære det sådan:

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

Hvis det nu af en eller anden grund havde to lignende udsagn, antag det

 .borderojo {grænse: 1px fast rød; } .clientblock {kant: 1px fast blå; }
Col-md-3 blok på 300px.

Hvem der sejrer er den dom, der blev erklæret sidst. Derfor vil blokken have en blå kant.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt