ساخت یک پنل (Panel) با Bootstrap

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

ابتدا کدهای زیر را به قسمت head صفحه خود بیفزاید .

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

مثال :

<div class="panel panel-default">
    <div class="panel-body">Simple panel without heading</div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">Sample 1</div>
    <div class="panel-body">Panel Content 1</div>
</div>
<div class="panel panel-primary">
    <div class="panel-heading">Sample 2</div>
    <div class="panel-body">Panel Content 2</div>
</div>
<div class="panel panel-success">
    <div class="panel-heading">Sample 3</div>
    <div class="panel-body">Panel Content 3</div>
</div>
<div class="panel panel-info">
    <div class="panel-heading">Sample 4</div>
    <div class="panel-body">Panel Content 4</div>
</div>
<div class="panel panel-warning">
    <div class="panel-heading">Sample 5</div>
    <div class="panel-body">Panel Content 5</div>
</div>
<div class="panel panel-danger">
    <div class="panel-heading">Sample 6</div>
    <div class="panel-body">Panel Content 6</div>
</div>

نتیجه :

bootstrap-panel-samples


توسط : عثمان رحیمی  5 ماه قبل ، یکشنبه 6 مهر 1393 ساعت 20:36  0  3556

نظر شما برای ما مهم است و به ما در بهبود سایت کمک میکند.


ارسال نظر
  • نام (اختیاری ) :
  • پست الکترونیک :
  • توضیحات :

مطالب مرتبط