آموزش کار با فریمورک رایگان بوت استرپ / قسمت ششم
در این قسمت از آموزش بوت استرپ آموزش سه قسمت از بوت استرپ رو برای شما آماده کردیم:
- Jumbotron
- Wells
- 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)
بوت استرپ یک راه آسان برای ایجاد پیام های هشدار از پیش تعریف شده فراهم کرده است:
هشدارها با کلاس .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" >×</ a > < strong >Success!</ strong > Indicates a successful or positive action. </ div > |
توضیح ویژگی aria-* و ×
برای کمک به بهبود قابلیت دسترسی برای افراد که از خوانندگان صفحه نمایش (برنامه های صفحه خوان) استفاده می کنند، است. شما باید در هنگام ایجاد دکمه بستن ویژگی aria-label=”close” را نیز قرار دهید.
× (×) یک موجودیت HTML است که آیکون مورد نظر برای دکمه بستن است. تا از حرف “X” استفاده نشود.
هشدار متحرک (Animated Alerts)
برای اضافه کردن افکت محو شدن، هنگام بسته شدن هشدار می توان از دو کلاس .fade و .in استفاده کرد :
مثال:
۱
|
< div class = "alert alert-success fade in" > |