دوستان گرامی حالتون چطوره؟ خوبید؟ سلامتین؟در این آموزش چگونگی طراحی تصاویر، گریدهای تصاویر، ویدئوها و متن و غیره را با تویتر بوت استرپ فراخواهید گرفت.
طراحی تصاویر با تویتر بوت استرپ
در طراحی مدرن وب وجود تصاویر بسیار متداول است، بنابراین طراحی تصاویر و قرار دادن درست آنها روی صفحات وب برای بالا بردن تجربه ی یوزر بسیار مهم است. با استفاده از گروه های داخلی بوت استرپ می توانید به راحتی تصاویر را طراحی کنید، به عنوان مثال طراحی تصاویر با گوشه های گرد و یا دادن افکت به تصاویر.
مثال :
?
۱
۲
۳
۴
۵
<img class=”img-rounded” src=”/Administrator/125×125.jpg” alt=”Rounded Image”>
<img class=”img-circle” src=”/Administrator/125×125.jpg” alt=”Circular Image”>
<img class=”img-polaroid” src=”/Administrator/125×125.jpg” alt=”Polaroid Image”>
خروجی مثال بالا مانند زیر می باشد:
Bootstrap
نکته:
گروه های .img-rounded و .img-circle در IE8و ورژن پایین تر آن به خاطر پشتیبانی نشدن ویژگی CSS border –radiusکار نمی کنند.
تصاویر کوچک تویتر بوت استرپ
مولفه های تصاویر کوچک تویتر بوت استرپ برای ایجاد گریدهایی از تصاویر یا ویدئوها، لیست هایی از تولیدات، موجودی و غیره بسیار مفید می باشند. مثال زیر به شما نشان می دهد که برای نمایش لینک های تصاویر، تصاویر کوچکی ایجاد کنید.
مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
<div class=”container”>
<div class=”row”>
<div class=”col-xs-3″>
<a class=”thumbnail” href=”#”>
<img src=”/Administrator/125×125.jpg” alt=”125×125″>
</a>
</div>
<div class=”col-xs-3″>
<a class=”thumbnail” href=”#”>
<img src=”/Administrator/125×125.jpg” alt=”125×125″>
</a>
</div>
<div class=”col-xs-3″>
<a class=”thumbnail” href=”#”>
<img src=”/Administrator/125×125.jpg” alt=”125×125″>
</a>
</div>
<div class=”col-xs-3″>
<a class=”thumbnail” href=”#”>
<img src=”/Administrator/125×125.jpg” alt=”125×125″>
</a>
</div>
</div>
</div>
Bootstrap
همچنین می توانید مولفه های HTML مانند تیتر، پاراگراف و یا دکمه هایی را به این تصاویر اضافه کنید.
مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
<div class=”container”>
<div class=”row”>
<div class=”col-xs-6″>
<div class=”thumbnail”>
<img src=”/Administrator/125×125.jpg” alt=”Sample Image”>
<div class=”caption”>
<h3>Thumbnail label</h3>
<p>Thumbnail description…</p>
<p><a class=”btn btn-primary” href=”#”>Share</a><a class=”btn btn-default” href=”#”>Download</a></p>
</div>
</div>
</div>
<div class=”col-xs-6″>
<div class=”thumbnail”>
<img src=”/Administrator/125×125.jpg” alt=”Sample Image”>
<div class=”caption”>
<h3>Thumbnail label</h3>
<p>Thumbnail description…</p>
<p><a class=”btn btn-primary” href=”#”>Share</a><a class=”btn btn-default” href=”#”>Download</a></p>
</div>
</div>
</div>
</div>
</div>
نکته:
مولفه ی تصاویر کوچک از گروه های گرید موجود مانند .col-xs-*و .col-sm-* و .col-md-*و .col-lg-*برای کنترل ابعاد تصاویر استفاده می کند.
ایجاد فرم Layout افقیآبجکت های مدیا در تویتر بوت استرپ
گاهی اوقات ممکن است تمایل داشته باشید لی اوتی ایجاد کنید که دارای تصویر تنظیم شده در راست یا چپ به همراه محتوای متنی مانند تعدادی کامنت باشد. شما این کار را به راحتی می توانید از طریق مولفه ی مدیا بوت استرپ که تازه معرفی شده انجام دهید.
مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
<div class=”media”>
<a class=”pull-left” href=”#”>
<img class=”media-object” src=”/Administrator/125×125.jpg” alt=”Sample Image”>
</a>
<div class=”media-body”>
<h4 class=”media-heading”>
Jhon Carter <small><em>Posted on January 10, 2014</em></small>
</h4>
<p>Excellent feature! I love it. One day I’m definitely going to put this Bootstrap component into use and I’ll let you know once I do.</p>
</div>
</div>
خروجی مثال بالا مانند زیر می باشد. همچنین می توانید با استفاده از مولفه ی لیست مدیا، لیستی از اشیا مدیا یا اشیا مدیای تو در تو ایجاد کنید، که می تواند برای اظهار نظر موضوعات و لیست های مقاله مفید باشد.
مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
۶۳
۶۴
۶۵
۶۶
۶۷
۶۸
۶۹
۷۰
۷۱
۷۲
۷۳
۷۴
۷۵
۷۶
۷۷
۷۸
۷۹
۸۰
۸۱
۸۲
۸۳
۸۴
۸۵
۸۶
۸۷
۸۸
۸۹
۹۰
۹۱
۹۲
۹۳
۹۴
۹۵
۹۶
۹۷
۹۸
۹۹
۱۰۰
۱۰۱
۱۰۲
۱۰۳
۱۰۴
۱۰۵
۱۰۶
۱۰۷
۱۰۸
۱۰۹
۱۱۰
۱۱۱
۱۱۲
۱۱۳
۱۱۴
۱۱۵
۱۱۶
۱۱۷
۱۱۸
۱۱۹
<ul class=”media-list”>
<li class=”media”>
<a class=”pull-left” href=”#”>
<img class=”media-object” src=”/Administrator/125×125.jpg” alt=”Sample Image”>
</a>
<div class=”media-body”>
<h4 class=”media-heading”>
Media Heading
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipis elit…</p>
<!– Nested media object –>
<div class=”media”>
<a class=”pull-left” href=”#”>
<img class=”media-object” src=”/Administrator/125×125.jpg” alt=”Sample Image”>
</a>
<div class=”media-body”>
<h4 class=”media-heading”>
Nested Media Heading
</h4>
<p>Vestibulum consectetur scelerisque faucibus…</p>
<!– Nested media object –>
<div class=”media”>
<a class=”pull-left” href=”#”>
<img class=”media-object” src=”/Administrator/125×125.jpg” alt=”Sample Image”>
</a>
<div class=”media-body”>
<h4 class=”media-heading”>
Nested Media Heading
</h4>
<p>Integer pulvinar leo id risus tempor…</p>
</div>
</div>
</div>
</div>
<!– Nested media object –>
<div class=”media”>
<a class=”pull-left” href=”#”>
<img class=”media-object” src=”/Administrator/125×125.jpg” alt=”Sample Image”>
</a>
<div class=”media-body”>
<h4 class=”media-heading”>
Nested Media Heading
</h4>
<p>Phasellus vitae suscipit justo mauris…</p>
</div>
</div>
</div>
</li>
<li class=”media”>
<a class=”pull-left” href=”#”>
<img class=”media-object” src=”/Administrator/125×125.jpg” alt=”Sample Image”>
</a>
<div class=”media-body”>
<h4 class=”media-heading”>
Media Heading
</h4>
<p>Quisque pharetra velit id velit iaculis pretium…</p>
</div>
</li>