На веб -странице изображение находится слева, а содержание расположены справа, что является очень распространенным эффектом. Это также медиа -объект. Это абстрактный стиль, который можно использовать для создания различных типов компонентов. Соответствующие файлы версий в платформе начальной загрузки следующие:
Меньше: СМИ
Sass: _media.scss
Объекты медиа обычно появляются в группах, а группа медиа -объектов обычно включает в себя следующие части:
1. Контейнер объекта медиа: используется для размещения всего содержимого медиа -объектов. Имя класса должно использоваться в контейнере. СМИ
2. Объект объекта медиа: обычно требуется картина и класс. Медиа-объект.
3. Предмет объекта медиа: это предметный содержимое объекта медиа. Это может быть любой элемент и требует использования класса. Медиа-тел
4. Название объекта СМИ: заголовок, используемый для описания объекта медиа, требуется заголовок Class.Media.
Кроме того, классы .pull-left и .pull-Right-Right часто используются в платформе начальной загрузки для управления плавающим методом объектов в объектах носителя.
Вот их исходный код CSS:
.media, .media-body {overflow: hidden; Zoom: 1;}. Media, .media .media {margin-top: 15px;}. Media: первый ребенок {margin-top: 0;}. Media-object {display: block;}. Media-heading {margin: 0 0 5px;}. Media> .pull-Left-Left {media-right {media-right {media-right {media-right; > .pull-right {margin-left: 10px;}Стилиты медиа относительно просты, просто установите интервал между ними;
Давайте посмотрим на использование медиа -объектов:
<h1> Media Object </h1> <div> <a href = "#"> <img src = "img/1.jpg"> </a> <div> <h4> Лунный свет в пруду лотоса </h4> <div> Я совершенно не понимаю в эти дни. Сегодня я сидел во дворе, чтобы насладиться прохладным воздухом, и вдруг вспомнил пруд Лотоса, который я ходил каждый день. В эту ночь полнолуния я всегда должен выглядеть по -другому. Луна постепенно поднялась, и смех детей на дороге за стены ... </div> </div> </div>
Гнездование объектов медиа
Bootstrap Media Objects Nest, просто поместите еще одну структуру объекта медиа в организму объекта медиа (.Media-body). Давайте посмотрим на применение гнездования объекта медиа -объекта
<h1> гнездование объектов носителя по умолчанию </h1> <div> <a href = "#"> <img src = "img/3.jpg"> </a> <div> <h4> лунный свет в пруду лотоса </h4> <div> Лунный свет тихо льется на эти листья и цветы, как текущая вода. Тонкий синий туман плавал в пруду лотоса. Листья и цветы, кажется, были вымыты в молоке; Они также как мечты, покрытые вуалью. Хотя это полная луна, в небе есть слабый облако, поэтому оно не может ярко светить; Но я думаю, что это просто преимущество - глубокий сон необходим, а сон имеет уникальный вкус. </div> <div> <a href = "#"> <img src = "img/4.jpg"> </a> <div> <h4> Вот вложенное содержание1111 </h4> <div> Четыре стороны пруда лотоса, далеко, близкие, высокие и низкие, деревья и Willows - самая большая. Эти деревья окружали лотосский пруд; Они были только на стороне пути, с несколькими пробелами, как будто они остались специально для лунного света. </div> <div> <a href = "#"> <img src = "img/5.jpg"> </a> <div> <h4> Вот вложенное содержание 2222 </h4> <div> На отдаленных горе на деревьях, и это лишь немного бесцельно. Был также один или два уличных огня, протекающие из трещин на дереве. То, что было вялым, было глазами спящих людей. Самая живая вещь в это время - это звук цикад на деревьях и звук лягушек в воде; Но волнение - это их, и у меня нет ничего </div> </div> </div> </div> </div> </div> </div>
Эффекты следующие:
Список объектов медиа
Bootstrap Framework предоставляет эффект отображения списка медиа -объектов. При написании структур вы можете использовать TAG UL и добавить имя класса в Tag Ul.Media-List и использовать класс на TAG UL.Media.
Например:
<h1> Список объектов медиа </h1> <ul> <li> <a href = "#"> <img src = "img/1.jpg"> </a> <div> <h4> Список объектов медиа 111 </h4> <div> Вдоль лотоса пруда, это извилистая небольшая угольная дорога. Это уединенная дорога; Немногие люди ходят в течение дня, и ночью это еще более одиноко. Есть много деревьев, растущих вокруг пруда Лотоса, и они в депрессии (2). На обочине дороги были ивы и некоторые деревья с неизвестными именами. В ночь без лунного света дорога была мрачной и немного напугала людей. Сегодня вечером было очень хорошо, хотя лунный свет был все еще слабым. </div> </div> </li> <li> <a href = "#"> <img src = "img/2.jpg"> </a> <div> <h4> Список объектов Media 222 </h4> <div> Я был единственным на дороге, идя с моими руками за спиной. Этот мир кажется моим; Я также чувствую, что я за пределами своего обычного я и вошел в другой мир. Я люблю волнение и спокойствие; Я люблю жить в группах и быть одиноким. Как и сегодня вечером, под этой обширной луной вы можете думать ни о чем и ни о чем не думаете, и вы будете чувствовать, что вы свободный человек. </div> </div> </li> <li> <a href = "#"> <img src = "img/3.jpg"> </a> <div> <h4> Список объектов медиа 333 </h4> <div> То, что вы должны делать и сказать в течение дня, теперь может быть проигнорирован. Это красота одиночества, и я буду наслаждаться бесконечным ароматом лотоса и лунным светом. Над ветром лотосного пруда листья полей (4) находятся везде. Листья очень высокие, как юбка высокого танцора. Среди слоев листьев некоторые белые цветы спорадически пунктируются, некоторые изящно цветут, а некоторые застенчивы играют с цветами; Так же, как жемчуг, звезды в голубом небе и красота, просто из ванны. Бриз приносит лучи аромата, как будто тишина пения на высоких зданиях на расстоянии. </div> </div> </li> <li> <a href = "#"> <img src = "img/4.jpg"> </a> <div> <h4> Список объектов медиа 444 </h4> <div> Внезапно я вспомнил историю о выборе Lotus. Выбор лотоса - старый обычай в Цзянганне. Похоже, он существовал очень рано, но во время шести династий было процветающим; Мы можем приблизительно знать это из поэзии. Те, кто выбрал Lotus, были молодыми женщинами, которые ходили туда в маленьких лодках и поют эротические песни (14). Само собой разумеется, есть много людей, которые выбирают лотос. Есть также люди, которые выбирают лотос. Это был живой сезон и романтический (15). Император Юань из Ляна (16 лет) сказал это хорошо в «лотосе, собирающем фу»:. </div> </div> </li> </ul>
Эффекты следующие: