Google Plus les cartes de type mise en page en HTML

Dans Google Plus, ils utilisent une carte de présentation type qui a l'air vraiment cool. Facebook utilise la même mise en page pour la timeline. Je tiens à mettre en œuvre une telle mise en page pour mon site. Mais je ne sais pas comment commencer. Voici les choses que j'ai besoin de savoir:

  1. Quel est le nom de ce type particulier de mise en page?
  2. Comment puis-je mettre en œuvre cette disposition dans ma Page Web?

Merci...

(Voici quelques images pour vous aider à savoir de quoi je parle)

Google Plus les cartes de type mise en page en HTML

Facebook Timeline Mise en page http://www.formicmedia.com/wp-content/uploads/2011/09/Capture2.jpg

InformationsquelleAutor Adifyr | 2014-03-10
  1. 9

    Voici un exemple Google plus modèle qui utilise Bootstrap. En gros, c'est une des cartes de mise en page avec double navbars en haut.

    Code: http://www.bootply.com/90113

    Aperçu: http://www.bootply.com/render/90113

    <nav></nav>
<nav></nav>
<div class="container">
   <div class="row">
     <div class="col-md-4 col-sm-6">
        <!-- 1 or more panel/cards inside col -->
     </div>
     <div class="col-md-4 col-sm-6">
        <!-- 1 or more panel/cards inside col -->
     </div>
     <div class="col-md-4 col-sm-6">
        <!-- 1 or more panel/cards inside col -->
     </div>
   </div>
</div>
    • merci mais je ne vais pas avoir besoin de tout cela. Pouvez-vous s'il vous plaît dites-moi la mise de base, par exemple, il suffit de prendre des cartes vierges (carrés vides ou <div>). Comment puis-je mettre en œuvre une base de mise en page comme ça?
    • En général, il est fait à l'aide de DIV flottant, mais il existe de nombreuses variations. Inspecter le code HTML et CSS pour savoir comment c'est fait.
    • bootstrapzero est un lien brisé.
    InformationsquelleAutor Zim
  2. 1

    Si vous voulez que google cartes (google keep, la voiture et beaucoup plus), vous pouvez aller avec la conception de matériel.

    Matériel CSS est une très bonne façon d'aller. Il met en œuvre la Conception de Matériaux CSS et javascript:

    HTML:

    <!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">


<body>
  <div class="container">
    <div class="card">
      <div class="card-image waves-effect waves-block waves-light">
        <img class="activator" src="http://placeimg.com/320/240/any">
      </div>
      <div class="card-content">
        <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">Some information</i></span>
        <p><a href="#">This is a link</a>
        </p>
      </div>
      <div class="card-reveal">
        <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
        <p>Here is some more information about this product that is only revealed once clicked on.</p>
      </div>
    </div>
  </div>
</body>

    Il est très populaire de la bibliothèque sur GitHub et possède des ports pour beaucoup de cadres et de bibliothèques, y compris Sass. J'utilise cette bibliothèque comme un rubis gemme.

    InformationsquelleAutor vedant