linkedin facebook linkedin facebook nod32

Saytni responsive qo`llab mobil telefon uchun mo`ljallash

Muallif: Mengliyev Sh.

Qo`shilgan sana: 2015-01-06

Saytni responsive qo`llab mobil telefon uchun mo`ljallash

Responsive kodini qo`lab saytni turli ko`rinishga keltirish buning uchun quyidagilarni xosil qilib olamiz

Index.html faylni holisl qilib oling

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>bosh</title>
<link href="style1.css" rel="stylesheet" type="text/css">

<link href="mormalize.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="bootstrap.min.js"></script>
</head>
<body>

<div class="container">



<div class="row">
<div class="slider span12"><img src="header2020.jpg" /></div>
</div>

<div class="row">
<div class="thumb span3"><img src="2.jpg"></div>
<div class="thumb span3"><img src="3.jpg"></div>
<div class="thumb span2"><img src="4.jpg"></div>
<div class="thumb span2"><img src="5.jpg"></div>
<div class="thumb span2"><img src="6.jpg"></div>

</div>


<div class="row">
<div class="header span5">
<h1> Qidruv tizimi</h1>
</div>
<div class="search span4 offset6"><input type="text" name="" id=""></div>
</div>


<div class="row">
<div class="sidebar span3">
<nav>
<ul>
<li><a href="">item1</a></li>
<li><a href="">item2</a></li>
<li><a href="">item3</a></li>
<li><a href="">item4</a></li>
<li><a href="">item5</a></li>
<li><a href="">item6</a></li>
</ul>
</nav>
</div>



<div class="content span11">

<h2>matn</h2>
<p> Kerakli bo`lgan matnni php yoki shunchaki bo`g`lash kerak bo`lgan bo`lim</p>

</div>
</div>


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

Style1.css quyida keltirilgan va normalize.css ni internetdan yuklab oling.

/* STYLE1.CSS Document */

*{ transition: all .5s;
box-sizing: border-box;
}

body {
font:1em 'PT Sans', Arial, Helvetica, Sans-Serif;
background: url(body.jpg);
color:#333;
}
.container{
width: 1200px;
margin: 0 auto;
}

.row {
margin-bottom: 20 px;
}
.row:ofter{
display:black;
content:'.';
height:0;
visible:hidden;
clear:both;
}
[class*="span"]
{
float: left;
display: inline;
margin-right: 20px;
}

[class*="span"]: last-child
{
margin-right: 0;
float: right;
}
.span1 {width: 60px}
.span2 {width: 140px}
.span3 {width: 220px}
.span4 {width: 300px}
.span5 {width: 380px}
.span6 {width: 460px}
.span7 {width: 540px}
.span8 {width: 620px}
.span9 {width: 700px}
.span10 {width: 780px}
.span11 {width: 860px}
.span12 {width: 1200px}

.offset1 {margin-left: 60px}
.offset2 {margin-left: 140px}
.offset3 {margin-left: 220px}
.offset4 {margin-left: 300px}
.offset5 {margin-left: 380px}
.offset6 {margin-left: 460px}
.offset7 {margin-left: 540px}
.offset8 {margin-left: 620px}
.offset9 {margin-left: 700px}
.offset10 {margin-left: 780px}
.offset11 {margin-left: 860px}
.offset12 {margin-left: 1200px}

.header {
margin-top: 20px;
}
.header h1 {
font-weight:bold;
text-shadow: 0 1px 0 rgba(255,255,255,.8);
}
.thumb img{
box-shadow: 0 5px 5px rgba(0,0,0,.2);
}
.slider{
height: 100px;
bockground:#888;
box-shadow: 0 5px 5px rgba(0,0,0,.2);
}
.slidebar {
padding-top: 30px;
}
.slidebar nav ul {
padding:0;
margin:0;
box-shadow: 0 5px 5px rgba(0,0,0,.2);
list-style: none;
}
.sidebar nav ul li a {
text-decoration: none;
color:#eee;
background:#bbb;
display: block;
width: 140px;
height: 40px;
text-align:center;
line-height:40px;
margin-bottom:1px;
}
.sidebar nav ul li a:hover {
background:#aaa;
}
.content
{
padding:0 20px;
margin-bottom: 80px;
}
.search{
margin-top:40px;
}
.search input{
width:100%;
height:30px;
}

bootstrap.min.js kodi quyida keltirilgan fayldagi satrlarni birlashtirib chiqing bir qatordan yo`zilishi kerak

/**
* Bootstrap.js by @fat & @mdo
* plugins: bootstrap-button.js, bootstrap-collapse.js, bootstrap-carousel.js
* Copyright 2012 Twitter, Inc.
* http://www.apache.org/licenses/LICENSE-2.0.txt
*/
!function(a){var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.button.defaults,c)};b.prototype.setStat
e=function(a){var
b="disabled",c=this.$element,d=c.data(),e=c.is("input")?"val":"html";a+="Text",d.resetText||c.data("res
etText",c[e]()),c[e](d[a]||this.options[a]),setTimeout(function(){a=="loadingText"?c.addClass(b).attr(b,b)
:c.removeClass(b).removeAttr(b)},0)},b.prototype.toggle=function(){var a=this.$element.closest('[data-
toggle="buttons-
radio"]');a&&a.find(".active").removeClass("active"),this.$element.toggleClass("active")},a.fn.button=fu
nction(c){return this.each(function(){var d=a(this),e=d.data("button"),f=typeof
c=="object"&&c;e||d.data("button",e=new
b(this,f)),c=="toggle"?e.toggle():c&&e.setState(c)})},a.fn.button.defaults={loadingText:"loading..."},a.fn.
button.Constructor=b,a(function(){a("body").on("click.button.data-api","[data-
toggle^=button]",function(b){var
c=a(b.target);c.hasClass("btn")||(c=c.closest(".btn")),c.button("toggle")})})}(window.jQuery),!function(a)
{var
b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.collapse.defaults,c),this.options.parent
&&(this.$parent=a(this.options.parent)),this.options.toggle&&this.toggle()};b.prototype={constructor:b,
dimension:function(){var a=this.$element.hasClass("width");return
a?"width":"height"},show:function(){var
b,c,d,e;if(this.transitioning)return;b=this.dimension(),c=a.camelCase(["scroll",b].join("-
")),d=this.$parent&&this.$parent.find("> .accordion-group >
.in");if(d&&d.length){e=d.data("collapse");if(e&&e.transitioning)return;d.collapse("hide"),e||d.data("col
lapse",null)}this.$element[b](0),this.transition("addClass",a.Event("show"),"shown"),a.support.transitio
n&&this.$element[b](this.$element[0][c])},hide:function(){var
b;if(this.transitioning)return;b=this.dimension(),this.reset(this.$element[b]()),this.transition("removeCla
ss",a.Event("hide"),"hidden"),this.$element[b](0)},reset:function(a){var b=this.dimension();return
this.$element.removeClass("collapse")[b](a||"auto")[0].offsetWidth,this.$element[a!==null?"addClass":
"removeClass"]("collapse"),this},transition:function(b,c,d){var
e=this,f=function(){c.type=="show"&&e.reset(),e.transitioning=0,e.$element.trigger(d)};this.$element.tr
igger(c);if(c.isDefaultPrevented())return;this.transitioning=1,this.$element[b]("in"),a.support.transition&
&this.$element.hasClass("collapse")?this.$element.one(a.support.transition.end,f):f()},toggle:function(){
this[this.$element.hasClass("in")?"hide":"show"]()}},a.fn.collapse=function(c){return
this.each(function(){var d=a(this),e=d.data("collapse"),f=typeof
c=="object"&&c;e||d.data("collapse",e=new b(this,f)),typeof
c=="string"&&e[c]()})},a.fn.collapse.defaults={toggle:!0},a.fn.collapse.Constructor=b,a(function(){a("bod
y").on("click.collapse.data-api","[data-toggle=collapse]",function(b){var c=a(this),d,e=c.attr("data-
target")||b.preventDefault()||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,""),f=a(e).data("collapse")
?"toggle":c.data();c[a(e).hasClass("in")?"addClass":"removeClass"]("collapsed"),a(e).collapse(f)})})}(wind
ow.jQuery),!function(a){var
b=function(b,c){this.$element=a(b),this.options=c,this.options.slide&&this.slide(this.options.slide),this.o
ptions.pause=="hover"&&this.$element.on("mouseenter",a.proxy(this.pause,this)).on("mouseleave",a.
proxy(this.cycle,this))};b.prototype={cycle:function(b){return
b||(this.paused=!1),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,th
is),this.options.interval)),this},to:function(b){var
c=this.$element.find(".item.active"),d=c.parent().children(),e=d.index(c),f=this;if(b>d.length-
1||b<0)return;return
this.sliding?this.$element.one("slid",function(){f.to(b)}):e==b?this.pause().cycle():this.slide(b>e?"next":"
prev",a(d[b]))},pause:function(b){return b||(this.paused=!0),this.$element.find(".next,
.prev").length&&a.support.transition.end&&(this.$element.trigger(a.support.transition.end),this.cycle()
),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return
this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(b,c){var
d=this.$element.find(".item.active"),e=c||d[b](),f=this.interval,g=b=="next"?"left":"right",h=b=="next"?
"first":"last",i=this,j=a.Event("slide",{relatedTarget:e[0]});this.sliding=!0,f&&this.pause(),e=e.length?e:thi
s.$element.find(".item")[h]();if(e.hasClass("active"))return;if(a.support.transition&&this.$element.hasCl
ass("slide")){this.$element.trigger(j);if(j.isDefaultPrevented())return;e.addClass(b),e[0].offsetWidth,d.ad
dClass(g),e.addClass(g),this.$element.one(a.support.transition.end,function(){e.removeClass([b,g].join("
")).addClass("active"),d.removeClass(["active",g].join("
")),i.sliding=!1,setTimeout(function(){i.$element.trigger("slid")},0)})}else{this.$element.trigger(j);if(j.isDe
faultPrevented())return;d.removeClass("active"),e.addClass("active"),this.sliding=!1,this.$element.trigge
r("slid")}return f&&this.cycle(),this}},a.fn.carousel=function(c){return this.each(function(){var
d=a(this),e=d.data("carousel"),f=a.extend({},a.fn.carousel.defaults,typeof c=="object"&&c),g=typeof
c=="string"?c:f.slide;e||d.data("carousel",e=new b(this,f)),typeof
c=="number"?e.to(c):g?e[g]():f.interval&&e.cycle()})},a.fn.carousel.defaults={interval:5e3,pause:"hover"
},a.fn.carousel.Constructor=b,a(function(){a("body").on("click.carousel.data-api","[data-
slide]",function(b){var c=a(this),d,e=a(c.attr("data-
target")||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,"")),f=!e.data("modal")&&a.extend({},e.data(),c
.data());e.carousel(f),b.preventDefault()})})}(window.jQuery)

858 marta o`qildi.

Foydalanuvchi ismi: Eshboyev Quvonchbek 203
Qo`shilgan sana: 2015-04-17

ajoyib

Foydalanuvchi ismi: Umidjon
Qo`shilgan sana: 2015-08-22

normalize.cssni qayerdan yuklab olish mumkin yoki qaysi saytdan

Parol:
Eslab qolish.


Ro`yhatdan o`tish

testing

+998915878681

Siz o`z maxsulotingizni 3D reklama ko`rinishda bo`lishini xohlaysizmi? Unda xamkorlik qilamiz.

3D Reklama


Рейтинг@Mail.ru
Рейтинг@Mail.ru

Besucherzahler
счетчик посещений