• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Boostrap, strona i podział

VPS Starter Arubacloud
0 głosów
428 wizyt
pytanie zadane 6 stycznia 2017 w HTML i CSS przez Apper97 Obywatel (1,380 p.)
zmienione kategorie 6 stycznia 2017 przez HaKIM
Witam.

Mam pytanko, czy dzięki boostrap mogę stworzyć stronę szybciej i wygodniej jeżeli robiłbym to bez niego? Weźmy na przykład taką sytuacje, że chce aby moja strona wyglądała jak portfolio które wykonał Pan Zelent w tym odcinku: https://www.youtube.com/watch?v=5y3Qc9Qs6TY&t=48s

Tutaj Pan zelent wykorzystał divy które były dość spore. Jak mógłbym wykonać to samo przy pomocy boostrapu? np. przesunąc szeroką stopkę z dołu trochę wyżej itp. Chodzi mi o to, że gdy będę tworzył siatkę w boostrapie to chce, aby jedna z kolumn była większa i szersza od drugiej, a nie do konca rozumiem jak mialbym to zrobić.
komentarz 6 stycznia 2017 przez Czort Nałogowiec (32,500 p.)
Jak chcesz, żeby wyglądało tak jak w odcinku, to bez bootstrapa będzie szybciej.
komentarz 6 stycznia 2017 przez niezalogowany
Zła kategoria
komentarz 6 stycznia 2017 przez Apper97 Obywatel (1,380 p.)
w takim razie do czego przyda mi sie ten boostrap?
komentarz 6 stycznia 2017 przez Kazuhiro Użytkownik (910 p.)
Do tworzenia stron responsywnych. Ma jeszcze sporo dodatków, np. slider i inne, ale mam co do nich mieszane uczucia.

2 odpowiedzi

+1 głos
odpowiedź 6 stycznia 2017 przez hoktaur Pasjonat (22,250 p.)

Tak by to mogło wyglądać:

<!DOCTYPE html>
<html lang="pl">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
	body {
		background-color: black;
	}
	.rectangle {
		font-size: 70px;
	}
	.singleHeight {
		height: 142px;
		padding: 10px;
	}
	.singleHeight > div {
		padding: 15px;
		height: 100%;
	}
	.doubleHeight {
		height: 284px;
		padding: 10px;
	}
	.doubleHeight > div {
		padding: 15px;
		height: 100%;
	}
	.glyphicon {
		font-size: 65px;
	}
</style>
<body>

<div class="container text-center">
	<div class="rectangle row text-muted">
		<div class="col-md-6 text-left">
			Jan Kowalski
		</div>
		<div class="col-md-6 text-center">
			12:00:00
		</div>
	</div>
		<div class="row">
			<div class="col-md-6">
				<div class="row">
					<div class="col-md-6 singleHeight">
						<div class="bg-primary">
							<span class="glyphicon glyphicon-music"></span><br />
							Kim jestem?
						</div>
					</div>
					<div class="col-md-6 singleHeight">
						<div class="bg-success">
							<span class="glyphicon glyphicon-search"></span><br />
							Co oferuje?
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-6 singleHeight">
						<div class="bg-info">
							<span class="glyphicon glyphicon-star"></span><br />
							Kim jestem?
						</div>
					</div>
					<div class="col-md-6 singleHeight">
						<div class="bg-warning">
							<span class="glyphicon glyphicon-cloud"></span><br />
							Co oferuje?
						</div>
					</div>
				</div>			
				<div class="row">
					<div class="col-md-12 singleHeight">
						<div class="bg-danger">
							Talk is cheap. Show  me the code!<br />
							- Linus Torvalds, twórca Linuxa
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="row">
					<div class="col-md-12 doubleHeight">
						<div class="bg-primary">
							Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-3 singleHeight">
						<div class="bg-success">
							<span class="glyphicon glyphicon-envelope"></span><br />
						</div>
					</div>
					<div class="col-md-3 singleHeight">
						<div class="bg-info">
							<span class="glyphicon glyphicon-glass"></span><br />
						</div>
					</div>
					<div class="col-md-3 singleHeight">
						<div class="bg-warning">
							<span class="glyphicon glyphicon-user"></span><br />
						</div>
					</div>
					<div class="col-md-3 singleHeight">
						<div class="bg-danger">
							<span class="glyphicon glyphicon-heart"></span><br />
						</div>
					</div>
				</div>				
			</div>
		</div>
	</div>

</body>
</html>

ale zwróć uwagę bootstrap to nie tylko grid i responsywność

 

0 głosów
odpowiedź 6 stycznia 2017 przez typowy_endriu Użytkownik (620 p.)
Musisz wczytać się w dokumentację Bootstrapa, a jestona mega lekka i zrozumiała

Stronę budujesz z gotowych klas któych używasz w swoim pliku CSS.

Nie oglądałem tego poradnika  ale jesśli chodzi o divy czy tam kontenery na dane zacznuj lekturę od klasy

<div class="container "lub container-fluid></div>

<div class="row"></div>

<div class col-md-*>

 

<----- TREŚĆ KONTENERA ---->

 

</div>

 

 

 

Uprzedzam moderatora to nie jest kod żródłowy :)

Podobne pytania

0 głosów
3 odpowiedzi 806 wizyt
pytanie zadane 13 listopada 2016 w HTML i CSS przez Dynamic Bywalec (2,910 p.)
0 głosów
0 odpowiedzi 132 wizyt
0 głosów
1 odpowiedź 257 wizyt

92,417 zapytań

141,222 odpowiedzi

318,983 komentarzy

61,831 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...