Inleiding: het Twitter Bootstrap-thema voor Drupal 8

Deze tutorial zal nieuwe gebruikers begeleiden bij het installeren & gebruik Twitter Bootstrap als thema voor Drupal 8 websites, inclusief shortcodes voor CSS in sjablonen voor paneermeel, navbars, & tooltips.


De Bootstrap module voor Drupal 8 implementeert de Bootstrap 3 framework voor het CMS met behulp van jsDelivr CDN voor de vereiste bestanden of lokale hosting van de code in de directory sites / * / themes.

De Twitter Bootstrap thema voor Drupal 8 omvat maatwerk CSS shortcodes voor stylingsknoppen, tabellen, labels, badges, vervolgkeuzemenu’s, navigatiebalken, waarschuwingen, panelen, putten, & een afbeeldingscarrousel.

Stap één: downloaden, installeren, & Schakel het Bootstrap-thema in

Begin: Op een Drupal 8 website, ga naar admin / theme / installeren en upload de themabestanden voor Drupal Bootstrap. Het zip-bestand voor de installatie kan hier worden gedownload:

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

De volgende: Navigeren naar admin / uiterlijk en stel de Bootstrap thema als standaard.

Af hebben: Sla de nieuwe configuratie op en klik op “Instellingen” koppeling voor toegang tot geavanceerde opties.

Stap twee: Configureer de thema-instellingen in D8 Admin

Begin: Navigeren naar admin / uiterlijk / instellingen / bootstrap en bekijk de standaardinstellingen voor de Twitter Bootstrap thema. Wijzig de logoafbeelding door een nieuw bestand te uploaden & sla de instellingen op.

De volgende: Bekijk de CDN-instellingen voor de Twitter Bootstrap 3.0 JavaScript-bestanden vereist door het thema. De standaardwaarde is jsDelivr. Kiezen “Geen”als u de bestanden liever lokaal host.

Af hebben: Bekijk de thema-instellingen voor knoppen, afbeeldingen, tabellen, & andere componenten om stijlselecties te kiezen die bij uw interesses passen, d.w.z.. ‘Gebruik afgeronde hoeken op afbeeldingen’ met JavaScript.

Stap drie: maak een Drupal-subthema voor CSS-wijzigingen.

Begin: Bij het maken CSS veranderd naar Drupal 8 themabestanden of nieuwe aangepaste sjablonen toevoegen, maak een subthema voor Twitter Bootstrap om upgrade-compatibiliteit te behouden.

De volgende: De Twitter Bootstrap thema geeft 3 Beginnerskit keuzes voor een subthema:

  • CDN Starterkit
  • Minder Starterkit
  • Sass Starterkit

De volgende: Kies er een en kopieer vervolgens de bestanden van de thema’s / bootstrap / starterkits map in een nieuwe map met de door u gekozen themanaam, d.w.z.. “mijn thema”.

Configuratie: de subthemabestanden bewerken:

De volgende: Lokaliseer de volgende bestanden in uw subthema-directory:

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

Configuratie: Verander de THEMENAME waarde in elke bestandstitel naar de waarde van uw thema, d.w.z. de themanaam die wordt gebruikt in de subthema-directory die naar de server is gekopieerd.

De volgende: Open de hierboven genoemde subthema-bestanden afzonderlijk in een code-editor en wijzig de variabelen waar THEMENAME wordt gebruikt om uw eigen subthema weer te geven (d.w.z.., “mijn thema”).

Tip: U kunt ook de naam, beschrijving en andere waarden in de subthema-variabelen binnen elk .yml-bestand wijzigen om ze aan te passen voor weergave in Drupal 8 admin pagina’s.

Configuratie: Wijzig de naam op de bibliotheekextensie: THEMENAME / framework

Configuratie: Wijzig de naam in de subthema-configuratie: /THEMENAME/config/schema/THEMENAME.schema.yml

Configuratie: Verander de naam op THEMENAME.settings en ‘THEMETITLE instellingen’ zodat deze overeenkomt met uw aangepaste thema-variabele. d.w.z. “Mytheme.settings”.

Tip: Als de nieuwe subthema-directory een naam heeft "mijn thema" dan worden alle bovenstaande variabelen vervangen door mijn thema in de gevallen waar THEMENAME is gevonden.

  • Voorbeeld: /mytheme/mytheme.info.yml

Af hebben: Als alle variabelen in het subthemapakket zijn gewijzigd, navigeert u naar admin / uiterlijk en stel het nieuwe subthema als standaard in.

Stap vier: Installeer de Bootstrap Layouts-module

Begin: Verder Drupal 8 ontwikkeling met de Bootstrap thema & subthema pakket kan aangepaste bevatten CSS op pagina’s, blokken, & weergaven, evenals aangepaste subthema-sjabloonbestanden.

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

Tip: Installeer de Bootstrap-indelingen module voor verbeterde sjabloonselectie in Drupal 8.

De volgende: Navigeren naar admin / structure / types / manage / * / display & kies een lay-out voor elk inhoudstype in de standaardweergave. Kiezen “Bootstrap” & een van de weergaveopties in het menu.

Voorbeeldconfiguratie – Bootstrap-sjablonenmodule:

  • Navigeer naar de displayconfiguratiepagina voor een inhoudstype.
  • Kiezen "Drie kolommen gestapeld" in de layout instellingen.
  • Navigeer naar de modules / bootstrap_layouts / bs-3col-gestapeld map.
  • Open het sjabloonbestand dat door de module is gegenereerd & downloaden.
  • Kopieer de bs-3col-gestapeld naar de subthema-map om te overschrijven.
  • Pas het sjabloonbestand aan in een desktopcode-editor voor een aangepast ontwerp.

Af hebben: De … gebruiken> Bootstrap-sjablonen module, Drupal 8 webontwikkelaars kunnen aangepaste sjablonen maken voor gebruik met CMS-websitepagina’s die CSS bevatten & HTML-code met JavaScript.

Stap vijf: gebruik CSS-shortcodes voor aangepaste paginastijlen

Begin: Gebruik >Twitter Bootstrap 3.0 CSS-shortcodes in aangepaste sjabloonbestanden om containerelementen, breadcrumbs, knoppen, formulieren, menu’s, navigatiebalken toe te voegen, & andere componenten met styling.

CSS Shortcode – Twitter Bootstrap 3.0

Containerelementen:

of

Jumbotron:

Koptekst – groot type

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 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.

Toetsen:

Standaard
Primair
Succes
Info
Waarschuwing
Gevaar
Koppeling

Etiketten:

Standaard
Primair
Succes
Info
Waarschuwing
Gevaar

Badges:

Mijn profiel 42

Miniaturen:

...

Miniatuurlabel

Knop Knop

Responsieve breekpunten:

// Extra kleine apparaten (portrettelefoons, minder dan 576 px)
// Geen mediaquery voor `xs` aangezien dit de standaard is in Bootstrap

// Kleine apparaten (landschapstelefoons, 576px en hoger)
@media (min-width: 576px) {…}

// Middelgrote apparaten (tablets, 768px en hoger)
@media (min-width: 768px) {…}

// Grote apparaten (desktops, 992px en hoger)
@media (min-width: 992px) {…}

// Extra grote apparaten (grote desktops, 1200px en hoger)
@media (min-width: 1200px) {…}

Af hebben: Ontwikkelaars kunnen meer vinden CSS shortcodes op de Twitter Bootstrap 3.0 plaats:

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

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