Twitter Bootstrap Lists
با سلام کاربران عزیز امیدوارم که خوب باشید با آموزشی دیگر در زمینه بوت استرپ درخدمت شما هستم امیدوارم که این مطالب برای شمامفید واقع گردد.
در این آموزش فراخواهید گرفت که چگونه استایل هایی با انواع مختلف لیست ها با تویتر بوت استرپ به کار بگیرید.
ایجاد لیست با تویتر بوت استرپ
شما می توانید سه نوع مختلف لیست تعریف کنید . لیست های بدون ساختار –لیست یارآیتم ها که درآن ترتیب مهم نیست. آیتم های لیست در لیست های بدون ساختار با نقطه های گرد مشخص شده اند. لیست های منظم – لیست یارآیتم ها که در آن ترتیب مشخص میباشد. آیتم های لیست درلیست منظم با اعداد مشخص می شوند. لیست تعریف –لیست یار آیتم ها با توصیفات مربوط به آن ها.
لیست های منظم و نامنظم بدون سبک
گاهی اوقات ممکن است لازم باشد طراحی پیش فرض را از آیتم های لیست حذف کنید. این کار را می توانید به راحتی با به کار بردن گروه .list-unstyled برای عناصر مربوط به Ul یا ol انجام دهید.
مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
<ul class=”list-unstyled”>
<li>
Home
</li>
<li>
Products
<ul>
<li>
Gadgets
</li>
<li>
Accessories
</li>
</ul>
</li>
<li>
About Us
</li>
<li>Contact</li>
</ul>
خروجی مثال بالا مانند زیر می باشد .
http://articles.tahlildadeh.com/image.axd?picture=image_thumb_2029.png
ایجاد قالب با نمای سه ستونه (۳ columns layout)
به همین ترتیب می توانید بر اساس اصل ذکر شده، نما و layout های متنوع و متفاوت طراحی نمایید. مثال زیر یک نمای سه ستونه برای صفحه نمایش لپ تاپ و دسکتاپ تعریف می کند. این layout یا طرح بندی در تبلت هایی که محتوا را با نمای افقی (landscape mode) نمایش داده و وضوح تصویر آن ها بیشتر یا برابر ۹۹۲ پیکسل می باشد (مانند Apple iPad) نیز قابل استفاده می باشد. اما در نمای عمودی (portrait mode) مثل حالت پیش فرض افقی می باشد.
مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
<div class=”container”>
<!–Row with three equal columns—
سطری با سه ستون که دارای عرض یکسان هستند–>
<div class=”row”>
<div class=”col-md-4″><!–Column left–></div>
<div class=”col-md-4″><!–Column middle–></div>
<div class=”col-md-4″><!–Column right–></div>
</div>
<!–Row with three columns divided in 1:4:1 ratio—
سطری با سه ستون که عرض آن ها نسبت نام برده را رعایت می کند–>
<div class=”row”>
<div class=”col-md-2″><!–Column left–></div>
<div class=”col-md-8″><!–Column middle–></div>
<div class=”col-md-2″><!–Column right–></div>
</div>
<!–Row with three columns divided unevenly—
سطری با سه ستون که هر یک دارای عرضی متفاوت است–>
<div class=”row”>
<div class=”col-md-3″><!–Column left–></div>
<div class=”col-md-7″><!–Column middle–></div>
<div class=”col-md-2″><!–Column right–></div>
</div>
</div>
نکته:
کلاس .visible-md-block تنها در دستگاه هایی که عرض صفحه ی نمایش آن ها متوسط است کلاس .clearfix را اعمال می کند.
Bootstrap
نکته:
گروه .list-unstyledسبک پیش فرض لیست و لایه گذاری چپ را فقط از آیتم هایی مربوط به لیست حذف می کند که زیرمجموعه های اولیه ی عنصر ul یا ol می باشند.
قرار دادن آیتم های لیست های منظم و نامنظم درون خط
اگر تمایل دارید با استفاده از لیست های منظم و نامنظم مورد نیاز یک منوی افقی ایجاد کنید لازم است تمام آیتم ها را در یک خط قرار دهید، برای مثال در کنار یکدیگر. شما می توانید این کار را به راحتی با به کار بردن گروه بوت استرپ .list-inline برای عناصر مربوط به
انجام دهید. گروه .list-inline همچنین لایه های چپ و راست به همه ی آیتم های لیست اضافه می کند.
مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
<ul class=”list-inline”>
<li>
Home
</li>
<li>
About Us
</li>
<li>
Products
</li>
<li>
Services
</li>
<li>Contact</li>
</ul>
خروجی مثال بالا مانند زیر می باشد .
Bootstrap
ایجاد لیست های تعریف افقی
ترم ها و توصیفات در لیست های تعریف با استفاده از گروه بوت استرپ .dl-horizontal می توانند کنار یکدیگر قرار بگیرند.اگر ترم ها در لیست های افقی تعریف برای قرار گرفتن در ستون طولانی باشند، کوتاه می شوند. به هرحال در ویوپورت های باریک تر پیش فرض لی اوت را تغییر می دهند.
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
<dl class=”dl-horizontal”>
<dt>
User Agent
</dt>
<dd>
An HTML user agent is any device that interprets HTML documents.
</dd>
<dt>
Client-side Scripting
</dt>
<dd>
Client-side scripting generally refers to the category of computer programs on the web that are executed client-side i.e. by the user’s web browser.
</dd>
<dt>
Document Tree
</dt>
<dd>The tree of elements encoded in the source document.</dd>
</dl>
خروجی مثال بالا مانند زیر می باشد .
Bootstrap
نکته:
اصطلاح های کوتاه در لیست های تعریف افقی به وسیله ی حذف به قرینه و سه نقطه (…)نشان داده خواهد شد.
گروه های لیست تویتر بوت استرپ
گروه های لیست مولفه های مفیدی برای نمایش لیست هایی از آیتم ها به یک روش زیبا می باشد.
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
<ul class=”list-group” style=”width: 200px;”>
<li class=”list-group-item”>
Pictures
</li>
<li class=”list-group-item”>
Documents
</li>
<li class=”list-group-item”>
Music
</li>
<li class=”list-group-item”>
Videos
</li>
</ul>
خروجی مثال بالا مانند زیر می باشد.
Bootstrap
به علاوه می توانید آیتم های گروه لیست را با تغییر کوچک در نشانه گذاری HTML لینک کنید.
را با برچسب جایگزین کنید و از عنصر
به عنوان منبع به جای
استفاده کنید. همچنین می توانید icons و badges را به این لیست اضافه کنید تا آن را زیباتر کنید. مولفه ی برچسب ها به طور خودکار در سمت راست قرار می گیرد.
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
<a>
</a><div class=”list-group” style=”width: 200px;”><a>
</a><a class=”list-group-item active” href=”#”>
<span class=”glyphicon glyphicon-camera”>
</span> Pictures <span class=”badge”>
۲۵
</span>
</a>
<a class=”list-group-item” href=”#”>
<span class=”glyphicon glyphicon-file”>
</span> Documents <span class=”badge”>
۱۴۵
</span>
</a>
<a class=”list-group-item” href=”#”>
<span class=”glyphicon glyphicon-music” style=”width: 200px;”>
</span> Music <span class=”badge”>
۵۰
</span>
</a>
<a class=”list-group-item ” href=”#”>
<span class=”glyphicon glyphicon-film “>
</span> Videos <span class=”badge”>
۸
</span>
</a>
</div>
خروجی مثال بالا مانند تصویر زیر خواهد بود.
Bootstrap
نکته:
شما می توانید از مولفه ی لیست بوت استرپ برای ایجاد مسیریاب نوار کناری استفاده کنید. به عنوان مثال نمایش مولفه ها یا لیست تولید در وب سایت شما.
شما همچنین می توانید عناصر HTMLدیگری مانند تیترها و پاراگراف را به این لیست ها اضافه کنید.
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
<div class=”list-group”>
<a class=”list-group-item” href=”#”>
<h4 class=”list-group-item-heading”>
What is HTML?
</h4>
<p class=”list-group-item-text”>
HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.
</p>
</a>
<a class=”list-group-item active” href=”#”>
<h4 class=”list-group-item-heading”>
What is Twitter Bootstrap?
</h4>
<p class=”list-group-item-text”>
Twitter Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of HTML and CSS based design template.
</p>
</a>
<a class=”list-group-item” href=”#”>
<h4 class=”list-group-item-heading”>
What is CSS?
</h4>
<p class=”list-group-item-text”>
CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc.
</p>
</a>
</div>
خروجی مثال بالا مانند زیر می باشد.
Bootstrap
یا
