A Bootstrap grid segítségével egyszerűen és gyorsan készíthetünk reszponzív weboldalakat.

A működő kódot ide kattintva tudod megnézni.

Videó

HTML forráskód


<!DOCTYPE HTML>
<html>
<head>
	<title>Tutorial</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin,latin-ext" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="bootstrap.css" type="text/css">
</head>
<body>

<header class="container-fluid">
	<div class="row">
		<div class="container">
			<div class="row">
				<h1 class="col-sm-4">Website Logo</h1>
				<nav class="col-sm-8">
					<a href="">menu 1</a>
					<a href="">menu 2</a>
					<a href="">menu 3</a>
					<a href="">menu 4</a>
				</nav>
			</div>
		</div>
	</div>
</header>

<div class="container-fluid main-image hidden-xs">
	<div class="row">
		<div class="container">
			<div class="row">
				<div class="col-xs-12">
					<p class="title">Lorem Ipsum</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit pellentesque velit, a porta turpis porta sed. Praesent varius, turpis eget volutpat eleifend, libero lacus viverra magna, in dapibus justo ex bibendum ante. Donec rutrum suscipit quam, eleifend dignissim leo vestibulum id. In elementum quam nec lorem vehicula, nec blandit dolor dapibus.</p>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="container">
	<div class="row">
		<div class="col-sm-6 col-md-3 col-sm-push-6 col-md-push-3">
			<div class="box">
				<img src="2.jpg" class="img-thumbnail">
				<h2>box 1</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit pellentesque velit, a porta turpis porta sed. Praesent varius, turpis eget volutpat eleifend, libero lacus viverra magna, in dapibus justo ex bibendum ante.</p>
			</div>
		</div>
		<div class="col-sm-6 col-md-3 col-sm-pull-6 col-md-pull-3">
			<div class="box">
				<img src="3.jpg" class="img-thumbnail">
				<h2>box 2</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit pellentesque velit, a porta turpis porta sed. Praesent varius, turpis eget volutpat eleifend, libero lacus viverra magna, in dapibus justo ex bibendum ante.</p>
			</div>
		</div>
		<div class="col-sm-6 col-md-3 col-sm-push-6 col-md-push-3">
			<div class="box">
				<img src="4.jpg" class="img-thumbnail">
				<h2>box 3</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit pellentesque velit, a porta turpis porta sed. Praesent varius, turpis eget volutpat eleifend, libero lacus viverra magna, in dapibus justo ex bibendum ante.</p>
			</div>
		</div>
		<div class="col-sm-6 col-md-3 col-sm-pull-6 col-md-pull-3">
			<div class="box">
				<img src="5.jpg" class="img-thumbnail">
				<h2>box 4</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit pellentesque velit, a porta turpis porta sed. Praesent varius, turpis eget volutpat eleifend, libero lacus viverra magna, in dapibus justo ex bibendum ante.</p>
			</div>
		</div>
	</div>
</div>


</body>
</html>

CSS forráskód



/* ide jön a Bootstrap... */

header {
	background: #74a20c;
	color: #fff;
	padding: 10px 0;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3)
}
header h1 {
	font-size: 25px;
	font-weight: 700
}
header nav {
	text-align: right;
}
header nav a {
	color: #fff;
	margin-left: 15px;
	display: inline-block;
	padding: 10px 15px;
	text-transform: uppercase
}
header nav a:hover {
	background: #537506;
	box-shadow: inset 0 0 10px rgba(0,0,0,0.2)
}
@media(max-width:768px) {
	header h1,
	header nav a {
		text-align: center;
		display: block;
	}
	header nav a {
		background: #537506;
		margin: 0 0 2px 0
	}
	header h1 {
		padding: 0 0 10px 0
	}
}
.main-image {
	background: url('1.jpg');
	background-size: cover;
	color: #fff;
	text-align: center;
	padding-top: 40px;
	padding-bottom: 40px;
	line-height: 1.7;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.3)
}
.main-image .title {
	font-size: 45px;
	font-weight: 700;
	margin: 0 0 20px 0
}
.box {
	background: #f4f4f4;
	padding: 20px;
	color: #555;
	margin-top: 30px;
}
.box h2 {
	color: #000;
	font-size: 20px;
	font-weight: 700;
	margin: 10px 0
}