نمادها

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

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

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

آموزش Bootstrap جلسه نوزدهم (Panels)

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

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

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

    سلام برنامه در این آموزش نحوه ساخت پنل در بوت استرپ را آموزش می دهد

    پنل ها باکس هایی هستند که هر اطلاعاتی را می توان در آن وارد کرد

    پنل تشکیل شده است از header و body و footer که بوت استرپ هر کدام را با کلاس تفکیک میکند

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

    معمولا از پنل ها برای تفکیک یک محتوا از متحوای دیگر استفاده می شود

     

    کلاس panels

    همانطور که قبلا گفتیم به کمک این کلاس میتوانید باکس های مختلفی را ایجاد کنید.
    این باکس ها کاربرد های متفاوتی دارند و میتوانید موارد مختلفی را روی آن ها پیاده سازی کنید.

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

    <!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>Basic Panel</h2>
  <div class="panel panel-default">
    <div class="panel-body">A Basic Panel</div>
  </div>
</div>

</body>
</html>

    کد بالا یک مثال ساده از panels میباشد اگر میخواهید panels با عنوان را داشته باشید میتوانید از کد زیر کمک بگیرید:

    <!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>Panel Heading</h2>
  <div class="panel panel-default">
    <div class="panel-heading">Panel Heading</div>
    <div class="panel-body">Panel Content</div>
  </div>
</div>

</body>
</html>

    در کد بالا همانطور که میبینید با اضافه کردن کلاس panel-heading توانستیم برای پنل خود عنوان را اضافه کنیم.

    همچنین در صورت نیاز میتوانید فوتر را هم به پایین پنل خود اضافه کنید برای اینکار میتوانید از کد زیر استفاده کنید:

    <!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>Panel Footer</h2>
  <div class="panel panel-default">
    <div class="panel-heading">Panel Heading</div>
    <div class="panel-body">Panel Content</div>
    <div class="panel-footer">Panel Footer</div>
  </div>
</div>

</body>
</html>

    در کد بالا تنها با اضافه کردن کلاس panel-footer توانستیم فوتر را اضافه کنیم.
    همچنین panels از رنگ های مختلف نیز پشتیبانی میکند که میتوانید نمونه های آن را در کد زیر ببینید:

    <!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>Panels with Contextual Classes</h2>
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">Panel with panel-default class</div>
      <div class="panel-body">Panel Content</div>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">Panel with panel-primary class</div>
      <div class="panel-body">Panel Content</div>
    </div>

    <div class="panel panel-success">
      <div class="panel-heading">Panel with panel-success class</div>
      <div class="panel-body">Panel Content</div>
    </div>

    <div class="panel panel-info">
      <div class="panel-heading">Panel with panel-info class</div>
      <div class="panel-body">Panel Content</div>
    </div>

    <div class="panel panel-warning">
      <div class="panel-heading">Panel with panel-warning class</div>
      <div class="panel-body">Panel Content</div>
    </div>

    <div class="panel panel-danger">
      <div class="panel-heading">Panel with panel-danger class</div>
      <div class="panel-body">Panel Content</div>
    </div>
  </div>
</div>

</body>
</html>

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

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

    آموزش Bootstrap جلسه هجدهم(List Groups)

    آموزش Bootstrap جلسه بیستم (Dropdown)

     

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

    و یا آن را در آپارات مشاهده کنید:

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

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

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


    • تاریخ ارسال
      2019/5/16
    • ارسال شده توسط
      amir
    • دیدگاه ها
      2دیدگاه
    • حجم دوره
      12.37 mb

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

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

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

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

    2 دیدگاه برای “آموزش Bootstrap جلسه نوزدهم (Panels)”

    1. saman kelate گفت:
      می 16, 2019 در 10:36 ب.ظ

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

      پاسخ
    2. mosa zed گفت:
      می 16, 2019 در 10:44 ب.ظ

      برای ساخت باکس اخطار میتونستی از آموزش زیر تو همین سایت استفاده کنی
      http://hiprogram.ir/bootstrap-single-part-10-2

      پاسخ

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

    نشانی ایمیل شما منتشر نخواهد شد.

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