Un examen plus approfondi des objets multimédias dans Bootstrap

Cet article vous fera découvrir les objets multimédias dans Bootstrap. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Recommandations associées : "tutoriel bootstrap"

Dans les pages Web, il est très courant que les Un examen plus approfondi des objets multimédias dans Bootstraps soient à gauche et content à droite. L'effet, qui est également un objet multimédia, est un style abstrait qui peut être utilisé pour construire différents types de composants dans le framework bootstrap, son fichier de version correspondant est le suivant :

LESS : media.less

SASS : _media.scss

Les objets multimédias apparaissent généralement en groupes. Un groupe d'objets multimédias comprend généralement les parties suivantes :

1. conteneur d'objet : utilisé pour contenir les médias Pour tout le contenu de l'objet, le nom de classe .media

doit être utilisé sur le conteneur 2. L'objet de l'objet média : généralement une Un examen plus approfondi des objets multimédias dans Bootstrap, la classe .media. -object

doit être utilisé. 3. Le corps de l'objet média : C'est le contenu principal de l'objet média, qui peut être n'importe quel élément. Vous devez utiliser la classe .media-body

4. Le titre de l'objet média : un titre utilisé pour décrire l'objet média Vous devez utiliser la classe .media-heading

De plus, les classes .pull-left et .pull. -right sont souvent utilisés dans le framework bootstrap pour contrôler le mode flottant des objets dans les objets multimédia

Voici leur code source CSS :

.media,
.media-body {
  overflow: hidden;
  zoom: 1;
}
.media,
.media .media {
  margin-top: 15px;
}
.media:first-child {
  margin-top: 0;
}
.media-object {
  display: block;
}
.media-heading {
  margin: 0 0 5px;
}
.media > .pull-left {
  margin-right: 10px;
}
.media > .pull-right {
  margin-left: 10px;
}

Media Le style est relativement simple, il suffit de définir le l'espacement entre eux;

Jetons un coup d'œil à l'utilisation des objets multimédias :

<h1>默认媒体对象</h1>
    <div>
        <a>
            <img  alt="Un examen plus approfondi des objets multimédias dans Bootstrap" >
        </a>
        <div>
            <h4>荷塘月色</h4>
            <div>这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的夜里，总该另有一 番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑……</div>
        </div>
    </div>

Imbrication multimédia d'objets

amorcez l'imbrication d'objets multimédias, placez simplement une autre structure d'objet multimédia dans le corps de l'objet multimédia (.media-body). Jetons un coup d'œil à l'effet de l'utilisation d'objets multimédias imbriqués

<h1>默认媒体对象的嵌套</h1>
    <div>
        <a>
            <img  alt="Un examen plus approfondi des objets multimédias dans Bootstrap" >
        </a>
        <div>
            <h4>荷塘月色</h4>
            <div>月光如流水一般，静静地泻在这一片片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。</div>
            <div>
                <a>
                    <img  alt="Un examen plus approfondi des objets multimédias dans Bootstrap" >
                </a>
                <div>
                    <h4>这里是嵌套内容1111</h4>
                    <div>荷塘的四面，远远近近，高高低低都是树，而杨柳最多。这些树将一片荷塘重重围住；只在小路一旁，漏着几段空隙，像是特为月光留下的。</div>
                    <div>
                        <a>
                            <img  alt="Un examen plus approfondi des objets multimédias dans Bootstrap" >
                        </a>
                        <div>
                            <h4>这里是嵌套内容2222</h4>
                            <div>树梢上隐隐约约的是一带远山，只有些大意罢了。树缝里也漏着一两点路灯光，没精打采的，是渴睡人的眼。这时候最热闹的，要数树上的蝉声与水里的蛙声；但热闹是它们的，我什么也没有</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

comme suit :

Media liste d'objets

Le framework bootstrap fournit un effet d'affichage de liste d'objets multimédia Vous pouvez utiliser la balise ul lors de l'écriture de la structure, ajouter le nom de classe .media-list à la balise ul et utiliser la balise ul. nom de classe sur la balise li .media

Par exemple :

<h1>媒体对象列表</h1>
    

        
•                                                        
                  

  媒体对象列表111

                  

  沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四周，长着许多树，蓊蓊（wěng）郁郁（2）的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。

              
          
        
•                                                        
                  

  媒体对象列表222

                  

  路上只我一个人，背着手踱（duó）着。这一片天地好像是我的；我也像超出了平常的自己，到了另一个世界里。我爱热闹，也爱宁静；爱群居，也爱独处。像今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个自由的人。

              
          
        
•                                                        
                  

  媒体对象列表333

                  

  白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。曲曲折折的荷塘上面，弥望（3）的是田田（4）的叶子。叶子出水很高，像亭亭的舞女的裙。层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的；正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。

              
          
        
•                                                        
                  

  媒体对象列表444

                  

  忽然想起采莲的事情来了。采莲是江南的旧俗，似乎很早就有，而六朝时为盛；从诗歌里可以约略知道。采莲的是少年的女子，她们是荡着小船，唱着艳歌（14）去的。采莲人不用说很多，还有看采莲的人。那是一个热闹的季节，也是一个风流（15）的季节。梁元帝（16）《采莲赋》里说得好：。

              
          
    

L'effet est le suivant :

Pour plus de programmation connaissances, veuillez visiter :

Enseignement de la programmation

 ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!