Tomáš Daněk

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
     • výchozí metodou je BootstrapCDN v případě zdrojového kódu postupujte dle Bootstrap Dokumentace
4. V 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 Library. 
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:

• Bootstrap sub-theming "how to"
• Bootstrap theming techniques and tips
• atd.

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 
  • sticky-footer-navbar
  • theme 
• Neresponzivní šablona:
  • non-responsive

Tipy:

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

Podobná témata:

• Open Framework (založeno na Bootstrap)
• ZURB Foundation (založeno na Foundation)

Přehled webových frameworků:

• getskeleton.com – normalize + pouze jeden CSS soubor 
• purecss.io – jen samostatné CSS soubory 
• 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