✅ Bootstrap Framework avansert webgrensesnittutvikling

Innholdsfortegnelse

Tabeller og rader med effekter
Flernivåmeny ved hjelp av Css Bootstrap
Kolonner og blokker på siden
Slik tilpasser du Bootstrap til å endre stiler og funksjonalitet

I en annen opplæring ble en introduksjon til Bootstrap brukergrensesnitt forklart og også en opplæring i hvordan du designer et webprosjekt med Bootstrap 2.0, i dette vil vi gå mot grensesnittene og elementene som er mest brukt i webutvikling.
Vi kan laste ned Bootstrap og sette det i en katalog på nettstedet vårt eller bruke det ved å koble det til ditt online bibliotek.
Bootstrap er et rammeverk med åpen kildekode og åpne for raskere og enklere webutvikling.
Når vi søker kan vi finne mange bidrag fra css -fellesskapet og tilpassede komponenter og designmaler som andre brukere har laget og gjøre dem tilgjengelige, det er mange komponenter for å lage navigasjonslinjer, modale vinduer og popup -vinduer, bildekaruseller, menyer og mange andre, i tillegg som JavaScript og Jquery -plugins for å validere skjemaer og andre funksjoner

Tabeller og rader med effekter

Bootstrap har allerede CSS -stiler og effekter som vi kan bruke, for eksempel for å endre fargen på radene i en tabell og når musen passerer den.

Koden vil være følgende:

Tabell og rader med virkning
 

 
 Kjøretøy  Kilde  Betingelse  Pris 

 

 

 
 Fiat 500  Madrid  Brukt  9690€ 

 
 Honda akkord  Barcelona  Brukt  14500€ 

 
 Renault laguna  Toledo  Brukt  2800€

Kjøretøy	Kilde	Betingelse	Pris
Fiat 500	Madrid	Brukt	9690€
Honda akkord	Barcelona	Brukt	14500€
Renault laguna	Toledo	Brukt	2800€

Deretter lager vi en meny med undermeny som bare bruker Bootstrap CSS:

FORSTØRRE

Koden vil være følgende:


Flernivåmeny ved hjelp av Css Bootstrap
Kunder Salgsadministrator 

System
Brukere
Innstillinger

Tillatelser
Servere

Vps Server A
Vps Server B


Ressursforbruk
Sikkerhetskopiering

Vi forklarer strukturen og dens forhåndsdefinerte klasser. Klassen definerer størrelsen på nettet som finnes som standard i Bootstrap.

 .container {bredde: 1170px; }

Følgende radklasser gir en venstre og høyre margin på hele siden:

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

Nedtrekksmenyklassen kommer allerede med Bootstrap og btn btn-primære knappeklasser også. Vi vil legge til undermenyen og nivåklassene for å kunne generere undermenyen. Husk at klasser har hierarkier, så hvis vi navngir den samme klassen som vi har i Bootstrap og legger til noen attributter til den, er den siste erklæringen som gjelder.
Dette er tilfellet der vi legger til et skifte venstre attributt, selv om klassen allerede er definert i bootstrap.min.css

 .dropdown-meny {venstre: 150px; }

Css og jquery -popup med html -innhold
Vi bruker popover -funksjonen som viser en popup når en lenke holdes med musen og innholdsvariabelen har html -en som skal vises.
Vi tar den forrige tabellen og legger til en kolonne for et teknisk ark.
I hver lenke vil vi ha følgende setning, og deretter med id vil vi påkalle et skript.

 
 

 
 Kjøretøy  Kilde  Betingelse  Pris  Bilder 

 

 

 
 Fiat 500  Madrid  Brukt  9690€  Dataark 

 
 Honda akkord  Barcelona  Brukt  14500€  Dataark

Kjøretøy	Kilde	Betingelse	Pris	Bilder
Fiat 500	Madrid	Brukt	9690€	Dataark
Honda akkord	Barcelona	Brukt	14500€	Dataark

Hvis vi har en bred liste, kan vi lage en JQuery -funksjon der vi kan sende dynamisk innhold, for eksempel hentet fra en database.

Kolonner og blokker på siden

Bootstrap er basert på en bredde på 1200 piksler, delt inn i 12 blokker som dekker 99% av strukturen på nettet, hver blokk dekker 8.3333%, tilsvarende 100 piksler og har også et mellomrom på 1 piksel.
Alltid kombinasjonen av blokker på samme linje for å legge til 12 for eksempel:
To blokker på 3 og en på 6

Bootstrap -blokker

Col-md-3 blokk på 300px.

Col-md-6 blokk på 600px.

Col-md-3 blokk på 300px.

800px col-md-8 blokk.

Nedenfor legger vi en blokkstørrelse 8 som er 800 piksler:

Disse blokkene reagerer som de er konfigurert i Bootstrap css. Her kan vi se et eksempel på hvordan blokkene tilpasser seg en endring av skjermen på en mobil enhet.

Slik tilpasser du Bootstrap til å endre stiler og funksjonalitet

For å lage stiler og funksjoner for å være kompatible med Bootstrap, må vi bruke det som alle andre css- eller js -biblioteker, som et annet rammeverk for prosjektet, i dette tilfellet vil det bli brukt til design og funksjonalitet i brukerens nettleser. Vi bør unngå å reformere de opprinnelige bibliotekene, men legge til våre egne, så når Bootstrap -utviklere slipper en oppdatering, har vi ingen problemer med å inkorporere det nye hvis vi holder endringene atskilt.
For å definere våre egne stilark, må vi opprette en ny CSS -stilfil, for å definere endringene våre uten å påvirke det opprinnelige css. La oss huske hierarkiet, for eksempel.
Hvis i Bootstrap css bootstrap.min.css

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

Og vi vil at den skal ha en grense, så i en egen fil, styles.css, kan vi erklære:

 .borderojo {border: 1px solid red}

Så på siden påkaller vi begge filene

I blokken bruker vi den som følger:

Col-md-3 blokk på 300px.

Dette vil svare til å erklære det slik:

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

Hvis den av en eller annen grunn hadde to lignende uttalelser, anta

 .borderojo {border: 1px solid rød; } .clientblock {border: 1px solid blue; }
Col-md-3 blokk på 300px.

Hvem som råder er dommen som ble erklært sist. Derfor vil blokken ha en blå kant.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng