aliyari
November 14th, 2015, 19:51
سلام، مشکل من در محل قرارگیری navbar در هنگام تغییرسایز صفحه " از دسکتاپ به تبلت- موبایل" هست. من میخوام که محل قرار گیری navbar در هنگام تغییر سایز صفحه، تغییر نکنه "از راست به تغییر نکنه". ممنون میشم راهنمایی کنید.
http://uupload.ir/files/254p_desktop_size.jpg
.
.
.
http://uupload.ir/files/smd9_mobile_1.jpg
کد html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>pakbar Imadyari</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Custom Style -->
<link href="styles.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target=".navbar">
<div class="container">
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" id="nav">
<div class="navbar-header navbar-right">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#jumbotron">pakbar Imadyari</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left" id="navbar-left">
<li><a href="#jumbotron">About me</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#education">Education</a><li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<div class="jumbotron" id="jumbotron">
<div class="col-xs-8"><h1>pakbar Iadyari</h1>
<a href="mailto:pyari505@gmail.com"><i class="fa fa-envelope-square fa-3x"></i></a>
<a href="https://www.facebook.com/pakbar.Imadyari"><i class="fa fa-facebook-square fa-3x"></i></a>
<a href="skype:east.biggest?call"><i class="fa fa-skype fa-3x"></i></a>
<ul class="fa-ul" id="traits">
<li>Gmail: pyari505@gmail.com</li>
<li>Location: Coon.Rapids/Minnesota</li>
</ul>
</div>
<div class="row">
<div class="col-xs-4">
<img class="img-responsive" src="myself.jpg" alt="Selfie">
</div>
</div>
</div>
<section id="skills">
<div class="row">
<div class="col-xs-12"><h2 class="text-left">Skills</h2></div>
</div>
<div id="list">
<div class="row"><ul>
<div class="col-xs-12 col-sm-12">
<li>Html/CSS : <span style="color:white;font-weight:normal;font-size: 77%"> Good knowledge</span></li>
</div>
<div class="col-xs-12 col-sm-12">
<p><li>Photoshop : <span style="color:white;font-weight:normal;font-size: 77%"> Professional level</span></li></p>
</div>
<div class="col-xs-12 col-sm-12">
<li>C++: <span style="color:white;font-weight:normal;font-size: 77%">Good knowledge</span></li>
</div>
<div class="col-xs-12 col-sm-12">
<p><li>Microsoft Project : <span style="color:white;font-weight:normal;font-size: 77%"> Good knowledge</span></li></p></div>
<div class="col-xs-12 col-sm-12">
<li>Hardware(asseble and repair): <span style="color:white;font-weight:normal;font-size: 77%"> Professional level</span></li>
</div>
</ul>
</div>
</div>
</section>
<section id="projects">
<div class="row">
<div class="col-xs-12"><h2 class="text-left">Projects</h2></div>
</div>
<div class="row" id="gallery">
<div class="col-sm-4 projects-item">
<img src="1.png" class="img-responsive" alt="Pacific Trails" />
</div>
<div class="col-sm-4 projects-item">
<img src="2.png" class="img-responsive" alt="Pacific Trails :: Activities" />
</div>
<div class="col-sm-4 projects-item">
<img src="3.png" class="img-responsive" alt="Ms B's Veggies" />
</div>
</div>
</section>
<section id="education">
<div class="row">
<div class="col-xs-12"><h2 class="text-left">Education</h2></div>
</div>
<div id="list">
<div class="row">
<ul>
<div class="col-xs-12 col-sm-12">
<li>High school diploma: <span style="color:white;font-weight:normal;font-size: 77%">2001, Tehran-Iran</span></li>
</div> <div class="col-xs-12 col-sm-12">
<p><li>BS, Mining Engineering: <span style="color:white;font-weight:normal;font-size: 77%">2005, Tehran-Iran</span></li></p>
</div> <div class="col-xs-12 col-sm-12">
<li>A.A.S., .NET Programmer: <span style="color:white;font-weight:normal;font-size: 77%">Graduation 2017, Hennepin Technical College</span></li>
</div>
</ul>
</div>
</div>
</section>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
کد css
body {
background-color: #FFFFFF;
color: #FFFFFF;
position: relative;
padding-top: 80px;}
#jumbotron, #skills, #projects, #education {
box-shadow: 6px 6px 2px 0 #000000;}
@media screen and (min-width: 0px) and (max-width: 992px) {
#traits { display:inline; }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
#skills li, #education li { text-align:center; }
#projects h2 { text-align:center; }
#education h2 { text-align:center; }
#skills h2 { text-align:center; }
#jumbotron h1 {font-size: 30px; padding-top: 5px; }}
#traits {
font-size: 25px;
font-weight:normal;
padding-top: 50px;
margin-left: 0px;}
#traits li {
padding-bottom: 15px;}
#nav {
border-radius: 0;
padding-right: 15px;
}
#navbar-left {
padding-left: 15px;
}
ul {
list-style-type: none;}
#jumbotron{
background-color:#dc143c;
border-radius: 0;
margin-bottom: 80px;
}
#skills {
background-color:#bb1133;
padding: 0px;
margin-bottom: 80px;}
#list {
font-family: "Arial Black","Arial Bold",Gadget,sans-serif;
font-size: 25px;
margin: 10px 0 60px 0;
padding: 40px 0 40px 0;}
#list li {
padding: 10px;
margin-left: -30px;}
#projects {
background-color:#8c0d26;
padding: 0px;
margin-bottom: 80px;}
#education {
background-color:#5d091a;
padding: 0px;
margin-bottom: 80px;}
#gallery {
padding: 20px 0;
margin: 50px 0;}
#gallery img {
padding: 15px 0;
margin-bottom: 25px;}
h2 {
font-family: TimesNewRoman,"Times New Roman",Times,Baskerville,Georgia,serif;
font-weight: bold;
font-size: 50px;}
i {
padding-right: 15px;
color: #FFFFFF;}
http://uupload.ir/files/254p_desktop_size.jpg
.
.
.
http://uupload.ir/files/smd9_mobile_1.jpg
کد html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>pakbar Imadyari</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Custom Style -->
<link href="styles.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target=".navbar">
<div class="container">
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" id="nav">
<div class="navbar-header navbar-right">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#jumbotron">pakbar Imadyari</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left" id="navbar-left">
<li><a href="#jumbotron">About me</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#education">Education</a><li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<div class="jumbotron" id="jumbotron">
<div class="col-xs-8"><h1>pakbar Iadyari</h1>
<a href="mailto:pyari505@gmail.com"><i class="fa fa-envelope-square fa-3x"></i></a>
<a href="https://www.facebook.com/pakbar.Imadyari"><i class="fa fa-facebook-square fa-3x"></i></a>
<a href="skype:east.biggest?call"><i class="fa fa-skype fa-3x"></i></a>
<ul class="fa-ul" id="traits">
<li>Gmail: pyari505@gmail.com</li>
<li>Location: Coon.Rapids/Minnesota</li>
</ul>
</div>
<div class="row">
<div class="col-xs-4">
<img class="img-responsive" src="myself.jpg" alt="Selfie">
</div>
</div>
</div>
<section id="skills">
<div class="row">
<div class="col-xs-12"><h2 class="text-left">Skills</h2></div>
</div>
<div id="list">
<div class="row"><ul>
<div class="col-xs-12 col-sm-12">
<li>Html/CSS : <span style="color:white;font-weight:normal;font-size: 77%"> Good knowledge</span></li>
</div>
<div class="col-xs-12 col-sm-12">
<p><li>Photoshop : <span style="color:white;font-weight:normal;font-size: 77%"> Professional level</span></li></p>
</div>
<div class="col-xs-12 col-sm-12">
<li>C++: <span style="color:white;font-weight:normal;font-size: 77%">Good knowledge</span></li>
</div>
<div class="col-xs-12 col-sm-12">
<p><li>Microsoft Project : <span style="color:white;font-weight:normal;font-size: 77%"> Good knowledge</span></li></p></div>
<div class="col-xs-12 col-sm-12">
<li>Hardware(asseble and repair): <span style="color:white;font-weight:normal;font-size: 77%"> Professional level</span></li>
</div>
</ul>
</div>
</div>
</section>
<section id="projects">
<div class="row">
<div class="col-xs-12"><h2 class="text-left">Projects</h2></div>
</div>
<div class="row" id="gallery">
<div class="col-sm-4 projects-item">
<img src="1.png" class="img-responsive" alt="Pacific Trails" />
</div>
<div class="col-sm-4 projects-item">
<img src="2.png" class="img-responsive" alt="Pacific Trails :: Activities" />
</div>
<div class="col-sm-4 projects-item">
<img src="3.png" class="img-responsive" alt="Ms B's Veggies" />
</div>
</div>
</section>
<section id="education">
<div class="row">
<div class="col-xs-12"><h2 class="text-left">Education</h2></div>
</div>
<div id="list">
<div class="row">
<ul>
<div class="col-xs-12 col-sm-12">
<li>High school diploma: <span style="color:white;font-weight:normal;font-size: 77%">2001, Tehran-Iran</span></li>
</div> <div class="col-xs-12 col-sm-12">
<p><li>BS, Mining Engineering: <span style="color:white;font-weight:normal;font-size: 77%">2005, Tehran-Iran</span></li></p>
</div> <div class="col-xs-12 col-sm-12">
<li>A.A.S., .NET Programmer: <span style="color:white;font-weight:normal;font-size: 77%">Graduation 2017, Hennepin Technical College</span></li>
</div>
</ul>
</div>
</div>
</section>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
کد css
body {
background-color: #FFFFFF;
color: #FFFFFF;
position: relative;
padding-top: 80px;}
#jumbotron, #skills, #projects, #education {
box-shadow: 6px 6px 2px 0 #000000;}
@media screen and (min-width: 0px) and (max-width: 992px) {
#traits { display:inline; }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
#skills li, #education li { text-align:center; }
#projects h2 { text-align:center; }
#education h2 { text-align:center; }
#skills h2 { text-align:center; }
#jumbotron h1 {font-size: 30px; padding-top: 5px; }}
#traits {
font-size: 25px;
font-weight:normal;
padding-top: 50px;
margin-left: 0px;}
#traits li {
padding-bottom: 15px;}
#nav {
border-radius: 0;
padding-right: 15px;
}
#navbar-left {
padding-left: 15px;
}
ul {
list-style-type: none;}
#jumbotron{
background-color:#dc143c;
border-radius: 0;
margin-bottom: 80px;
}
#skills {
background-color:#bb1133;
padding: 0px;
margin-bottom: 80px;}
#list {
font-family: "Arial Black","Arial Bold",Gadget,sans-serif;
font-size: 25px;
margin: 10px 0 60px 0;
padding: 40px 0 40px 0;}
#list li {
padding: 10px;
margin-left: -30px;}
#projects {
background-color:#8c0d26;
padding: 0px;
margin-bottom: 80px;}
#education {
background-color:#5d091a;
padding: 0px;
margin-bottom: 80px;}
#gallery {
padding: 20px 0;
margin: 50px 0;}
#gallery img {
padding: 15px 0;
margin-bottom: 25px;}
h2 {
font-family: TimesNewRoman,"Times New Roman",Times,Baskerville,Georgia,serif;
font-weight: bold;
font-size: 50px;}
i {
padding-right: 15px;
color: #FFFFFF;}