Witajcie! Od kilku dni kiedy znajdę chwile czasu zajmuje się bootstrapem. Wydaje mi się, że idzie mi dobrze jednak nie na wszystko potrafię znaleźć rozwiązanie. Udostępnię kod, którym zajmowałem się dziś i chciałbym abyście poprawili mnie na przyszłość. Mam również pytanie dotyczące ustawienia tekstu wobec obrazka bądź odwrotnie. Użycie atrybutów margin aby zbliżyć obrazek do tekstu psuje responsywność jak zresztą zauważycie w kodzie. Chciałbym poznać jakiś sposób w bootstrapie który łatwo pomoże mi ustawiać np. opływowość tekstu. Kolejny problem w kodzie jest taki, że na małych rozdzielczościach konkretnie col-sm rozjeżdża mi się nawigacja. Jak mógłbym to poprawić? Proszę Was bardzo o wskazówki dotyczące mojego kodu. Z góry dziękuję :)
<!DOCTYPE html>
<html lang="pl">
<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 - projekt startowy</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.jumbotron {
background: url(img/bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: white;
margin-top: 25px;
}
.btn {
transition: 0.3s;
}
.navbar {
margin-bottom: 0;
background-color: #403F3F;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
-webkit-box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.21);
-moz-box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.21);
box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.21);
border-top: solid white;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #fff !important;
background-color: #535252 !important;
transition: 0.3s;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
#price {
margin-top: 15px;
}
.carousel-control.right, .carousel-control.left {
background-image: none;
color: black;
}
.carousel-indicators li {
border-color: black;
}
.carousel-indicators li.active {
background-color: black;
}
.item h4 {
font-size: 25px;
line-height: 1.375em;
font-weight: 400;
font-style: italic;
margin: 70px 0;
}
.item span {
font-style: normal;
font-size: 20px;
}
.price:hover {
-webkit-box-shadow: 11px 10px 46px -16px rgba(0,0,0,0.75);
-moz-box-shadow: 11px 10px 46px -16px rgba(0,0,0,0.75);
box-shadow: 11px 10px 46px -16px rgba(0,0,0,0.75);
}
</style>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">LOGO</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-left">
<li><a href="#about">ABOUT</a></li>
<li><a href="#services">SERVICES</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#pricing">PRICING</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">GET STARTED</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center">
<h1>RESPONSIVE </h1>
<p>WEB DEVELOPMENT</p>
<button type="button" class="btn btn-default btn-lg">GET STARTED</button>
</div>
<div class="container" id="about">
<div class="row">
<div class="col-sm-8 col-xs-8" style="font-size:20px;">
<h2>Speed and Performance</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel tempora commodi in, sunt, quis qui laboriosam iste error, esse, perspiciatis eius dolorem dicta! Earum necessitatibus consequuntur aperiam dolor sequi, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quisquam, cupiditate sed quaerat molestias impedit pariatur nihil aliquid, ad consectetur libero ipsa corporis possimus provident, at a aut nulla atque.
lorem
</div>
<div class="col-sm-4 ">
<span class="glyphicon glyphicon-signal logo" style="font-size: 200px; margin-top: 50px;"></span>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-music" style="font-size: 200px; margin-top: 50px; "></span>
</div>
<div class="col-sm-8 col-xs-8" style="font-size:20px; margin-top:50px; margin-left: -120px;">
<h2>Download Music for Free</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel tempora commodi in, sunt, quis qui laboriosam iste error, esse, perspiciatis eius dolorem dicta! Earum necessitatibus consequuntur aperiam dolor sequi, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quisquam, cupiditate sed quaerat molestias impedit pariatur nihil aliquid, ad consectetur libero ipsa corporis possimus provident, at a aut nulla atque.
lorem
</div>
</div>
</div>
<br /> <br />
<div class="container-fluid" style="background-color: #EDEDED;">
<div class="container" id="price">
<div class="row ">
<div class="col-sm-4 col-xs-12">
<div class="panel panel-default text-center price">
<div class="panel-heading">
<h1>BASIC</h1>
</div>
<div class="panel-body" style="font-size: 20px;">
<p>Free Music Download</p>
<p>lorem</p>
<p>ipsum</p>
<p>dolor</p>
</div>
<div class="panel-footer">
<p style="font-size:30px;">$25</p>
<button type="button" class="btn btn-default btn-lg">BUY</button>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="panel panel-default text-center price">
<div class="panel-heading">
<h1>PRO</h1>
</div>
<div class="panel-body" style="font-size: 20px;">
<p>Free Music Download</p>
<p>lorem</p>
<p>ipsum</p>
<p>dolor</p>
</div>
<div class="panel-footer">
<p style="font-size:30px;">$25</p>
<button type="button" class="btn btn-default btn-lg">BUY</button>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="panel panel-default text-center price">
<div class="panel-heading">
<h1>XXL</h1>
</div>
<div class="panel-body" style="font-size: 20px;">
<p>Free Music Download</p>
<p>lorem</p>
<p>ipsum</p>
<p>dolor</p>
</div>
<div class="panel-footer">
<p style="font-size:30px;">$25</p>
<button type="button" class="btn btn-default btn-lg">BUY</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="panel panel-default" style="margin-top: 20px;">
<h2 class="text-center">Just watch!</h2>
<div id="myCarousel" class="carousel slide text-center" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<h4>Responsywne szablony<br>
<span>tylko u nas responsywne</span></h4>
</div>
<div class="item">
<h4>Responsywne szablony<br>
<span>tylko u nas responsywne</span></h4>
</div>
<div class="item">
<h4>Responsywne szablony<br>
<span>tylko u nas responsywne</span></h4>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div class="container-fluid" style="background-color: #EDEDED;">
<div class="container">
<h2>Contact</h2>
<div class="row">
<div class="col-sm-5 col-xs-12">
<p>Contact us and we'll get back to you within 24 hours.</p>
<p><span class="glyphicon glyphicon-map-marker"></span> Chicago, US</p>
<p><span class="glyphicon glyphicon-phone"></span> +00 1515151515</p>
<p><span class="glyphicon glyphicon-envelope"></span> myemail@something.com</p>
</div>
<div class="col-sm-7 col-xs-12 form-group">
<div class="row">
<div class="col-sm-6">
<input class="form-control" id="name" name="name" placeholder="Name" type="text" required></div>
<div class="col-sm-6">
<input class="form-control" id="email" name="email" placeholder="email" type="email" required>
</div>
</div><br>
<textarea class="form-control" name="Comment" id="Comment" placeholder="Comment"></textarea><br />
<button class="btn btn-primary btn-md pull-right" type="submit">SEND IT!</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>