Bootstrap

Elegantní, intuitivní a výkonné "mobile first" téma vzhledu, které propojuje Drupal a Bootstrap framework.

  • tutorialspoint.com/bootstrap/bootstrap_responsive_utilities.htm

Instalace a nastavení

  1. Rozbalte téma Bootstrap 7.x-3.0 do adresáře sites/all/themes/.
  2. Nainstalujte modul jQuery Update a nastavte minimálně jQuery verzi 1.9.0+.
  3. Zkopírujte adresář sites/*/themes/bootstrap/bootstrap_subtheme do sites/*/themes/ a přejmenujte např. na my_bootstrap_theme.
    • v nově vytvořeném subtématu přejmenute soubor bootstrap_subtheme.info.starterkit na my_bootstrap_theme.info a upravte jeho obsah (např. název a popis) dle potřeb
  4. admin/appearance (Vzhled) zvolte nově vytvořené sub-téma my_bootstrap_theme.
    • v nastavení vzhledu subtématu v sekci Pokročilé je možné si pomocí Bootswatch theme zvolit výchozí vzhled
  5. Přečtěte si soubory README.txt v adresářích:
    • ./css – Compiled sub-theme source files
    • ./less – Sub-theme source files
    • ./templates – Template files
  6. Pro úplnou podporu Glyphicons nainstalujte moduly Icon API nebo i Fontello.
  7. Volitelně nainstalujte modul Bootstrap Libraryyes
  8. Rozšíření:
    • github.com/djokodonev/bootstrap-multilevel-dropdown – doplnění víceúrovňové navigace
      • subtéma doplňte o soubory:
        • css/bootstrap-dropdown-multilevel.css
        • js/bootstrap-dropdown-multilevel.js
      • a do souboru my_bootstrap_theme.info doplňte řádky
      • ; github.com/djokodonev/bootstrap-multilevel-dropdown
        stylesheets[all][] = css/bootstrap-dropdown-multilevel.css
        scripts[] = js/bootstrap-dropdown-multilevel.js
    • github.com/CWSpear/bootstrap-hover-dropdown – doplnění hover efektu u navigace
      • subtéma doplňte o soubory:
        • js/bootstrap-hover-dropdown.js
        • js/script.js
      • a do souboru script.js doplňte řádky
        • (function ($) {
            // To understand behaviors, see https://drupal.org/node/756722#behaviors
            Drupal.behaviors.my_script = {
              attach: function(context, settings) {
                // github.com/CWSpear/bootstrap-hover-dropdown
                $('.dropdown-toggle').attr('data-hover', 'dropdown');
              }
            };
          })(jQuery);
  9. ...

Téma vzhledu Bootstrap 7.x-3.0

Drupal Bootstrap Documentation:

Podobná témata:

  • Tweme
  • Bootstrap Business
  • Bootstrap Barrio

Další moduly (Bootstrap related modules):

  • Bootstrap Tour - průvodce webovými stránkami
  • Display Suite Bootstrap Layouts
  • Views Bootstrap
    • Full height carousel
    • $(document).ready(function(){
          function sliderFullScreen(){
              var windowHeight = $(window).height();
              $('.carousel, .carousel-inner, .carousel .item, .carousel .fill').css('height',windowHeight);
          }
          sliderFullScreen();
          $(window).resize(function(){
              sliderFullScreen();
          });
      });
  • Panels Bootstrap Layouts
  • Advanced Forum Bootstrap
  • Parallax Background
  • atd.

Příklady obsažené v ve zdrojovém Boostrap archivu:

  • Responzivní šablony s mobile menu:
    • carousel
    • jumbotron
    • navbar-fixed-top
    • offcanvas
    • starter-template yes
    • sticky-footer-navbar
    • theme enlightened
  • Neresponzivní šablona:
    • non-responsive

Tipy:

  • grid
  • justified-nav (vzhled menu)
  • signin

Podobná témata:

Přehled webových frameworků:

  • getskeleton.com – normalize + pouze jeden CSS soubor enlightened
  • purecss.io – jen samostatné CSS soubory enlightened
  • getbootstrap.com – mobile first, CSS, JS, Fonts, Components (drop down menus, paginations and alert boxes)
  • html5boilerplate.com – HTML, CSS, JS, Images (umožňuje "rychlý start" projektu)
  • matthewhartman.github.io/base – mobile first, Less, Sass
  • Open Framework
  • Foundation