| Autor | Zpráva | ||
|---|---|---|---|
| Návštěvník Profil * |
#1 · Zasláno: 29. 1. 2015, 20:40:41 · Upravil/a: Návštěvník
Zdravím,
snažím se nějak pochopit twitter bootstrap, jeho grid system a chtěl bych si vytvořit grid mřížku pro photoshop, ať můžu pomocí ní navrhovat design pro bootstrap. Mám tento kód pro botstrap. Jde jen prostě o zobrazení jednotlivých sloupců a jejich obarvení aby byly vidět: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BS My grid system for PS</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mystyles.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<div class="container">
<div class="col-md-1 one">
1
</div>
<div class="col-md-1 two">
2
</div>
<div class="col-md-1">
3
</div>
<div class="col-md-1">
4
</div>
<div class="col-md-1">
5
</div>
<div class="col-md-1">
6
</div>
<div class="col-md-1">
7
</div>
<div class="col-md-1">
8
</div>
<div class="col-md-1">
9
</div>
<div class="col-md-1">
10
</div>
<div class="col-md-1">
11
</div>
<div class="col-md-1">
12
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>A v css jen obarvení: .container {
background-color: grey;
}
.col-md-1 {
background-color: red;
}
.one {background-color: blue
}
.two {
background-color: green; }Výsledek: https://lh6.googleusercontent.com/AkYr5BqYZZcu3hyqgBEOv6SKyN7pN0_V-y_-386CDO-L9QKi8uCmRPQ05RXjYYTHIgc7LJ3Qx44=w1638-h831 Nechápu, jak bootstrap pracuje s jednotlivými sloupci a jak je přizpůsobit? Jak můžu nastavit mezery mezi sloupci? Chci třeba na stránce div s určitým pozadím, který bude široký 4 sloupce. Jak můžu upravit šířku sloupců, aby měly sloupce lepší rozměry? Např. teď je jeden sloupec široký 94px. Co když chci ty rozměry nějak lépe zaokrouhlené, ať se s tím lépe koderovi pracuje? Prosím, neodkazujte mě na originální dokumentaci. Tu jsem si procházel, ale moc tomu nerozumím (asi kvůli mé angličtině) Budu rád, když mi někdo vysvětlí nějak rozumně jak to v bootstrapu funguje a jak s tím pracovat. Díky Ještě pro doplnění. Třeba zde je grid bootstrapu pro photoshop: http://benstewart.net/2014/04/bootstrap3-responsive-grid-photoshop/ Mezi jednotlivými sloupci jsou ale mezery. Bohužel, jak jsem uváděl výše, tak standardně je bootstrap mezi sloupci nemá. Jak postupovat, když v návrhu designu budu mít mezi sloupci mezery? Jak to upravím a nakoduji pomocí bootstrapu? Díky |
||
| Keeehi Profil |
#2 · Zasláno: 29. 1. 2015, 21:28:11
Návštěvník:
„Jak můžu nastavit mezery mezi sloupci?“ Nemůžeš. Je to totiž proti jeho stylu. Nastav si margin nebo padding obsahu, ale na sloupce se nesahá. „Jak můžu upravit šířku sloupců, aby měly sloupce lepší rozměry?“ Nemůžeš. Těch sloupců je vždy dvanáct a vždy jsou všechny stějně široké. Můžeš nastavit jinou šířku rodiči těch sloupců a ta změnit jejich šířku, ale jednotlivě to nejde. Pokud to chceš mít zaokrouhlené na násobky 5ti, tak šířka rodiče musí být násobek 60ti. Myslím, že si předně musíš uvědomit že sloupcový layout bootstrapu tu není proto aby ti pomohl vytvořit 2 sloupce vedle sebe, jeden s šířkou 250px a druhý 700px které budou takto vždy a za všech okolností. Slupce jsou o responzivnosti a přizpůsobování se různým šířkám. Naopak je žádoucí, aby se jejich šířka měnila. Pokud ti to nevyhovuje, nemusíš je vůbec používat, ostatní části na nich nejsou závislé. Pokud ti však jde o responzivitu, pak musíš změnit logiku jak nad stránkou uvažuješ. |
||
| Návštěvník Profil * |
#3 · Zasláno: 29. 1. 2015, 22:33:29
Ok, rozumím. No právě že mi jde o responzivitu, takže máš pravdu, asi jsem si to úplně neuvědomil.
„Jak můžu nastavit mezery mezi sloupci?“ Nemůžeš. Je to totiž proti jeho stylu. Nastav si margin nebo padding obsahu, ale na sloupce se nesahá. Ok, takže musím do toho sloupce ještě umístit nějaký další div a tomu nastavit margin? Ale zase mi pak nebude sedět margin díky divu.container, protože tam už je nastavený nějaký margin od těch sloupců (ten šedý div.container přesahuje přes sloupce, takže tam pak bude dvojitý margin na okrajích - viz obrázek). |
||
| Keeehi Profil |
#4 · Zasláno: 29. 1. 2015, 22:46:30
Proto bys tam taky měl mít ten
<div class="row"> který slouží právě k přepsání paddingu containeru.
|
||
| Návštěvník Profil * |
#5 · Zasláno: 29. 1. 2015, 22:58:06
Jo takhle. No to jsem taky zkoušel, ale pořád je z nějakého důvodu vpravo okraj.
https://lh5.googleusercontent.com/VhOq6oN5t-Y-5FLH8SOtFmrfOLXvU66f9IH0c-H2SxsQty7DHUs4BB6yDrfxvQJqF0I5FJqOSXQ=w1627-h830 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BS My grid system for PS</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mystyles.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<div class="container">
<div class="row">
<div class="col-md-1 one">
1
</div>
<div class="col-md-1 two">
2
</div>
<div class="col-md-1">
3
</div>
<div class="col-md-1">
4
</div>
<div class="col-md-1">
5
</div>
<div class="col-md-1">
6
</div>
<div class="col-md-1">
7
</div>
<div class="col-md-1">
8
</div>
<div class="col-md-1">
9
</div>
<div class="col-md-1">
10
</div>
<div class="col-md-1">
11
</div>
<div class="col-md-1">
12
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html> |
||
| Keeehi Profil |
Ono to ale funguje Hello, world! Je to jen zkopírovaný váš kód co jste sem dal. To že tam vidíte kus šedivého, tak za to může něco co jste sem nedal. Bude to pravděpodobně v mystyles.css ale co to je z obrázku opravdu nezjistíme.
|
||
| Návštěvník Profil * |
#7 · Zasláno: 29. 1. 2015, 23:45:37
Tím to není. Zobrazuje se to i v tom Vašem odkazu. Ale může za to Opera. V chromu to funguje jak má.
Děkuji moc za rady. Konečně mám v tom trošku jasno :) |
||
| Návštěvník Profil * |
#8 · Zasláno: 31. 1. 2015, 21:57:05
Ještě by mě zajímalo, jak upravit ty mezery (gutter) v gridu (defaultně je to 30px)? Myslím mezi sloupci = asi paddingy u "col" sloupců. Bude stačit upravit jen v css bootstrapu ten padding (kde?), nebo to musím celé nějak přepočítat tak, aby bylo možné šířku layoutu dělit na 12 sloupců?
Potřeboval bych totiž tu mezeru ze 30px zmenšit tak na 20px. |
||
| Keeehi Profil |
#9 · Zasláno: 31. 1. 2015, 22:44:07
Návštěvník:
Pokud to chceš opravdu hardcore, tak si můžeš stáhnout zdrojové soubory, nakonfigurovat si to a pak to lessem zkompilovat. Pro ty ostatní má bootstrap připravené klikátko, kam si vyplníš co chceš a on to za tebe zkompiluje a nabídne ti ke stažení jeden krásný malý css soubor upravený podle tvého nasavení. |
||
|
Časová prodleva: 9 let
|
|||
0