Etiket: Bootstrap

Bootstrap ve PureCss ile ModalBox

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Raleway:200">
<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://purecss.io/css/main-grid-old-ie.css">
    <link rel="stylesheet" href="http://purecss.io/css/bootstrap/modal.css">
    <link rel="stylesheet" href="http://purecss.io/css/rainbow/baby-blue.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="http://purecss.io/css/main-grid.css">
<link rel="stylesheet" href="http://purecss.io/css/main.css">
<link rel="stylesheet" href="http://purecss.io/css/bootstrap/modal.css">
<link rel="stylesheet" href="http://purecss.io/css/rainbow/baby-blue.css">
<!--<![endif]-->
<!--[if lt IE 9]>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div id="main">
	<div class="content">
		<p>
			<a href="#myModal" role="button" class="pure-button-primary pure-button" data-toggle="modal">
			Aç </a>
		</p>
		<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
			<div class="modal-header">
				<h3 id="myModalLabel">Başlık</h3>
			</div>
			<div class="modal-body">
				<form class="pure-form pure-form-stacked">
					<label for="email">Email</label>
					<input id="email" type="text" placeholder="Email">
					<label for="state">Cinsiyet</label>
					<select id="state">
						<option>E</option>
						<option>F</option>
					</select>
					<label class="pure-checkbox">
					<input type="checkbox"> Hatırla </label>
				</form>
			</div>
			<div class="modal-footer">
				<button class="pure-button" data-dismiss="modal" aria-hidden="true">Kapat</button>
				<button class="pure-button pure-button-primary">Gönder</button>
			</div>
		</div>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
	</div>
</div>
</body>
</html>

Demo için tıklayınız

Bootstrap Sayfalama

Eskiden kullandığım bir sistemi paylaşmak isterim.

Veritabanı tablosu table sütunu id olarak belirtilmiştir.

<?php
echo '<';
echo 'link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"';
echo '>';
if(@$_GET['liste']){$sayfa=$_GET['liste'];}else{$sayfa=1;}
$ayir=20;$ilk=(($sayfa*$ayir)-$ayir);
//
if(@$_GET[ara]== "1"){
$sonuc= mysql_query("SELECT * FROM table ORDER BY id DESC Limit $ilk,$ayir");
$snc= mysql_query("SELECT * FROM table");
$sy=mysql_num_rows($snc);}
//sayfalama
$bul=ceil(@$sy/$ayir)+1;//Toplam Sayfa Sayisi
$start=(($ayir*$sayfa)-19); ?>

<table class="table table-hover">
<caption><center>Toplam <?php echo @$sy;?> sayfa</center></caption>
 <thead>
<tr>
<td >Sıra</td>
</tr>
 </thead>
<?php
while($yaz=@mysql_fetch_array($sonuc))  {echo "<tr><td>$id</td>"; } ?>
</table> 

<center>
<?php 
if(@$_GET['liste']){$sayfa=$_GET['liste'];}else{$sayfa=1;}

$sy=@mysql_num_rows($snc);
//sayfalama
$bul=ceil($sy/$ayir)+1;//Toplam Sayfa Sayisi
$bull=ceil($sy/$ayir);//Toplam Sayfa Sayisi
//sayfalama basliyor
function sec($no,$sayfa){
if($sayfa == $no){
return '
<input type="submit" name="liste" class="btn btn-primary" value="'.$no.'">';}
else{return '<input type="submit" name="liste" class="btn btn-info" value="'.$no.'">';}}
echo '<form class="navbar-form pull-left" method="get"><input type="hidden" name="ara" class="btn btn-primary" value="'.@$_GET["ara"].'">';

$listele=7;//Listeleme Sayisi 7 için test edildi
$ilkorta=($listele+1)*0.5;//yarısını aldık 7 için 4
$sonorta=$bul-(($listele+1)*0.5);//yarısını aldık 7 için 4
$ilkortabas=$sayfa-(($listele+1)*0.25);//yarısını aldık 7 için 3
$ilkortason=$ilkortabas+($listele-2);
if($sayfa <= $ilkorta){
for($d=1;$d<8;$d++){echo sec($d,$sayfa);}
echo "   ".sec($bull,$sayfa);
}
else{
if($sayfa >= $sonorta){
echo sec(1,$sayfa)."   ";
for($d=$bul-$listele;$d<$bul;$d++){echo sec($d,$sayfa);}
}
else{
echo sec(1,$sayfa)."   ";
for($d=$ilkortabas;$d<$ilkortason;$d++){echo sec($d,$sayfa);}
echo "   ".sec($bull,$sayfa);
}}


echo '</form>'; 
?></center>