ساخت یک پنل (Panel) با Bootstrap
کدهای زیر نحوه ایجاد پنل را با استفاده از فریمورک بوت استراپ نشان می دهد.
ابتدا کدهای زیر را به قسمت head صفحه خود بیفزاید .
|
1 2 3 4 |
<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> |
مثال :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<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> |
نتیجه :
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.