در این جهان، همواره برای كسانی كه از خطری بهراسند، خطری وجود خواهد داشت.
خوش آمدید - امروز : سه شنبه ۲۹ اسفند ۱۴۰۲

آموزش کار با فریمورک رایگان بوت استرپ / قسمت ششم

آموزش کار با فریمورک رایگان بوت استرپ / قسمت ششم

http://ivahid.com/wp-content/uploads/2014/11/cover8.png

در این قسمت از آموزش بوت استرپ آموزش سه قسمت از بوت استرپ رو برای شما آماده کردیم:

  1. Jumbotron
  2. Wells
  3. Alerts

ایجاد یک Jumbotron

jumbotron نشان دهنده یک جعبه بزرگ برای جلب توجه فوق العاده به برخی از مطالب ویژه و یا اطلاعات است.

jumbotron با یک جعبه خاکستری با گوشه های گرد نمایش داده می شود. همچنین اندازه فونت متن داخل آن بزرگ است.

نکته: در داخل jumbotron شما می توانید تقریبا هر HTML معتبری را وارد کنید، از جمله عناصریا کلاس های دیگر بوت استرپ را می توانید وارد کنید.

از یک عنصر <div>  با کلاس jumbotron. برای ایجاد یک jumbotron استفاده کنید:

بوت استرپ

Jumbotron داخل Container

اگر شما نمی خواهید تا jumbotron به لبه­های صفحه نمایش کشیده شود، jumbotron  را در داخل
<div class=”container”>  قرار دهید.

مثال:

۱
۲
۳
۴
۵
۶
۷
۸
۹
<div class="container">
  <div class="jumbotron">
    <h1>Bootstrap Tutorial</h1>
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
    responsive, mobile-first projects on the web.</p>
  </div>
  <p>This is some text.</p>
  <p>This is another text.</p>
</div>

Jumbotron خارج Container

اگر شما می خواهید jumbotron تا لبه های صفحه نمایش کشیده شود، jumbotron را در خارج از عنصر

قرار دهید.
مثال:

۱
۲
۳
۴
۵
۶
۷
۸
۹
<div class="jumbotron">
  <h1>Bootstrap Tutorial</h1>
  <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive,
  mobile-first projects on the web.</p>
</div>
<div class="container">
  <p>This is some text.</p>
  <p>This is another text.</p>
</div>

ایجاد هدر صفحه
هدر صفحه مانند یک جداکننده بخش است.
کلاس .page-header یک خط افقی زیرعنوان اضافه می کند (همچنین مقداری فضای اضافی در اطراف هدر اضافه میکند):
مثال:

۱
۲
۳
<div class="page-header">
  <h1>Example Page Header</h1>
</div>

Bootstrap Wells

کلاس .well به هر عنصری داده شود، به آن عنصر حاشیهای با گوشه های گرد و پس زمینه خاکستری اضافه می شود. همچنین محتویات درونی عنصر، مقداری فاصله از لبههای عنصر (padding) خواهند داشت.
بوت استرپ

اندازه well
بوت استرپ

با اضافه کردن کلاس .well-smاندازه well را به سایز کوچک و با افزودن کلاس .well-lg اندازه well را به سایز بزرگ تغییر دهید.
نکته: به طور پیش فرض، اندازه well در سایز متوسط است.

هشدارها در بوت استرپ (Alerts)

بوت استرپ یک راه آسان برای ایجاد پیام های هشدار از پیش تعریف شده  فراهم کرده است:
bootstrap alert

هشدارها با کلاس .alert  ایجاد می شوند، که در دنباله آن یکی از چهار کلاس متنی .alert-success ، . .alert-info ، .alert-warning و یا .alert-danger قرار می گیرد:

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>
<div class="alert alert-info">
  <strong>Info!</strong> Indicates a neutral informative change or action.
</div>
<div class="alert alert-warning">
  <strong>Warning!</strong> Indicates a warning that might need attention.
</div>
<div class="alert alert-danger">
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>

بسته شدن هشدارها
برای بسته شدن پیام هشدار، class=”close” و data-dismiss=”alert” را به یک لینک و یا یک عنصر دکمه اضافه کنید:
مثال:

۱
۲
۳
۴
<div class="alert alert-success">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

توضیح ویژگی aria-* و ×
برای کمک به بهبود قابلیت دسترسی برای افراد که از خوانندگان صفحه نمایش (برنامه های صفحه خوان) استفاده می کنند، است. شما باید در هنگام ایجاد دکمه بستن ویژگی aria-label=”close” را نیز قرار دهید.
× (×) یک موجودیت HTML است که آیکون مورد نظر برای دکمه بستن است. تا از حرف “X” استفاده نشود.

هشدار متحرک (Animated Alerts)
برای اضافه کردن افکت محو شدن، هنگام بسته شدن هشدار می توان از دو کلاس .fade و .in استفاده کرد :
مثال:

۱
<divclass="alert alert-success fade in">

آموزش کار با فریمورک رایگان بوت استرپ / قسمت ششم