نمادها

مطالب پربازدید

شما اینجا هستید

» آموزش طراحی وب » آموزش Bootstrap » آموزش Bootstrap جلسه نهم(Jumbotron و wells)

آموزش Bootstrap جلسه نهم(Jumbotron و wells)

  • دسته بندی :آموزش Bootstrap,آموزش طراحی وب
    • آموزش Bootstrap جلسه نهم(Jumbotron & wells)

    در خدمت شما هستیم با آموزش Bootstrap جلسه نهم(Jumbotron و wells)

    آموزش Bootstrap جلسه نهم(Jumbotron و wells) از سری آموزش های تک قسمتی است

    سلام برنامه در این آموزش درباره دو کلاس Jumbotron و wells صحبت  می کند

    کلاس Jumbotron  مطالب شما را داخل یک کادر قرار میدهد و آن ها را Bold می کند

    این کلاس مناسب زمانی است که شما  میخواهید چیزی را به صورت مهم جلوه دهید

    کلاس Wells در دور المان شما یک کادر می اندازد و آن را جدا از بقیه سطر ها می کند

     

    کلاس Jumbotron

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

    شما میتوانید مثالی از این کلاس را مشاهده کنید:

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>Jumbotron نمونه کلاس</h1>      
    <p>در این قسمت شما میتوانید نمونه ای از این کلاس را ببینید</p>
  </div>
  <p>نوشته معمولی</p>      
     
</div>

</body>
</html>

     

    کلاس wells

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

    شما می توانید در کد زیر مثالی از این کلاس را ببینید.

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body> 

<div class="container">
  <h2>Well</h2>
  <div class="well">نوشته قرار گرفته در کلاس </div>
</div>

</body>
</html>

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

    می توانید دیگر قسمت ها را در لینک زیر ببینید

    آموزش Bootstrap جلسه هشتم (تصاویر)

    آموزش Bootstrap جلسه دهم (Alert Box)

     

    شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید

    همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید
    اگر این مطلب آموزنده بود به ما امتیاز دهید

    میانگین امتیاز / 5. تعداد آرا:

    اولین کسی باشید که رای میدهید


    • تاریخ ارسال
      2019/5/02
    • ارسال شده توسط
      amir
    • دیدگاه ها
      بدون دیدگاه
    • حجم دوره
      28.24 mb

    این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

    دانلود آموزش Bootstrap جلسه نهم(Jumbotron & wells): نوع فایل:mp4 حجم فایل:28.24 مگابایت

    هر پلیر اجرا کننده فایل ویدیویی

    بیشتر مشاهده کنید

    دیدگاهتان را بنویسید

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.