Witam,
od niedawna bawię się w bootstrap i jestem na etapie poznawania tego programu i dostępnych funkcji.
Próbując różne kody z tutoriali natknąłem sie na problem.
Nie działają u mnie kontenery jak np tu http://kursbootstrap.pl/examples/fixed_container.html , nie wyświetla się to charakterystyczne szare pole. Kody pokazujące tabele, kolorowe przyciski lub różne rozwijalne/wybieralne menu wyświetlają się poprawnie.
Bootstrap to nie program tylko framework do tworzenia responsywnych stron WWW.
A czy po domykałeś wszystkie elementy poprawnie? On czasem tak ma jak się źle po domyka znaczniki to potem wariuje.
Lub może nie masz wszystkich cssów? Masz wszystkie pliki z paczki bootstrapa?
http://kursbootstrap.pl/wprowadzenie-do-bootstrap/
Tutaj masz strukture projektu na Bootstrapie i wszystkie potrzebne pliki.
mam pobrane pliki ze strony getbootstrap.com wersja 3-1-1. Próbując np z tym kodem
wyrazy "aaa" są oddzielone od siebie o odpowiednią odległość natomiast nie ma tego szarego tła. Gdy próbuje zagnieżdzać w kontenerze inne kontenery słowa są przy lewej krawędzi ekranu bez żadnych stylów, bądź w ogóle się nie wyświetlają.
Bootstrap w wersji 3 zmienił składnię i obecnie tworząc kolumny nie stosuje się zapisu
<div class="span6"</div>
a zapis:
<div class="col-md-6"</div>
Tutaj masz opis: http://kursbootstrap.pl/nowe-rusztowanie-szablonu/
dodanie znaczników <code class="html"> - Furious Programming
Dziękuję za odpowiedź jednak używając kodu:
<div class="container">
<div class="row">
<div class="col-md-6">aaa</div>
<div class="col-md-6">aaa</div>
</div>
</div>
kontenery nadal się nie pokazują
Bootstrap musi być dobrze zlinkowany bo inne elementy takie jak tabele, przyciski, kolory, listy menu, charakterystyczne dla bootstrapa, pojawiają się w sposób poprawny.
Usunięcie klasy row nie pomaga.
Dodanie height w sposób:
<div class="container">
<div class="col-md-6" height="10 px">aaa</div>
<div class="col-md-6" height="10 px">aaa</div>
</div>
również nie pomaga.
Kontener nigdy nie będzie miał szarego tła jeśli nie wpiszesz tego w CSSie. Kontenery i kolumny służą do stworzenia szkieletu projektu. W przykładzie na stronie jest szare tło, żeby zwizualizować gdzie leży kontener. Aby stworzyć box z szarym tłem użyj:
<div class="well"></div>
albo w CSSie dodaj:
.container {background-color: #333;}
zamiana znacznika <code class="html"> na <code class="css"> - Furious Programming
HTML:
<!DOCTYPE html>
<html>
<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>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<div class="col-lg-6">aaa</div>
<div class="col-lg-6">aaa</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS:
col-lg-6{
background-color: lightBlue;
text-align: center;
height: 100px;
width:100px;
border: 2px solid black;
}
takie proste sie wydaje a nie dziala
Działa, działa:) gdy w CSSie piszemy klasę to na początku nazwy należy dać kropkę " . " :)
BTW, nie należy podawać szerokości kolumn, jak już to szerokości divów wewnątrz kolumn.
Przykład: http://www.bootply.com/124652