Innledning: Twitter Bootstrap Theme for Drupal 8

Denne opplæringen vil guide nye brukere å installere & bruk Twitter Støvelhempe som tema for Drupal 8 nettsteder, inkludert kortkoder for CSS i maler for brødsmuler, navbars, & verktøytips.


De Støvelhempe modul for Drupal 8 implementerer Bootstrap 3 rammeverk for CMS ved bruk av jsDelivr CDN for de nødvendige filene eller lokal hosting av koden i katalogen for nettsteder / * / temaer.

Twitteren Støvelhempe tema for Drupal 8 inkluderer tilpasset CSS snarveier for stylingknapper, bord, etiketter, merker, rullegardinmenyer, navbars, varsler, paneler, brønner, & en bildekarusell.

Trinn en: Last ned, installer, & Aktiver Bootstrap Theme

Start: På en Drupal 8 nettsted, naviger til admin / tema / installere og laste opp temafilene for Drupal Bootstrap. ZIP-filen for installasjonen kan lastes ned her:

  • Nedlasting: https://www.drupal.org/project/bootstrap

Neste: Navigere til admin / utseende og angi Støvelhempe tema som standard.

Bli ferdig: Lagre den nye konfigurasjonen og klikk på “Innstillinger” lenke for å få tilgang til avanserte alternativer.

Trinn to: Konfigurer temainnstillingene i D8 Admin

Start: Navigere til admin / utseende / settings / bootstrap og gå gjennom standardinnstillingene for Twitter Bootstrap tema. Endre logobildet ved å laste opp en ny fil & lagre innstillingene.

Neste: Les CDN-innstillingene for Twitter Bootstrap 3.0 JavaScript-filer som kreves av temaet. Standardverdien er jsDelivr. Velge “Ingen”hvis du foretrekker å være vert for filene lokalt.

Bli ferdig: Se gjennom temainnstillingene for knapper, bilder, tabeller, & andre komponenter for å velge stilvalg som samsvarer med dine interesser, dvs.. “Bruk avrundede hjørner på bilder” med JavaScript.

Trinn tre: Lag et Drupal-undertema for CSS-endringer.

Start: Når du lager CSS endringer til Drupal 8 temafiler eller legge til nye tilpassede maler, lag et undertema for Twitter Bootstrap for å bevare oppgraderingskompatibilitet.

Neste: De Twitter Bootstrap tema gir 3 Startpakke valg for et undertema:

  • CDN Starterkit
  • Mindre Starterkit
  • Sass Starterkit

Neste: Velg en, og kopier deretter filene fra temaer / bootstrap / starterkits katalog inn i en ny mappe med ditt valg av temanavn, dvs.. “Mytheme”.

Konfigurasjon: Redigere undertema-filene:

Neste: Finn følgende filer i underkatalogkatalogen:

  • ./THEMENAME/THEMENAME.info.yml.
  • ./THEMENAME/THEMENAME.starterkit.yml
  • ./THEMENAME/THEMENAME.libraries.yml
  • ./THEMENAME/THEMENAME.theme.
  • ./THEMENAME/config/install/THEMENAME.settings.yml
  • ./THEMENAME/config/schema/THEMENAME.schema.yml

konfigurasjon: Endre THEME verdien i hver filtittel til verdien av temaet ditt, dvs. temanavnet som brukes i undertema-katalogen kopiert til serveren.

Neste: Åpne undertemafilene som er oppført ovenfor individuelt i en kodeditor og endre eventuelle variabler der THEME brukes til å gjenspeile ditt eget undertema (dvs.., “Mytheme”).

Hint: Du kan også endre navn, beskrivelse og eventuelle andre verdier i subtemavariablene i hver .yml-fil for å tilpasse dem for visning i Drupal 8 admin sider.

konfigurasjon: Endre navnet på bibliotekutvidelsen: THEME / rammeverk

konfigurasjon: Endre navnet på undertema-konfigurasjonen: /THEMENAME/config/schema/THEMENAME.schema.yml

konfigurasjon: Endre navnet på THEMENAME.settings og ‘TEMETITLE-innstillinger’ for å matche den tilpassede temavariabelen. dvs. “mytheme.settings”.

Hint: Hvis den nye underkatalogen heter "Mytheme" da ville alle variablene ovenfor bli erstattet med Mytheme i de tilfeller der THEME er funnet.

  • Eksempel: /mytheme/mytheme.info.yml

Bli ferdig: Når alle variablene er endret i undertema-pakken, naviger til admin / utseende og angi det nye undertemaet som standard.

Trinn fire: Installer Bootstrap Layouts Module

Start: Lengre Drupal 8 utvikling med Støvelhempe tema & undertema-pakken kan inkludere tilpasset CSS på sider, blokker, & visninger, så vel som egendefinerte maltemaer for undertema.

  • Nedlasting: https://www.drupal.org/project/bootstrap_layouts

Hint: Installer Bootstrap-oppsett modul for forbedret malvalg i Drupal 8.

Neste: Navigere til admin / struktur / typer / administrere / * / display & Velg en layout for hver innholdstype i standardvisningen. Velge “Støvelhempe” & ett av visningsalternativene gitt i menyen.

Eksempel på konfigurasjon – Bootstrap Templates Module:

  • Naviger til skjermkonfigurasjonssiden for en innholdstype.
  • Velge "Tre kolonner stablet" i layoutinnstillingene.
  • Naviger til moduler / bootstrap_layouts / BS-3col-stablet mappe.
  • Få tilgang til malfilen generert av modulen & nedlasting.
  • Kopier bs-3col stablet til undertema-mappen du skal overstyre.
  • Endre malfilen i en skrivebordskodeditor for et tilpasset design.

Bli ferdig: Bruker> Bootstrap Maler modul, Drupal 8 webutviklere kan lage egendefinerte maler som kan brukes på CMS-nettsider som inneholder CSS & HTML-kode med JavaScript.

Trinn fem: Bruk CSS-kortkoder for tilpassede sidestiler

Start: Bruk >Twitter Bootstrap 3.0 CSS-snarveier i tilpassede malfiler for å legge til beholderelementer, brødsmuler, knapper, skjemaer, menyer, navbars, & andre komponenter med styling.

CSS Shortcode – Twitter Bootstrap 3.0

Beholderelementer:

eller

Jumbotron:

Overskriftstekst – stor type

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporær incididunt ut labore og dolore magna aliqua. Ut enim ad minim veniam, quis nostrud trening ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt i culpa qui officia deserunt mollit anim id est laborum.

knapper:

Misligholde
Hoved
Suksess
info
Advarsel
Fare
link

etiketter:

Misligholde
Hoved
Suksess
info
Advarsel
Fare

merker:

Min profil 42

Miniatyrbilder:

...

Miniatyrbilde etikett

Knapp Knapp

Responsive Breakpoints:

// Ekstra små enheter (portrett-telefoner, mindre enn 576 piksler)
// Ingen mediesøk for `xs ‘siden dette er standard i Bootstrap

// Små enheter (landskapstelefoner, 576 piksler og oppover)
@media (min. bredde: 576px) {…}

// Medium enheter (nettbrett, 768px og oppover)
@media (min. bredde: 768px) {…}

// Store enheter (stasjonære maskiner, 992px og oppover)
@media (min. bredde: 992px) {…}

// Ekstra store enheter (store stasjonære maskiner, 1200px og oppover)
@media (min. bredde: 1200px) {…}

Bli ferdig: Utviklere kan finne mer CSS kortkoder på Twitter Bootstrap 3.0 nettstedet:

    • Link: https://getbootstrap.com/docs/3.3/components/
    • Link: http://getbootstrap.com/docs/3.3/customize/

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me