ورود

View Full Version : سوال: یک قالب ساده با Bootstrap


ravand
دوشنبه 13 بهمن 1393, 10:40 صبح
من وقتی نیست که یادگیری بوت استرپ رو شروع کردم. برای همین اشکالات زیادی توی کارم دیدم. یه نمونه قالب ساده با بوت استرپ زدم
گفتم نشونتون بدم عیب کارم رو بگید این یه قالب کلی هست نکته اینکه میخوام در همه ی نمایشگر ها ارتفاعش صد در صد باشه:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.rtl.css">
<title>قالب ساده</title>
<style type="text/css">
html, body { padding: 0; margin: 0; height: 100%; }
.kol{
min-height: 100%;
height: 100%;
padding:0px;
margin:0px;
background-color:#d5d5d5;
}
.soto{
min-height: 100%;
height: 100%;
padding:0px;
margin:0px;
background-color:#edcdf2;
}
.header{
background-color:red;
}
.content{
min-height: 100%;
height: 100%;
float:left;
background-color:#22cccc;
}
.sidebar{
min-height: 100%;
height: 100%;
float:right;
background-color:#b441f2;
}
.footer{
background-color:red;
}
</style>
</head>
<body>
<div class="Containers">
<div class="row">
<div class="header col-md-12 col-xs-12 col-sm-12 ">
header
</div>
</div>
</div>

<div class="kol Containers">
<div class="row soto">
<div class="content col-md-8 col-xs-12 col-sm-9 ">
content
</div>

<div class="sidebar col-md-4 col-xs-12 col-sm-3 ">
sidebar
</div>
</div>
</div>

<div class="Containers">
<div class="row">
<div class="footer col-md-12 col-xs-12 col-sm-12 ">
footer
</div>
</div>
</div>
</body>
</html>

متشکرم.
s2/mri
دوشنبه 13 بهمن 1393, 13:06 عصر
قالب کلی درسته / ولی یه اسکرول افقی داره که با اضافه کردن این استایل درست میشه


.row{
margin-left: 0px !important;
margin-right: 0px !important;
}



فقط یک نکته / ارتفاع باعث میشه اگه اون متنی که قراره داخل اون div ای که بهش ارتفاع 100درصد دادین اگه بیشتر از بشه از چهارچوبش بزنه بیرون! کلا پیشنهاد من اینه که مقدار ارتفاع رو auto بذارین


موفق باشید
ravand
دوشنبه 13 بهمن 1393, 14:08 عصر
ببخشید یه سوال دیگه:
یه جا خوندم نوشته بود برای هر 12 ستون باید یک row قرار بدم به این صورت ها:

<div class="row">
<div class="soton col-md-12 col-xs-12 col-sm-12 "></div>
</div>


<div class="row">
<div class="soton col-md-4 col-xs-4 col-sm-4 "></div>
<div class="soton col-md-4 col-xs-4 col-sm-4 "></div>
<div class="soton col-md-4 col-xs-4 col-sm-4 "></div>
</div>

حالا اگه بیام اینطوری کنم:

<div class="row">
<div class="soton col-md-12 col-xs-12 col-sm-12 "></div>
<div class="soton col-md-2 col-xs-2 col-sm-2"></div>
</div>

یعنی بیش از 12 ستون قرار بدم. مشکلی پیش میاد؟ من که تست کردم دیدم توی نمایشگر مبایل ستون زیادی افتاد پایین. حالا درستش چطوریه؟
متشکرم.
ravand
دوشنبه 13 بهمن 1393, 16:21 عصر
من امدم یه سری div را در قسمت sidebar اضافه کردم. ولی پایین ساید بار در نسخه ی مبایل یکم فاصله ایجاد شد:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.rtl.css">
<link rel="stylesheet" href="css/style.css">
<meta charset="UTF-8">
<title>قالب ساده</title>
<style type="text/css">
html, body { padding: 0; margin: 0; height: 100%; }
.kol{
min-height: 100%;
height: 100%;
padding:0px;
margin:0px;
background-color:#d5d5d5;
}
.soto{
min-height: 100%;
height: 100%;
padding:0px;
margin:0px;
background-color:#edcdf2;
}

.sidebar{
min-height: 100%;
height: 100%;
float:right;
background-color:#50BFDA;
}
.sidebar-vasat {
height: 30px;
padding: 0px;
background-color: #40A1B8;
margin-top: 20px;
}

.dayere{
height: 29px;
width: 32px;
background-color: #368da3;
float:right;
padding: 1.1px 3px 2px;
}
.glyphicon-th{
color:#FFFFFF;
font-size:1.7em;
}
.sidebar-vasat p{
font-family:BYekan;
font-size:1em;
color:#FFFFFF;
text-align:center;
line-height:1.7em;
}




.content{
min-height: 100%;
height: 100%;
float:left;
background-color:#e3e2e2;
}

.row{
margin-left: 0px !important;
margin-right: 0px !important;
}
</style>
</head>
<body>


<div class="kol Containers">
<div class="row soto">
<div class="content col-xs-12 col-sm-9 col-md-9 col-lg-9">
content
</div>


<div class="sidebar col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="row">
<div class="sidebar-vasat col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="dayere col-xs-11 col-sm-11 col-md-11 col-lg-11">
<span class="glyphicon glyphicon-th"></span>
</div>
<p id="ravand-design-ir">نوشته ها</p>
</div>
</div>

<div class="row">
<div class="sidebar-vasat col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="dayere col-xs-11 col-sm-11 col-md-11 col-lg-11">
<span class="glyphicon glyphicon-th"></span>
</div>
<p id="ravand-design-ir">نوشته ها</p>
</div>
</div>

<div class="row">
<div class="sidebar-vasat col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="dayere col-xs-11 col-sm-11 col-md-11 col-lg-11">
<span class="glyphicon glyphicon-th"></span>
</div>
<p id="ravand-design-ir">نوشته ها</p>
</div>
</div>

<div class="row">
<div class="sidebar-vasat col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="dayere col-xs-11 col-sm-11 col-md-11 col-lg-11">
<span class="glyphicon glyphicon-th"></span>
</div>
<p id="ravand-design-ir">نوشته ها</p>
</div>
</div>


<div class="row">
<div class="sidebar-vasat col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="dayere col-xs-11 col-sm-11 col-md-11 col-lg-11">
<span class="glyphicon glyphicon-th"></span>
</div>
<p id="ravand-design-ir">نوشته ها</p>
</div>
</div>


<div class="row">
<div class="sidebar-vasat col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="dayere col-xs-11 col-sm-11 col-md-11 col-lg-11">
<span class="glyphicon glyphicon-th"></span>
</div>
<p id="ravand-design-ir">نوشته ها</p>
</div>
</div>


<div class="row">
<div class="sidebar-vasat col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="dayere col-xs-11 col-sm-11 col-md-11 col-lg-11">
<span class="glyphicon glyphicon-th"></span>
</div>
<p id="ravand-design-ir">نوشته ها</p>
</div>
</div>

<div class="row">
<div class="sidebar-vasat col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="dayere col-xs-11 col-sm-11 col-md-11 col-lg-11">
<span class="glyphicon glyphicon-th"></span>
</div>
<p id="ravand-design-ir">نوشته ها</p>
</div>
</div>


<div class="row">
<div class="sidebar-vasat col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="dayere col-xs-11 col-sm-11 col-md-11 col-lg-11">
<span class="glyphicon glyphicon-th"></span>
</div>
<p id="ravand-design-ir">نوشته ها</p>
</div>
</div>


<div class="row">
<div class="sidebar-vasat col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="dayere col-xs-11 col-sm-11 col-md-11 col-lg-11">
<span class="glyphicon glyphicon-th"></span>
</div>
<p id="ravand-design-ir">نوشته ها</p>
</div>
</div>
</div>



</div>
</div>
</body>
</html>

تصویر در نمایشگر مبایل (480*320)
128137
این تصویر را در مرورگر فایرفاکس با استفاده از دکمه های ctrl shif m گرفتم.
همینطوری که می بینید div جا نداره و از div ساید بار میزنه بیرون.
ravand
دوشنبه 13 بهمن 1393, 19:49 عصر
امدم دور این div های content و sidebar برای هر کدومشون یه div ساختم و بهشون min-height:100% دادم و به این content و sidebar هم ارتفاع رو به پیکسل دادم . مشکلم حل شد.