Cliquez

Bublello php and css framework

text

class="z-depth-0 shadow-demo"

ext ever szince the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets cont xt ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets cont xt ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets cont

Ombre

Dans le material design, toute chose devrait avoir un certain index de profondeur (z) déterminant à quelle hauteur se trouver l'élément par rapport à la page.
Pour cela il vous suffit de rajouter class="z-depth-x" ou x est un entier compris entre 0 et 5 compris. class="z-depth-0" peut etre utilisé pour enlever les ombres par default.

z-depth-0

z-depth-1

z-depth-2

z-depth-3

z-depth-4

z-depth-5

code

On peut insérer facilement du code en grosse partie:

Soit des petits mots a ajouter directement dans du texte:

'votre petit bout de code'

tableau

Les tableaux sont un bon moyen d'organiser de grandes quantités d'informations. Nous fournissons quelques classes afin d'aider la personnalisation des tableaux. De plus, afin d'améliorer l'expérience sur mobile, les tableaux sur les largeurs d'affichage mobile sont automatiquement centrées.
Les tableaux sont sans bordure par défaut vous pouvez ajouter des options dans l'atribut class=" " que vous pouvez fusioner.

Nom Prenom
Pierre Jean
Dupont Anabelle
Doo Jhon

Tableau à bordure

Ajoutez class="bordered" pour ajouter des bordures

Nom Prenom
Pierre Jean
Dupont Anabelle
Doo Jhon

Tableau rayé

Ajoutez class="striped" pour avoir une ligne sur deux grisé.

Nom Prenom
Pierre Jean
Dupont Anabelle
Doo Jhon

Tableau rayé réactif

Ajoutez class="highlight" pour avoir une ligne lorsque l'on passe par dessus.

Nom Prenom
Pierre Jean
Dupont Anabelle
Doo Jhon

Tableau centré

Ajoutez class="centered" pour aligner tout le texte en centré.

Nom Prenom
Pierre Jean
Dupont Anabelle
Doo Jhon

radio

check box

select

image

Ces divs ont par default un min-heigt de 200px et la largeur de leurs parent mais vous pouvez changer leurs dimensions a bonne essient! Le code de base pour afficher une image responsive est:

Quelques options que vous pouvez fusioner a ajouter dans la balise img.

Fonction
class="grayscale" image en noir et blanc
class="parallax" image avec un effet paralax
data-image-height="20vh" hauteur de l'image, vous pouvez remplacer 20vh par nimporte quel autre unité de mesure