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

Szerző:   |   2014-12-30

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ó

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
}

55 hozzászólás

  1. 2018. augusztus 15. szerda - 14:25

    Kedves Tamás,

    Igazán megérdemelnéd, hogy te csináld meg a cégem honlapját, de mivel már ennyit foglalkoztam vele saját magam, kicsit még görcsölnék vele 🙂
    Egy ideje nézem a videóidat, de a honlapodig csak most jutottam el (eddig mindent hűségesen begépeltem a videóidról – mondd ki nyugodtan, hogy hülye vagyok :))
    Én a bootsrap3.3.7-et húztam le az útmutatásod alapján, de mobil nézetben semmi CSS nincs. Minden kép és szöveg megjelenik, de mintha odahánytam volna vasvillával. Két napja keresem a hiba okát, van esetleg valami ötleted, hogy lehet a baj?

    Válaszod köszönöm előre is,

    Üdvözlettel:

    Attila

    • 2018. augusztus 15. szerda - 14:50

      Szia, látatlanban azt mondanám, hogy egy media query van elírva és emiatt 768 px alatt nem veszi figyelembe a formázásokat.
      Ha Bootstrap-et használsz, én már inkább a 4-es verziót ajánlanám, ott eggyel több töréspont van, precízebben lehet kivitelezni a mobilnézetet.

    • 2018. augusztus 21. kedd - 06:04

      Köszönöm gyors válaszod. A carousel miatt esik szét…ha kiveszem belőle, működik minden rendesen.

  2. 2018. március 4. vasárnap - 12:14

    Szia!
    Először is köszönöm a sok hasznos videót, mert rengeteget lehet belőlük tanulni. Én is a (v4) Bootstrap-et töltöttem már le és szeretnék neki saját css-et. Sajnos már a videódban sem tudtam követni, hogy a 3-asban mettől meddig kell a gyárit törölni, de ebben a 4-esben végleg elvesztettem a fonalat. Tudnál ebben segíteni? Vagy esetleg jól gondolom, hogy ha nem a sima bootsrap.css-t linkelem be a html-be, hanem csak a bootsrap-grid.css -et, akkor az nem jó?

    • 2018. március 4. vasárnap - 16:16

      Szia, a 4-es Bootstrap-ben megváltoztattak csomó mindent, mert flexbox alapú lett a grid. Akarok már róla egy videót csinálni, de még nem volt rá időm. Elég, ha a bootstrap-grid.css fájlt húzod be, a 4-esben ez már külön van szedve alapból. Viszont sok dolog nem fog benne működni amit ebben a videóban látsz, ezért ez az anyag sajnos nem jó a 4-es verzióhoz. Szedd le a 3.3.7-est és azzal menni fog: https://getbootstrap.com/docs/3.3/getting-started/

  3. 2018. január 18. csütörtök - 15:23

    Szia Cyrex,

    Lelkesen nézem a videokat (nagyon jó hogy rád leltem) és most jutottam el ehhez az oldalhoz (responsive web bootstrap-el) , viszont sajnos elakadtam. A Bootstrap oldalán már nincs customize lehetőség (legalábbis én nem találtam meg) ezért a download menüből (link: http://getbootstrap.com/docs/4.0/getting-started/download/) leszedtem a Compiled CSS and JS filet.
    Ebben is van bootstrap.css viszont a 9. percnél mikor beírod ezeket az értékeket hogy “visible-xs” és tsai na ezek hiányoznak ebből a verzióból.
    Ha a Bootstrap főoldalról húzom le (jobb oldalt felül) a download gombbal a komplett cuccost az abban lévő bootstrap.css-ből is hiányoznak ezek a paraméterezések. 🙁

    Tudnál segíteni hogy lépjek tovább?

    köszönöm!

    • 2018. január 18. csütörtök - 15:32

      Te már az újabb (v4) Bootstrap-et töltötted le, abból hiányoznak ezek a class-ok. A videóban a korábbi (v3) Bootstrap-et használtam. Töltsd le azt, és abban megtalálod a class-okat.

    • 2018. január 19. péntek - 10:32

      Tamás,

      Köszönöm a gyors választ! Tovább is haladtam a videoban. Egy kérdésem lenne még: Photoshopban hogy varázsoltad oda a bootstrap grideket? Van erről is oktatóvideo? Egyelőre csak a PS kezdőknek-et láttam.

    • 2018. január 19. péntek - 10:37

      Keress a neten: “bootstrap psd”

    • 2018. január 19. péntek - 12:26

      Köszi szépen! Rákerestem és leszedtem! Már csak egy utolsó (de tényleg) kérdés ha szabad. 🙂 Hogyan lehet azt beállítani hogy a képeknek ne csak a szélessége hanem a magassága is egyformára legyen méretezve a boxban függetlenül azok eredeti méretarányától? Magyarul, hogy a boxok mérete egyforma legyen.

    • 2018. január 19. péntek - 12:43

      Ha a képeknek nem egyforma a mérete, és pontosan egyforma méretben kéne megjelenniük, akkor azt csak úgy tudod megoldani, hogy mindegyiket beteszed háttérképnek egy egyforma méretű dobozba és a background-size: cover-t ráteszed.

      Ha a dobozokban a szöveg mennyisége is eltérő, de azt szeretnéd, hogy egyforma magasságúak legyenek, azt felxbox-szal tudod megoldani. Erről itt találsz anyagot: http://cyrex.hu/2014/07/17/a-flexbox-model/

      Egyébként a Bootstrap a 4-es verziótól már alapból támogatja a flexbox-ot, ezért célszerű inkább azt használni a v3 helyett.

    • 2018. január 19. péntek - 13:52

      Tamás,

      Köszönöm a tanácsokat! Ki is próbáltam a külön boxos megoldást az eddigi tudásommal, ahogy írtad (nem bizti jól csináltam) de sajnos ha már kisebb felbontásba megy az oldal akkor már nem igazodik a kép mérete a box1-hez.

      Szóval a flexbox lehet akkor az egyszerűbb megoldás.
      A bootstrap 3-t szedtem le 2. körben ahogy tanácsoltad mert a 4-ben nincs benne a visible-xs/hidden-xs és tsai. Vagy erre más paraméterezést találtak ki a 4-ben? Ha igen akkor mi a neve? Kicserélem arra a scriptben.

    • 2018. január 19. péntek - 14:51

      A 4-es Bootstrap-ben változtattak ezen, hogy kevesebb class nevet kelljen leírni. Úgy működik, hogy hidden-MÉRET-IRÁNY.
      Például:
      hidden-lg-down = lg és alatta az összes méreten rejtve lesz
      hidden-lg-up = lg és felette minden méretben rejtve lesz

      Ezt a logikát követve ahova eddig hidden-xs class-t írtál, oda mostantól hidden-xs-down kell, ahol eddig visible-xs volt, az pedig hidden-sm-up lesz.

    • 2018. január 19. péntek - 15:00

      Hopsz, most nézem, hogy ez csak az v4 alpha verzióban működött, a véglegesből kiszedték. Itt találod helyette a jelenleg használható class neveket: https://getbootstrap.com/docs/4.0/utilities/display/

    • 2018. január 20. szombat - 14:27

      Köszönöm Mester! 🙂 A V4-ben a push/pull is jóval egyszerűbb lett az új order parancsal! :-)))

    • 2018. január 20. szombat - 14:38

      Ezerszer egyszerűbb, mert a flexbox féle ordert használja. Én az pull / push-t soha nem tudtam normálisan használni.

  4. 2018. január 13. szombat - 10:42

    Akadt egy kis gondom, kimásoltam innen a kódokat azonban egymás alatt vannak a képek és nem egymás mellett oszlopokban. Notepadba bemásoltam innen a css kódot és így se olyan mint amilyen a videóban. Mit hagytam ki?
    Mindent innen másoltam és nem jó nekem.

    • 2018. január 18. csütörtök - 15:34

      Valószínű nem húzza be a CSS-t. Ellenőrizd, hogy jó helyen keresi e.

  5. 2018. január 2. kedd - 17:33

    Szia,

    Bootstrap használóként akadtam el nem kicsit. Persze a Te videód alapján kezdtem el használni nagy megelégedéssel. 🙂 És most olyan kérdésem lenne. Szeretném ha az lg méret alatt legkülső div-em és a nav container-fluid legyen, tehát teljesen kihasználni a rendelkezésre álló helyett. lg méreten pedig container hogy ne nyúljon tovább. És teljesen elakadtam a szegényes tudásommal, hogy css. parancs is megoldja? Hogyan vagy valami js script-et kell készíteni. Válaszodat előre is köszönöm.

    • 2018. január 2. kedd - 19:18

      Kívülre is container-fluid kell, csak ki kell egészíteni még egy class-szal, ami lehet wrapper. És akkor erre rá kell írni, hogy max-width: 1200px, vagy amennyit szeretnél maximális szélességnek.

    • 2018. január 5. péntek - 18:07

      Köszönöm, azt gondoltam van “egyszerűbb” 🙂

  6. 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.

    • 2016. szeptember 14. szerda - 18:07

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

  7. 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?

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

      Flexbox-al.

  8. 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! 🙂

    • 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.

    • 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.

  9. 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á!

    • 2015. szeptember 5. szombat - 10:37

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

  10. 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.-?

    • 2015. szeptember 5. szombat - 10:38

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

  11. 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.

    • 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.

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

      Rendben, köszi!

  12. 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

    • 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.

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

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

  13. 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é. 🙂

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

      lassan? 🙂

  14. 2015. március 29. vasárnap - 22:48

    Szuper!

  15. 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ó! 😀

  16. 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:(

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

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

  18. 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.

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

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

  19. 2015. január 8. csütörtök - 19:34

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

  20. 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….

  21. 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! 🙂

    • 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.

    • 2015. január 3. szombat - 19:01

      Oké, köszi!

  22. 2015. január 2. péntek - 12:11

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

  23. 2015. január 2. péntek - 01:40

    Briliáns, mint mindig!

  24. 2014. december 31. szerda - 10:18

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

Hozzászólás

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • Dia szkennelés házilag

    Örülök, hogy segített az írás....

  • Dia szkennelés házilag

    Nagyon szépen köszönöm, hogy leírta próbálkozásait, mert engem is gondolkodásra késztetett. Több száz diaképem van, de én sem akartam kisebb vagyont k...

  • Adobe XD VS. Lunacy

    Ez egy lebutított vektorgrafikus rajzolóprogram, semmi több. Ha az alkalmazásod / weboldalad tartalmaz raszteres elemeket, azokat PS-ben kell külön le...

  • Adobe XD VS. Lunacy

    Szerintem (ez csak az én meglátásom) az XD inkább csak mobil alkalmazás fejlesztésére van. Nem igazán látom azokat a funkciókat benne amiket PS-ben. N...

  • Adobe XD VS. Lunacy

    A Photoshop sosem volt igazán weboldal tervező program. A Fireworks közelebb volt hozzá annak idején, de azt megszüntették. Más kérdés, hogy még mindi...

  • Adobe XD VS. Lunacy

    Meg a PS amúgy sem ingyenes, szóval az Xd egy jó alternatíva az ilyen esetekre....

  • Adobe XD VS. Lunacy

    Dehogynem. Csak most ez a divat, hogy kattintható prototípusokat hozzunk létre....

  • Adobe XD VS. Lunacy

    PS nem megfelelő?...

  • Adobe XD VS. Lunacy

    Az Xd vel fogom csinálni a weboldalak layoutját ezentúl....

  • Adobe XD VS. Lunacy

    A Lunacy-ban az "images, comments, messages" részt nem sikerűlt egyenlő távolságra alakítani :) Maradjunk az XD-nél :)...

  • Bootstrap carousel

    https://stackoverflow.com/questions/4753695/disabling-right-click-on-images-using-jquery...

  • Bootstrap carousel

    Hali. Nekem annyi kérdésem lenne, hogy hogyan lehet azt megcsinálni, mint néhány oldalnál van, hogy van egy kép például, és nem lehet jobbclickelni rá...