Mérei Tamás webdesigner

Reszponzív weboldal tervezés Bootstrap használatával

Szerző:   |   2014-12-30

Egy kis kedvcsináló a Bootstrap grid-hez év végére.

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
}

Mérei Tamás Webdesigner

Szerző

Mérei Tamás vagyok, webdesigner. Reszponzív weboldalak készítésével foglalkozom, grafikai tervezéstől a HTML + CSS kódolásig.

Ismerj meg! Nézd meg eddigi munkáimat! Lépj velem kapcsolatba!

34 hozzászólás

  1. Márta Mihály
    2016. július 20. szerda - 23:17

    Helló
    Én az egész bootsrapet behuzom a bootstrap oldaláról az nagyon leterheli az oldalt?
    Mivel én nem vettem észre ,a gépen futattot weboldalon és az ingyenes tárhelyre feltöltőtt weboldal se történt semmilyen lassúlás.

    • cyrex
      2016. szeptember 14. szerda - 18:07

      Te nem veszed észre, de a Google igen, meg a csigalassú mobilnettel böngésző userek is.

  2. fi76
    2015. december 3. csütörtök - 18:39

    Szia
    Hogyan lehet, ha egyáltalán meg lehet megvalósítani azt, hogy ha a 4 dobozból mondjuk az egyiknél rövidíted a szöveget, akkor az alja még mindig ugyanott legyen mint a többinek?

    • cyrex
      2015. december 10. csütörtök - 11:23

      Flexbox-al.

  3. Sedulyák Tamás
    2015. október 25. vasárnap - 14:31

    Szia! Lenne egy kérdésem… Ha a bootstrap.css a gyökérben van, akkor jól működik minden, viszont ha mappába teszem style/bootstrap.css, akkor a css-ben beállított képek nem jelennek meg csak teljes elérési úttal (1.jpg helyett D:/bootstrap/images/1.jpg). Mi lehet ennek az oka? (természetesen html-ben is style/bootstrap.css-ra módosítottam)

    Előre is köszönöm és nagyon jól összeszedett anyag! Gratulálok! 🙂

    • cyrex
      2015. december 3. csütörtök - 14:07

      Telepíts webszervert inkább és www könyvtárba pakoljad az oldalt, azzal elkerülhető az ilyesmi szívás.

    • G-unit
      2015. december 9. szerda - 17:10

      Nincs szükség webszerverre, mivel nem szerveroldali scriptet fordítunk. Annyi történt, hogy a képeket nem másoltad át csak a bootstrap fájlt. Azokat is másold át ahova a bootstrap.css-t és menni fog.

  4. Lakatos Tibor
    2015. szeptember 3. csütörtök - 23:11

    Belenéztem a videóba.
    Pár megjegyzés:
    – a csillagos reset nem túl célszerű, nem kellene mindenhol marginozni, ha meghagytad volna a default margókat.
    – nav-on belül mennyivel szemantikusabb lenne, ha lenne egy nem számozott lista
    – célszerűbb lenne több osztálynevet használni, ahelyett hogy header nav a:hover, mert ezt jóval tovább tart kimazsoláznia a böngészőnek

    Amúgy hajrá!

    • cyrex
      2015. szeptember 5. szombat - 10:37

      Hosszú idő óta ez az első építő jellegű komment. Köszi 🙂

  5. Bán Zsolt
    2015. augusztus 17. hétfő - 13:34

    Szia! Nagyon köszönöm, ez is szuper!
    Szépen megkérlek, belinkelnéd nekem a teljes css file.-?

    • cyrex
      2015. szeptember 5. szombat - 10:38

      Benne van a leírásban a link ahol meg tudod nézni.

  6. Zoli
    2015. május 29. péntek - 12:23

    Szia, találtam én egy ilyen sort w3schoolson, hogy:
    Note: Containers are not nestable (you cannot put a container inside another container).
    Ez most itt azt jelenti, hogy két .container nem ágyazható egymásba vagy a .container és a .container-fluid sem, semmilyen kombinácóban? Mert ha utóbbi, akkor nem biztos, hogy jól van ez a kód így ahogy van, pl. headernél.

    • cyrex
      2015. május 29. péntek - 12:34

      Padding-ek miatt valóban nem a legszerencsésebb, de túl nagy jelentősége nincs, az oldal megjelenik és nem esik szét. Nem szoktam már így használni egyébként.

    • Zoli
      2015. május 29. péntek - 21:23

      Rendben, köszi!

  7. Szána Szabolcs
    2015. május 6. szerda - 12:39

    Szia,

    Annyi kérdésem lenne, hogy a következő szerkezetnél ami a Te példádban is többször szerepel a második row div-nek milyen szerepe van? Mert szerintem fölösleges belerakni ugyanis nélküle is tökéletesen működik.
    header class=container-fluid
    div class=row // ERRE A SORRA GONDOLOK //
    div class=container
    div class= row
    ide jönnek a col-ok

    A választ előre is köszönöm, mert tényleg érdekelne, hogy van e valamilyen célja.
    Szabi

    • cyrex
      2015. május 9. szombat - 11:46

      Működik, csak nem lesz jó a layout, mert a container-en és a container-fluid-on is van két oldalon 15px padding, amit a row-on lévő -15px negatív margin kompenzál. Tehát container és container-fluid után mindig kell row.

    • Szána Szabolcs
      2015. május 11. hétfő - 15:01

      így már értem, logikus 🙂 köszönöm szépen a választ!

  8. Balassa Tibor
    2015. április 21. kedd - 16:32

    Nagyon köszönöm!
    Nagy hasznát fogom venni.
    Analitics alapján egyre több a mobil látogatás, sajnos a jól bevált 980px-es oldalszerkezet lassan a múlté. 🙂

    • Szána Szabolcs
      2015. május 11. hétfő - 15:01

      lassan? 🙂

  9. Cselovszki Éva
    2015. március 29. vasárnap - 22:48

    Szuper!

  10. KingSearch
    2015. február 7. szombat - 18:46

    Csak segítség képen mondom, hogy a második forráskódablakban nem CSS-t hanem mégegyszer HTML-t írtál! Amúgy nagyon jó a videó! 😀

  11. Varga Judit
    2015. január 13. kedd - 15:40

    Szuper, köszi szépen ez most nagyon jól jött:) Egyenlőre még a hamburger menüvel szenvedek, mert a Bootstrapot, WP alatt használom. És a Bootsrap-navwalker, egy összecsukás után már nem működik:(

  12. Feri
    2015. január 12. hétfő - 22:29

    Koszi a videokat Cyrex! Nagyon jok mint mindig!!! Bocsi az ekezetek miatt.

  13. Robinqn
    2015. január 11. vasárnap - 13:00

    Szia! 🙂 Lenne egy kérésem/kérdésem,hogy lehet megcsinálni,hogy telefont használd egér helyett ? Pl.:Photoshopban könnyebb rajzoláshoz.

    • cyrex
      2015. január 23. péntek - 22:28

      Fogalmam sincs, ilyenről még nem is hallottam.

  14. Murányi Ákos
    2015. január 8. csütörtök - 19:34

    Nagyon jó lett! Köszönöm!

  15. Hunfiu12
    2015. január 3. szombat - 11:02

    Szia, nem tudnád elküldeni annak a photoshop-os dolognak a linkjét mert akárhogy keresek olyan jót nem találok….

  16. Kovács Jónás
    2015. január 2. péntek - 16:07

    Szia!
    Eddig nem ismertem a Bootstrap-ot, viszont ez a tutorial után szerintem sokszor fogom használni!

    Egy dolgot nem értek. A sorok (row) létrehozását mikor kell alkalmazni? Most kezdtem el egy weblapot készíteni, szimplán azért, hogy kicsit gyakoroljam a munkát a Bootstrappal és a PHP programozást, és az egészet (tehát a header-t, carousel-t, tartalmi részt és a footer-t is) egy sima containerbe zártam, hogy ne legyen semmi 100% szélességű, viszont nem tudom, mit lenne logikus row-ba tenni?

    Előre is köszi a választ! 🙂

    • Mérei Tamás
      2015. január 2. péntek - 19:06

      A row összesen annyit csinál, hogy a col-ok miatt két oldalon keletkező 15px-es plusz padding-et megszünteti -15px-es margin-al. A lényeg annyi, hogy a col- kezdetű div-ek mindig row elemen belül legyenek. Ha nem így csinálod, akkor 15px-t ki fog lógni mindkét szélén az oldal a konténerből, emiatt vízszintes scrollbar lesz.

    • Kovács Jónás
      2015. január 3. szombat - 19:01

      Oké, köszi!

  17. Kencse Szabolcs
    2015. január 2. péntek - 12:11

    Nagyon jó , Köszi szépen a fáradtságot sokatsegítettél 🙂

  18. Karsa Sándor
    2015. január 2. péntek - 01:40

    Briliáns, mint mindig!

  19. Polgár Tamás
    2014. december 31. szerda - 10:18

    Nagyon szépen köszönöm! ;D

Hozzászólás

Legújabb hozzászólások