Inledning: Twitter Bootstrap Theme för Drupal 8

Den här handledning guider nya användare att installera & använd Twitter bootstrap som tema för Drupal 8 webbplatser, inklusive kortkoder för CSS i mallar för brödsmulor, navbars, & verktygstips.


De bootstrap modul för Drupal 8 implementerar Bootstrap 3 ramverk för CMS med jsDelivr CDN för nödvändiga filer eller lokal värd för koden i katalogen webbplatser / * / teman.

Twitteren bootstrap tema för Drupal 8 inkluderar anpassade CSS kortkoder för stylingknappar, bord, etiketter, märken, rullgardinsmenyer, navbars, varningar, paneler, brunnar, & en bildkarusell.

Steg ett: Ladda ner, installera, & Aktivera Bootstrap Theme

Start: På en Drupal 8 webbplats, navigera till admin / tema / install och ladda upp temafilerna för Drupal Bootstrap. ZIP-filen för installationen kan laddas ner här:

  • Ladda ner: https://www.drupal.org/project/bootstrap

Nästa: Navigera till admin / utseende och ställ in bootstrap tema som standard.

Avsluta: Spara den nya konfigurationen och klicka på “Inställningar” länk för att få tillgång till avancerade alternativ.

Steg två: Konfigurera temainställningarna i D8 Admin

Start: Navigera till admin / utseende / inställningar / bootstrap och granska standardinställningarna för Twitter Bootstrap tema. Ändra logobilden genom att ladda upp en ny fil & spara inställningarna.

Nästa: Granska CDN-inställningarna för Twitter Bootstrap 3,0 JavaScript-filer som krävs av temat. Standardvärdet är jsDelivr. Välja “Ingen”om du föredrar att vara värd för filerna lokalt.

Avsluta: Granska temainställningarna för knappar, bilder, tabeller, & andra komponenter för att välja stilval som matchar dina intressen, dvs.. “Använd rundade hörn på bilder” med JavaScript.

Steg tre: Skapa ett Drupal-undertema för CSS-ändringar.

Start: När du gör CSS ändras till Drupal 8 temafiler eller lägga till nya anpassade mallar, skapa ett undertema för Twitter Bootstrap för att bevara uppgraderingskompatibilitet.

Nästa: De Twitter Bootstrap temat ger 3 Starterkit val för ett under-tema:

  • CDN Starterkit
  • Mindre Starterkit
  • Sass Starterkit

Nästa: Välj en och kopiera sedan filerna från teman / bootstrap / starterkits katalog till en ny mapp med ditt val av temanamn, dvs.. ”Mytheme”.

Konfiguration: Redigera undertema-filer:

Nästa: Leta reda på följande filer i din underkatalogkatalog:

  • ./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

Konfiguration: Ändra THEME värde i varje filtitel till värdet på ditt tema, dvs det temanamn som används i undertemkatalogen som kopierats till servern.

Nästa: Öppna undertemfilerna som listas ovan individuellt i en kodredigerare och ändra eventuella variabler där THEME används för att återspegla ditt eget undertema (dvs.., ”Mytheme”).

Ledtråd: Du kan också ändra namn, beskrivning och alla andra värden i subtemvariablerna i varje .yml-fil för att anpassa dem för visning i Drupal 8 admin-sidor.

Konfiguration: Ändra namnet på bibliotekstillägget: THEME / ram

Konfiguration: Ändra namnet i undertemkonfigurationen: /THEMENAME/config/schema/THEMENAME.schema.yml

Konfiguration: Ändra namnet på THEMENAME.settings och “TEMETITLE-inställningar” för att matcha din anpassade temavariabel. d.v.s.. ”mytheme.settings”.

Ledtråd: Om den nya underkatalogen heter "Mytheme" då skulle alla variabler ovan ersättas med Mytheme i de fall där THEME är hittad.

  • Exempel: /mytheme/mytheme.info.yml

Avsluta: När alla variabler ändras i undertemspaketet, navigerar till admin / utseende och ställ in det nya undertemat som standard.

Steg fyra: Installera Bootstrap Layouts-modulen

Start: Ytterligare Drupal 8 utveckling med bootstrap tema & under-temapaketet kan inkludera anpassade CSS på sidor, block, & visningar, såväl som anpassade malltema för undertema.

  • Ladda ner: https://www.drupal.org/project/bootstrap_layouts

Ledtråd: Installera Bootstrap-layouter modul för förbättrad val av mallar i Drupal 8.

Nästa: Navigera till admin / struktur / types / chef / * / display & Välj en layout för varje innehållstyp i standardvyn. Välja ”Bootstrap” & ett av de visningsalternativ som anges i menyn.

Exempel på konfiguration – Bootstrap Template Module:

  • Navigera till skärmkonfigurationssidan för en innehållstyp.
  • Välja "Tre staplade staplar" i layoutinställningarna.
  • Navigera till moduler / bootstrap_layouts / bs-3col-staplade mapp.
  • Öppna mallfilen som genereras av modulen & ladda ner.
  • Kopiera bs-3col-staplade till den undertemmapp som ska åsidosättas.
  • Ändra mallfilen i en skrivbordskodeditor för en anpassad design.

Avsluta: Använda> Bootstrap-mallar modul, Drupal 8 webbutvecklare kan skapa anpassade mallar som kan användas med CMS webbplatssidor som innehåller CSS & HTML-kod med JavaScript.

Steg fem: Använd CSS-kortkoder för anpassade sidstilar

Start: Använda sig av >Twitter Bootstrap 3,0 CSS-kortkoder i anpassade mallfiler för att lägga till behållarelement, brödsmulor, knappar, formulär, menyer, navbars, & andra komponenter med styling.

CSS Shortcode – Twitter Bootstrap 3.0

Behållarelement:

eller

Jumbotron:

Rubriktext – stor typ

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporär incididunt ut labore och dolore magna aliqua. Ut enim ad minim veniam, quis nostrud träning 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 in culpa qui officia deserunt mollit anim id est laborum.

Knappar:

Standard
Primär
Framgång
Info
Varning
Fara
Länk

Etiketter:

Standard
Primär
Framgång
Info
Varning
Fara

märken:

Min profil 42

miniatyrer:

...

Miniatyretikett

Knapp Knapp

Responsive Breakpoints:

// Extra små enheter (porträtttelefoner, mindre än 576px)
// Ingen mediefråga för `xs ‘eftersom detta är standard i Bootstrap

// Små enheter (landskapstelefoner, 576px och uppåt)
@media (min-bredd: 576px) {…}

// Medium enheter (tabletter, 768px och uppåt)
@media (min-bredd: 768px) {…}

// Stora enheter (stationära datorer, 992px och uppåt)
@media (min-bredd: 992px) {…}

// Extra stora enheter (stora stationära datorer, 1200px och uppåt)
@media (min-bredd: 1200px) {…}

Avsluta: Utvecklare kan hitta mer CSS kortkoder på Twitter Bootstrap 3.0 webbplats:

    • Länk: https://getbootstrap.com/docs/3.3/components/
    • Länk: http://getbootstrap.com/docs/3.3/customize/

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