I. Preface
Now let's start with bootstrap's media, close and well styles.
Two, source code
1,media.less
1.1, media.less source code
.media {
// Proper spacing between instances of .media
margin-top: 15px;
&:first-child {
margin-top: 0;
}
}
.media,
.media-body {
zoom: 1;
overflow: hidden;
}
.media-body {
width: 10000px;
}
.media-object {
display: block;
// Fix collapse in webkit from max-width: 100% and display: table-cell.
&.img-thumbnail {
max-width: none;
}
}
.media-right,
.media > .pull-right {
padding-left: 10px;
}
.media-left,
.media > .pull-left {
padding-right: 10px;
}
.media-left,
.media-right,
.media-body {
display: table-cell;
vertical-align: top;
}
.media-middle {
vertical-align: middle;
}
.media-bottom {
vertical-align: bottom;
}
// Reset margins on headings for tighter default spacing
.media-heading {
margin-top: 0;
margin-bottom: 5px;
}
// Media list variation
//
// Undo default ul/ol styles
.media-list {
padding-left: 0;
list-style: none;
}1.2. media.less Applications
<ul class="media-list">
<li class="media">
<! - Use table layout for peer display - >
<a class="media-left" href="#">
<img src="https://raw.githubusercontent.com/zss007/blog/master/bootstrap/assets/kittens.jpg" width="64px"
alt= "Universal placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">media Title </h4>
<p> Here are some sample texts. Here are some sample texts.
Here are some sample texts. Here are some sample texts.
Here are some sample texts. Here are some sample texts.
Here are some sample texts. Here are some sample texts.
Here are some sample texts. Here are some sample texts. </p>
<! - Nested Media Objects - >
<div class="media">
<a class="media-left" href="#">
<img src="https://raw.githubusercontent.com/zss007/blog/master/bootstrap/assets/kittens.jpg" width="64px"
alt= "Universal placeholder image"> </a>
<div class="media-body">
<h4 class="media-heading">nested media title </h4>
Here are some sample texts. Here are some sample texts.
Here are some sample texts. Here are some sample texts.
Here are some sample texts. Here are some sample texts.
Here are some sample texts. Here are some sample texts.
Here are some sample texts. Here are some sample texts.
<! - Nested Media Objects - >
<div class="media">
<a class="media-left" href="#">
<img src="https://raw.githubusercontent.com/zss007/blog/master/bootstrap/assets/kittens.jpg" width="64px"
alt= "Universal placeholder image"> </a>
<div class="media-body">
<h4 class="media-heading">nested media title </h4>
Here are some sample texts. Here are some sample texts.
Here are some sample texts. Here are some sample texts.
Here are some sample texts. Here are some sample texts.
Here are some sample texts. Here are some sample texts.
Here are some sample texts. Here are some sample texts.
</div>
</div>
</div>
</div>
<! - Nested Media Objects - >
<div class="media">
<a class="media-left" href="#">
<img src="https://raw.githubusercontent.com/zss007/blog/master/bootstrap/assets/kittens.jpg" width="64px"
alt= "Universal placeholder image"> </a>
<div class="media-body">
<h4 class="media-heading">nested media title </h4>
Here are some sample texts. Here are some sample texts.
Here are some sample texts. Here are some sample texts.
Here are some sample texts. Here are some sample texts.
Here are some sample texts. Here are some sample texts.
Here are some sample texts. Here are some sample texts.
</div>
</div>
</div>
</li>
<li class="media">
<a class="media-right" href="#">
<img src="https://raw.githubusercontent.com/zss007/blog/master/bootstrap/assets/kittens.jpg" width="64px"
alt= "Universal placeholder image"> </a>
<div class="media-body">
<h4 class="media-heading">media Title </h4>
Here are some sample texts. Here are some sample texts.
Here are some sample texts. Here are some sample texts.
Here are some sample texts. Here are some sample texts.
Here are some sample texts. Here are some sample texts.
Here are some sample texts. Here are some sample texts.
</div>
</li>
</ul>2,close.less
2.1, close.less source code
//
// Close icons
// --------------------------------------------------
.close {
float: right;
font-size: (@font-size-base * 1.5);
font-weight: @close-font-weight;
line-height: 1;
color: @close-color;
text-shadow: @close-text-shadow;
.opacity(.2);
&:hover,
&:focus {
color: @close-color;
text-decoration: none;
cursor: pointer;
.opacity(.5);
}
// Additional properties for button version
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
button& {
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
}
}2.2, close.less application
<span class="close">x</span>3,wells.less.less
3.1, wells.less source code
//
// Wells
// --------------------------------------------------
// Base class
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: @well-bg;
border: 1px solid @well-border;
border-radius: @border-radius-base;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
blockquote {
border-color: #ddd;
border-color: rgba(0,0,0,.15);
}
}
// Sizes
.well-lg {
padding: 24px;
border-radius: @border-radius-large;
}
.well-sm {
padding: 9px;
border-radius: @border-radius-small;
}3.2. wells.less Application
Box-shadow: inset achieves the effect of depression - > <div class="well">Hello, I'm in Well! </div> <div class= "well-lg">Hello, I'm in the big Well! </div> <div class="well-sm"> Hello, I'm in Little Well! </div>