Skip to main content

Bootstrap Material

Es ist relativ einfach, ein Bootstrap-material - Layout aus dem im CMS vorhandenen Bootswatch Scss 4.11 materia zu stricken :

Dazu trägt man einfach  @import url(//cdn.muicss.com/mui-0.9.39/extra/mui-noglobals.min.css);  in das custom.css des Layout-Editors ein und stellt die Texte in einen Mui-Container

(oder neuer :  @import url('https://cdn.muicss.com/mui-0.10.2/extra/mui-noglobals.min.css' );

https://github.com/muicss/mui/tree/master/packages/cdn/extra  => https://github.com/muicss/mui/blob/master/packages/cdn/extra/mui-noglobals.min.css )

<div class="mui-container">

Es fehlt noch das Zittern der Buttons - dazu gibt es Alternativen über  ein einfaches css wie auf diesem Git, dazu eine Demo.

Es fehlt auch noch das JS, das in das Template einzubinden ist - wenn man keine Bootstrap-Dropdowns einsetzen will.

* Aus dem  https://cdnjs.com/libraries/muicss  :

<script src="//cdn.muicss.com/mui-0.9.39/extra/mui-combined.min.js"></script> oder neuer 
 https://cdnjs.cloudflare.com/ajax/libs/muicss/0.10.2/extra/mui-combined.min.js   bzw. kopiert es aus
 https://github.com/muicss/mui/tree/master/packages/cdn/extra ->
 

* Hier eine Demoseite für Bootswatch 4.11 materia mit Mui.css (und Bootstrap 4) - (die Bootswatch4-Templates benötigen den Master 5.1b1 !)

* eine weitere Demoseite für Bootswatch Scss 3.3 - readable mit Mui.css (und Bootstrap 3.36)

  1.  Codepen :  Bootstrap Material
  2.  Codepen : Bootsrap 4 Material design Buttons
  3.  Codepen : Bootstrap 4 Material design Navs
  4.  Codepen : Bootstrap 4 Material side navigation
  5.  Codepen : Bootstrap 4 Material breadcrumbs
  6.  Codepen : Bootsprap 4 Material Carousel
  7.  Codepen : Bootstrap 4 Material Animations
  8.  Codepen : Bootstrap 4 Material responsive Email templates