Efni.
- Hvað er Bootstrap?
- Fáðu Bootstrap umhverfið tilbúið
- Bootstrap virkt grunn sniðmát vefsíðu
- Einföld Bootstrap Grid Structure
- Bætir við sjálfgefnum flipaskiptum Bootstrap
- Grunnuppsetning kóða fyrir Bootstrap flipa
- Sjálfgefnir Bootstrap flipar
- Bættu landamæraliti við Bootstrap flipa
- Bootstrap flipar með innihaldi
- Flipar með innihaldi
- Bættu við landamæri við innihaldsrúðu Bootstrap
- Bættu við bakgrunnslit fyrir flipa
- Stilltu virkan flipalit
- Bættu við lit flipaglugga
Hvað er Bootstrap?
Bootstrap er öflugur þróunarrammi fyrir framan og það er mjög auðvelt að byggja móttækilegar vefsíður með því að nota það. Opinber vefsíða Bootstrap býður upp á fullt af algengum CSS / HTML hlutum og Javascript hlutum sem eru tilbúnir til notkunar. Í þessari grein ætla ég að sýna þér hvernig á að nota bootstrap javascript flipahlutinn til að byggja upp stílhrein flipaútlit fyrir vefsíðuna þína.
Fáðu Bootstrap umhverfið tilbúið
Í fyrsta lagi þarftu að hlaða niður nýjustu útgáfunni af bootstrap rammanum. Síðan verður þú að draga það út í möppu sem þú ætlar að vinna í. Í hlutanum „að hefjast handa“ á opinberu bootstrap vefsíðunni er það með grundvallarsniðmát vefsíðu fyrir bootstrap, svo þú getur afritað það og búið til nýja vefsíðu. Þegar þú hefur búið til nýja síðu mun hún líta svona út:
Bootstrap virkt grunn sniðmát vefsíðu
! DOCTYPE html> html lang = "en"> head> meta charset = "utf-8"> meta http-equiv = "X-UA-samhæft" content = "IE = edge"> meta name = "viewport" content = "width = device-width, initial-scale = 1"> title> Bootstrap 101 Template / title>! - Bootstrap -> link href = "css / bootstrap.min.css" rel = "stylesheet">! - HTML5 Shim og Respond.js IE8 stuðningur við HTML5 þætti og fjölmiðlafyrirspurnir ->! - VIÐVÖRUN: Respond.js virkar ekki ef þú skoðar síðuna í gegnum file: // ->! - [ef IT 9 ]> skrift src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> / skrift> skrift src = "https://oss.maxcdn.com/libs/svar. js / 1.4.2 / respond.min.js "> / script>! [endif] -> / head> body> h1> Halló, heimur! / h1>! - jQuery (nauðsynlegt fyrir JavaScript viðbætur Bootstrap) - > script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> / script>! - Láttu öll saman sett viðbætur fylgja (hér að neðan), eða láttu einstaka skrár fylgja eftir þörfum -> script src = "js / bootstrap.min.js"> / script> / body> / html>
Þetta sniðmát gefur þér „halló heim“ skilaboð sem framleiðsla. Setjum upp netumhverfið til að taka með öðrum Bootstrap íhlutum. Þú getur gert það á eftirfarandi hátt;
- Eftir body tagið þarftu að vefja öllum HTML tags í div með bekkjarheitinu „container“. Þessi deiling mun halda öllum HTML stýringum í miðju vefsíðunnar auk þess sem það er gámastígvélaramminn sem notaður er aðlagast til að passa í hverja stærð tækisins. Bættu við bakgrunnsskugga til að sýna notkun á gámum.
- Bæta við grunnnetskipulaginu. Áður en þú notar einhverja ræsibúnað íhluta þarftu að nota netskipulagið. Fyrir þetta dæmi ætla ég að nota eftirfarandi ristgerð;
Einföld Bootstrap Grid Structure
div class = "container" style = ”background-color: #eee;”> div class = "row"> div class = "col-md-8"> h1> Bootstrap Tabs! / h1> / div> / div> / div>
Nú vista og endurnýja síðuna, þú munt fá eftirfarandi framleiðsla;
Bætir við sjálfgefnum flipaskiptum Bootstrap
Gráa svæðið á skjánum er gámasvæðið og eins og þú sérð er það miðju. Nú bætirðu við undirstöðu flipahlutanum í bootstrap. Þú getur fengið sýnishornskóða fyrir bootstrap flipa í javascript hluti hlutans undir flipa. Eftir að flipakóðasíðunni hefur verið bætt við mun hún líta út eins og hér segir:
Grunnuppsetning kóða fyrir Bootstrap flipa
div class = "container" style = "background-color: #eee;"> div class = "row"> div class = "col-md-8"> h1> Bootstrap Tabs! / h1> ul class = "nav nav -tabs "id =" myTab "> li class =" active "> a href =" # home "data-toggle =" tab "> Heim / a> / li> li> a href =" # profile "gagnaskipti = "tab"> Profile / a> / li> li> a href = "# messages" data-toggle = "tab"> Skilaboð / a> / li> li> a href = "# stillingar" data-toggle = " flipi "> Stillingar / a> / li> / ul> div class =" tab-content "> div class =" tab-pane active "id =" home "> ... / div> div class =" tab-pane "id =" profile "> ... / div> div class =" tab-pane "id =" messages "> ... / div> div class =" tab-pane "id =" settings "> ... / div> / div> / div> / div> / div>
Vistaðu kóðann og hressaðu upp og þú færð framleiðslu á eftirfarandi hátt:
Sjálfgefnir Bootstrap flipar
Þetta er grunnútgáfa flipans fyrir stígvél. Þegar þú ert að þróa vefsíður fyrir viðskipti þarftu að stíla eftir sérsniðinni hönnun. Við skulum gera þessa flipa stílhreina með því að bæta við sérsniðnum stílum.
Bættu landamæraliti við Bootstrap flipa
Áður en lengra er haldið þarftu að finna sjálfgefna stíla bootstrap. Þú getur gert þetta með hvaða vafra sem er. Allir vafrarnir eru með þróunarverkfæri, þar sem það gerir þér kleift að skoða hvert HTML merki og stíl þeirra, kemba javascript og margt fleira. Ég er með krómvafra og með því að ýta á F12 get ég fengið þróunarverkfæri. Þú munt fá tvo nýja glugga neðst; annar sýnir HTML uppruna og hinn sýnir allan CSS kóðann sem erfast. Smelltu á leit við hliðina á frumefni og sveima á þeim frumefni sem þú vilt finna upplýsingar um. Það mun birtast í CSS glugganum. Þróunarglugginn mun líta þannig út:
Nú erum við meðvituð um að breyta þarf akkerismerki til að fá sérsniðna lit á landamærum. Þú getur gengið framhjá hvaða CSS-flokki sem er með bootstrap með því að bæta við stílmerki undir CSS-hlekknum fyrir bootstrap sem er staðsettur í haushlutanum. Í stórum þróunarverkefnum nota þeir aðskildar stílblöð til að halda sérsniðnum stíl. Leyfðu mér að sýna þér hvaða stíll er sem þarf að bæta við til að fá bara landamæri í kringum alla flipa.
Leyfðu mér að útskýra hvern stíl í smáatriðum. Fyrsta línan með stílkóða gefur þér bláu litalínuna undir flipanum. En aðeins í virka flipanum er það falið. Hvernig gerir bootstrap það? Það notar neikvæða framlegð fyrir lista atriði og í hverjum flipa gera þeir jaðarbotninn gagnsæ.
Þegar þú bætir við öðrum stíl muntu taka eftir því að allir ávalir fliparnir fengu landamæri, þar á meðal virka flipann. Samkvæmt hönnun flipa þurfum við að gera virka flipann jaðar neðri. Þú getur gert það með því að bæta þriðju línunni af kóða við stíl. Þegar þú hefur vistað og endurnýjað síðuna færðu framleiðslu á eftirfarandi hátt;
Nú þurfum við að stíla innihaldssvæðið. Fyrir það verðum við að bæta við einhverju efni til að greina hvern flipa fyrir sig. Þú getur alltaf fengið sýnishorn af efni með því að nota Iipsum vefsíðu. Þegar þú hefur bætt við efni mun kóðinn líta út eins og hér segir:
Bootstrap flipar með innihaldi
div class = "container"> div class = "row"> div class = "col-md-8"> h1> Bootstrap Tabs! / h1> ul class = "nav nav-tabs" id = "myTab"> li class = "active"> a href = "# home" data-toggle = "tab"> Heim / a> / li> li> a href = "# profile" data-toggle = "tab"> Prófíll / a> / li > li> a href = "# skilaboð" data-toggle = "tab"> Skilaboð / a> / li> li> a href = "# stillingar" data-toggle = "flipi"> Stillingar / a> / li> / ul> div class = "tab-content my-tab"> div class = "tab-pane active" id = "home"> div class = "row"> div class = "col-md-12"> h3> Tab Einn / h3> p> er einfaldlega gervitexti prentunar og letursetningariðnaðarins. Lorem Ipsum hefur verið venjulegur gervitexti iðnaðarins síðan á 1500-áratugnum, þegar óþekktur prentari tók fley af gerðinni og spældi hana til að búa til tegundarbók. / p> / div> / div> / div> div class = "tab-pane" id = "profile"> div class = "row"> div class = "col-md-12"> h3> Tab Two / h3 > p> er einfaldlega gervitexti prentunar og letursetningariðnaðarins. Lorem Ipsum hefur verið venjulegur gervitexti iðnaðarins síðan á 1500-áratugnum, þegar óþekktur prentari tók fley af gerðinni og spældi hana til að búa til tegundarbók. / p> / div> / div> / div> div class = "tab-pane" id = "messages"> div class = "row"> div class = "col-md-12"> h3> Tab Three / h3 > p> er einfaldlega gervitexti prentunar og letursetningariðnaðarins. Lorem Ipsum hefur verið venjulegur gervitexti iðnaðarins síðan á 1500-áratugnum, þegar óþekktur prentari tók fley af gerðinni og spældi hana til að búa til tegundarbók. / p> / div> / div> / div> div class = "tab-pane" id = "settings"> div class = "row"> div class = "col-md-12"> h3> Tab Four / h3 > p> er einfaldlega gervitexti prentunar og letursetningariðnaðarins. Lorem Ipsum hefur verið venjulegur gervitexti iðnaðarins síðan á 1500-áratugnum, þegar óþekktur prentari tók fley af gerðinni og spældi hana til að búa til tegundarbók. / p> / div> / div> / div> / div> / div> / div> / div>
Vistaðu síðuna og endurnýjaðu vafrann. Þú færð skjá sem lítur út eins og sá hér að neðan:
Flipar með innihaldi
Bættu við landamæri við innihaldsrúðu Bootstrap
Nú þurfum við að halda áfram sömu landamærum að hverjum gám. Þú getur gert þetta með því að bæta stíl við flipann. Við skulum bæta við stílflokki til að skipta með stílflokki „flipainnihald“ kalla „minn flipi“. Þessi nýi stílflokkur mun hnekkja sjálfgefnum eiginleikum bekkja. Nú geturðu bætt eftirfarandi línu af kóða við CSS.
.my-tab .tab-pane {border: solid 1px blue;}
Vistaðu það og hressaðu síðuna til að fá framleiðslu eins og hér að neðan:
Eins og þú sérð eru tvö efstu landamæri skarast og aftur fékk virkur flipi neðri landamæralínuna. Við getum lagað þessi mál með því að breyta glugganum á efstu landamærunum. Yfir stíl bekknum er hægt að breyta á eftirfarandi hátt;
.my-tab .tab-pane {border: solid 1px blue; jaðar-toppur: 0; }
Vista og endurnýja síðuna, þú munt taka eftir framleiðslu sem hér segir:
Athugaðu áður en þú lætur innihald fylgja með í hverri flipaglugga að þú þarft að nota ræsiskerfi ræsifélagsins, annars brotnar útlitið.
Bættu við bakgrunnslit fyrir flipa
Geri ráð fyrir að þú viljir úthluta bakgrunnslit á efstu flipana. Þú getur gert það með því að nota stílflokka sem eru skilgreindir í haushlutanum. Til þess þarftu að breyta stílflokknum „#myTab li a“ og úthluta bakgrunnslit á eftirfarandi hátt;
#myTab li a {border-color: blue; background-color: # A5C967; }
Vista og endurnýja síðuna, þú munt fá framleiðslu eins og hér að neðan:
Stilltu virkan flipalit
Sjálfgefið þurfum við að sýna virka flipann með öðrum lit. Til þess þurfum við að breyta smá stíl í stílflokknum „#myTab li.active a“ sem hér segir:
#myTab li.active a {border-bottom-color: transparent; background-color: Yellow; }
Ofangreind stílaðlögun mun gera virka flipann bakgrunnslit gulan. Vista og endurnýja síðuútganginn verður eftirfarandi;
Bættu við lit flipaglugga
Bætum við sérsniðnum lit í flipagluggann. Þú getur gert það með því að fínstilla sérsniðinn stílflokks „.my-tab .tab-pane“ með því að bæta við valinn lit á jörðinni á eftirfarandi hátt;
.my-tab .tab-pane {border: solid 1px blue; jaðar-toppur: 0; bakgrunnslitur: # F7EFC6;}
Vistaðu síðuna og endurnýjaðu og þú færð síðu sem hér segir:
Vona að þú getir borið með litavalinu mínu fyrir flipaútlitið. Í þessari grein hef ég aðeins notað sérsniðna liti til að sýna fram á hvernig þú getur breytt útliti og tilfinningu sjálfgefins skipulags ræsiflipans. En byggt á hönnun þinni geturðu valið liti eða jafnvel bakgrunnsmyndir til að stíla flipana. Allt sem þú þarft að gera er að laga stílflokka sem skilgreindir eru í þessari grein.
Þessi grein er nákvæm og sönn eftir bestu vitund höfundar. Innihald er eingöngu til upplýsinga eða skemmtunar og kemur ekki í stað persónulegs ráðgjafar eða faglegrar ráðgjafar í viðskipta-, fjárhags-, lögfræðilegum eða tæknilegum málum.
