کاربران عزیز امروز میخوام درموردطراحی و فرمت متن براتون توضیح بدم در این آموزش محتوای متن مانند تیترها، پاراگراف ها، نقل قول ها و غیره با twitter bootstrap مطالبی فرا خواهید گرفت.
کار با تیتر
?
۱
۲
شما می توانید تمام تیترهای HTMLی (<h1>تا</h1><h6> )را از طریق بوتسترپ تعریف کنید. همچنین اگر می خواهید روش به کار برده شده روی متن مانند تیترها باشد، می توانید از گروه های تیتر .h1 تا .h6 نیز استفاده کنید.
</h6>
مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
خروجی مثال بالا مانند تصویر زیر خواهد بود.
Bootstrap
به علاوه می توانید از برچسب یا به همراه گروه .small برای نمایش متن ثانویه ی هر تیتر در یک نمونه ی کوچکتر و روشن تر استفاده کنید.
مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
خروجی مثال بالا شبیه تصویر زیر خواهد بود .
Bootstrap
ایجاد تیترهای صفحه
می توانید با استفاده از مولفه ی تیتر صفحه، تیتر
خود را طوری بسازید که با دیگر تیترهای روی صفحه متفاوت به نظر برسد. همچنین می توانید از برچسب برای مارکدار کردن متن مربوط به تیتر استفاده کنید.
مثال :
?
۱
۲
۳
۴
۵
۶
<div class=”page-header”>
<h1>Twitter Bootstrap <small>An intuitive front-end framework</small></h1>
</div>
خروجی مثال بالا مانند تصویر زیر خواهد بود .
Bootstrap
کار با پاراگراف ها
اندازه فونت جهانی بوت استرپ ۱۴px با ارتفاع خط ۱٫۴۲۸ می باشد که برای متن و همه ی پاراگراف استفاده می شود. علاوه بر آن دکمه ی حاشیه از نیمه ی ارتفاع خط برای کل پاراگراف ها استفاده می شود. شما می توانید پاراگرافی با اضافه کردن گروه .lead بسازید.
مثال :
?
۱
۲
۳
۴
<p>This is how a normal paragraph looks like in Twitter Bootstrap.</p>
<p class=”lead”>This is how a paragraph stands out in Twitter Bootstrap.</p>
کد HTML مثال بالا نتیجه ی زیر را به دنبال دارد.
http://articles.tahlildadeh.com/image.axd?picture=image_thumb_2016.png Bootstrap
شما می توانید به راحتی با استفاده از گروه های هم ترازی متن یک پاراگراف و دیگر عناصر آن را در داخل یک متن تنظیم کنید.
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
<p class=”text-left”>
Left aligned text.
</p>
<p class=”text-center”>
Center aligned text.
</p>
<p class=”text-right”>
Right aligned text.
</p>
<p class=”text-justify”>
Justified text
</p>
<p class=”text-nowrap”>No wrap text.</p>
قالب بندی متن twitter bootstrap
شما در استفاده از برچسب های قالب بندی متن مانند ، و برای بولد کردن، ایتالیک کردن و یا کوچک کردن متن خود آزاد هستید، به همان روشی که در HTML انجام می دادید.
مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
<p><strong>This is bold text</strong></p>
<p><big>This is big text</big></p>
<p><code>This is computer code</code></p>
<p><em>This is emphasized text</em></p>
<p><em>This is italic text</em></p>
<p>This is highlighted text</p>
<p><small>This is small text</small></p>
<p><strong>This is strongly emphasized text</strong></p>
<p>This is <sub>subscript</sub> and <sup>superscript</sup></p>
<p><ins>This text is inserted to the document</ins></p>
<p><del>This text is deleted from the document</del></p>
خروجی مثال بالا مانند تصویر زیر می باشد.
Bootstrap
گروه های تغییردهی متن
شما می توانید همچنین متن را به حروف کوچک یا بزرگ تغییر دهید .
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
۶۳
۶۴
۶۵
۶۶
۶۷
۶۸
۶۹
۷۰
۷۱
۷۲
۷۳
۷۴
۷۵
۷۶
۷۷
۷۸
۷۹
۸۰
۸۱
۸۲
۸۳
۸۴
۸۵
۸۶
<p class=”text-lowercase”>
The quick brown fox jumps over the lazy dog.
</p>
<p class=”text-uppercase”>
The quick brown fox jumps over the lazy dog.
</p>
<p class=”text-capitalize”>The quick brown fox jumps over the lazy dog.</p>
<pre> <p>خروجی مثال بالا مانند تصویر زیر می باشد .</p>
<img class=”img-responsive text-center” title=”Bootstrap” src=”http://articles.tahlildadeh.com/image.axd?picture=image_thumb_2018.png” alt=”Bootstrap”>
<h2 class=”InnerTitle”><img src=”/Administrator/Image/InnerTitle.png” alt=””>گروه های تاکید در متن</h2>
<p>رنگ ها مهم ترین روش برای انتقال اطلاعات مهم در وب سایت می باشد.
بوت استرپ گروه هایی برای تاکید دارد که می توانند برای اهدافی مانند نشان دادن پیام موفق به رنگ سبز، خطا یا هشدار به رنگ قرمز و غیره استفاده شود.</p>
<p><span class=”SampleTitle”> <img src=”/Administrator/Image/code.png” alt=””>مثال :</span></p>
<pre id=”codes” class=”brush: html;”> <p class=”text-muted”>
Muted: This text is grayed out.
</p>
<p class=”text-primary”>
Important: Please read the instructions carefully before proceed.
</p>
<p class=”text-success”>
Success: Your message has been sent successfully.
</p>
<p class=”text-info”>
Note: You must agree with the terms and conditions to complete the sign up process.
</p>
<p class=”text-warning”>
Warning: There was a problem with your network connection.
</p>
<p class=”text-danger”>Error: An error has been occurred while submitting your data.</p>
</pre>
<p>خروجی مثال بالا مانند زیر می باشد .</p>
<img class=”img-responsive text-center” title=”Bootstrap” src=”http://articles.tahlildadeh.com/image.axd?picture=image_thumb_2019.png” alt=”Bootstrap”>
<h2 class=”InnerTitle”><img src=”/Administrator/Image/InnerTitle.png” alt=””>طراحی نقل قول</h2>
<p>شما می توانید به نقل قول خود نیز ظاهری زیبا بدهید – تنها بااستفاده از استاندارد نقل قول ها را تعریف کنید و نسخه ی طراحی بوت استرپ بقیه کارها را انجام خواهد داد.</p>
<p><span class=”SampleTitle”> <img src=”/Administrator/Image/code.png” alt=””>مثال :</span></p>
<pre id=”codes” class=”brush: html;”>
<blockquote>
<p>The world is a dangerous place to live; not because of the people who are evil, but because of the people who don’t do anything about it.</p>
<small>by <cite>Albert Einstein</cite></small>
</blockquote>
</pre>
<p>خروجی مثال بالا مانند زیر خواهد بود .</p>
<p><img class=”img-responsive text-center” title=”Bootstrap” src=”http://articles.tahlildadeh.com/image.axd?picture=image_thumb_2020.png” alt=”Bootstrap”></p>
<p>همچنین می توانید از طریق شناور ساختن آن در سمت راست و با به کار بردن گروه .pull-right در عنصر</p>
<blockquote>نقل قول را در سمت راست تنظیم کنید.
<p> </p>
<p><span class=”SampleTitle”> <img src=”/Administrator/Image/code.png” alt=””>مثال :</span></p>
<pre id=”codes” class=”brush: html;”> <blockquote class=”pull-right”>
<p>The world is a dangerous place to live; not because of the people who are evil, but because of the people who don’t do anything about it.</p>
<small>by <cite>Albert Einstein</cite></small>
</blockquote>
</pre>
<p>خروجی مثال بالا مانند زیر خواهد بود.</p>
<img class=”img-responsive text-center” title=”Bootstrap” src=”http://articles.tahlildadeh.com/image.axd?picture=image_thumb_2021.png” alt=”Bootstrap”></blockquote>
</pre>
