Quelle classe d'amorçage 3 dois-je utiliser pour créer une liste verticale d'éléments / "cartes" (Rails 3.2, bootstrap3)

Je suis la construction d'un quotidien traiter application pour apprendre Ruby on Rails.

Je suis en train de construire la page d'accueil. Je voudrais, c'est simplement une liste verticale de "cartes" (voir http://insideintercom.io/why-cards-are-the-future-of-the-web/), ou plus simplement, une liste verticale des éléments de chacun d'entre eux est un rectangle horizontal avec une bordure grise.

Je suis nouveau sur bootstrap et il ya tellement de nombreuses classes disponibles.
Est-il celui que je pourrais utiliser pour ces "cartes", même si je dois remplacer un peu de css par la suite?

Ici est un exemple du genre de la "simple rectangle vertical liste" j'aimerais avoir.
Quelle classe d'amorçage 3 dois-je utiliser pour créer une liste verticale d'éléments /

Peut-être de la classe "list-group-item" mais mon rectangles sont tous séparés comme vous le voyez dans l'image (j'.e ils ne se touchent pas les uns les autres) et j'ai besoin de titre rouge au-dessus de chaque rectangle (j'.e le titre est à l'extérieur du rectangle/élément) donc je ne suis pas sûr que c'est le bon choix.

Est-il un meilleur match de la classe de bootstrap 3 pour ce que je veux faire?

source d'informationauteur Mathieu | 2013-09-21

  1. 13

    Que sur le dessus de ma tête, c'est vous cracher liste non ordonnée > list-group-item > div > plus de div > texte

    J'ai fait un exemple. commander ici http://jsfiddle.net/kuntau/X5Wvn/

    HTML 

    <div class="container" >
    <ul class="list-group">
    <li>
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="panel-info">
                    <p><strong>Tel: 011-345-898</strong></p>
                    <p>9182 Lorem Ipsum<br />
                        consectetur adipiscing elit.<br />
                       Nullam vel lacus felis.</p>
                </div>
                <div class="panel-rating">
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <p>Rate Yourself!</p>
                </div>
                <div class="panel-more1">
                    <img src="http://lorempixel.com/100/100" />
                    <br /><span>Caption</span>
                </div>
                <div class="panel-more1">
                    <img src="http://lorempixel.com/100/100" />
                    <br /><span>Caption</span>
                </div>
                <div class="panel-more1">
                    <img src="http://lorempixel.com/100/100" />
                    <br /><span>Caption</span>
                </div>
            </div>
        </div>
    </li>
</ul>
</div>

    CSS 

    .list-group li {
    list-style: none;
}
.panel-info, .panel-rating, .panel-more1 {
    float: left;
    margin: 0 10px;
}
  2. 5

    Comment sur l'utilisation de panneau d'en-tête et système de grille à tirer pleinement profit de la réactivité:

    <div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Item title</h3>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-sm-3">first column</div>
            <div class="col-sm-3">secondcolumn</div>
            <div class="col-sm-2">3rd column</div>
            <div class="col-sm-2">4th column</div>
            <div class="col-sm-2">5th column</div>
        </div>

    Avec juste un peu de CSS pour le rendu des bordures verticales:

    div.row > div:first-child {
    border-right: 1px solid #ccc;
}
div.row > div:nth-child(5) {
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
}

    Vérifier ce violon: http://jsfiddle.net/bostaf/eqn93g6j/. Redimensionner la fenêtre pour voir la réactivité dans l'action.