Untitled

<html>

<head>

	<meta charset="utf-8">
	<link rel="stylesheet" href="bootstrap-3.3.7/dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="style.css">

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
	<script src="bootstrap-3.3.7/dist/js/bootstrap.js"></script>

	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>


<body>

	<div class="navbar navbar-inverse navbar-static-top">
		<div class="container">

			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">

					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>

				</button>
			</div>

			<div class="collapse navbar-collapse" id="menu">
				<ul class="nav navbar-nav">

					<li class="dropdown">
						<a href="#" data-toggle="dropdown" class="dropdown-toggle">Каталог <b class="caret"></b></a>
						<ul class="dropdown-menu">
							<li><a href="#">Пункт 1</a></li>
							<li><a href="#">Пункт 2</a></li>
							<li><a href="#">Пункт 3</a></li>
							<li><a href="#">Пункт 4</a></li>
						</ul>
					</li>

					<li><a href="#">О Нас</a></li>
					<li><a href="#">Контакты</a></li>
					<li><a href="#">История создания</a></li>
				</ul>
			</div>

		</div>
	</div>

	<div id="carousel" class="carousel slide">

		<ol class="carousel-indicators">
			<li class="active" data-target="#carousel" data-slide-to="0"></li>
			<li data-target="#carousel" data-slide-to="1"></li>
			<li data-target="#carousel" data-slide-to="2"></li>
		</ol>

		<div class="carousel-inner">
			<div class="item active">
				<img src="img/1.jpg">
				<div class="carousel-caption">
					<h1>Первый слайд</h1>
					<p>Описание первого слайда</p>
				</div>
			</div>
			<div class="item">
				<img src="img/2.jpg">
				<div class="carousel-caption">
					<h1>Второй слайд</h1>
					<p>Описание второго слайда</p>
				</div>
			</div>
			<div class="item">
				<img src="img/3.jpg">
				<div class="carousel-caption">
					<h1>Третий слайд</h1>
					<p>Описание третьего слайда</p>
				</div>
			</div>
		</div>

		<a href="#carousel" class="left carousel-control" data-slide="prev">
			<span class="glyphicon glyphicon-chevron-left"></span>
		</a>
		<a href="#carousel" class="right carousel-control" data-slide="next">
			<span class="glyphicon glyphicon-chevron-right"></span>
		</a>

	</div>

	</br>

	<div class="container">
		<div class="row">
		<div class="tabs">
			<ul class="nav nav-tabs">
				<li class="active"><a href="#tab-1" data-toggle="tab">Вкладка #1</a></li>
				<li><a href="#tab-2" data-toggle="tab">Вкладка #2</a></li>
				<li><a href="#tab-3" data-toggle="tab">Вкладка #3</a></li>
				<li><a href="#tab-4" data-toggle="tab">Вкладка #4</a></li>
			</ul>

			<div class="tab-content">
				<div class="tab-pane active" id="tab-1">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel urna enim.
					Integer porttitor sodales quam in placerat. Quisque lacinia diam ac suscipit aliquam.</p>
				</div>
				<div class="tab-pane" id="tab-2">
					<p>Cras a luctus velit, dignissim faucibus leo. Vestibulum posuere, eros et
					fermentum tincidunt, orci dui euismod ipsum, sit amet placerat felis ante a mi.</p>
				</div>
				<div class="tab-pane" id="tab-3">
					<p>Nullam volutpat mi turpis, ut suscipit nisl tincidunt et. Integer id enim
					feugiat, pretium enim sed, vulputate sem. Aenean vel magna justo. Nam accumsan
				risus ac accumsan volutpat. Nam efficitur tortor nec dolor ultrices, nec mattis erat tincidunt.</p>
				</div>
				<div class="tab-pane" id="tab-4">
					<p>Maecenas sapien eros, ullamcorper vel nulla ac, gravida placerat ante.
					Pellentesque a convallis metus, ac ultricies massa. Proin mollis urna quis
				dui ornare porta. Maecenas et sapien convallis, pellentesque lacus eu, posuere leo.</p>
				</div>
			</div>
		</div>
		</div>
	</div>

	</br>


	<div class="container">
		<button href="#spoiler" data-toggle="collapse" class="btn btn-primary">Спойлер</button>
		<div class="collapse" id="spoiler">
			<div class="well">
				Maecenas sapien eros, ullamcorper vel nulla ac, gravida placerat ante.
			</div>
		</div>
	</div>

	</br>


	<div class="container">
		<div class="panel panel-warning">
			<div class="panel-heading">Заголовок</div>
			<div class="panel-body">
				Сообщение успешно отправлено!
			</div>
		</div>
	</div>

	<div class="container">
		<table class="table table-striped table-bordered table-hover table-condensed">
			<thead>
				<tr class="success">
					<th>
						Адрес
					</th>
					<th>
						Этаж
					</th>
					<th>
						Номер квартиры
					</th>
				</tr>
			</thead>

			<tbody>
				<tr class="info">
					<th>Улица Пушкина</th>
					<th>10</th>
					<th></th>
				</tr>
				<tr>
					<th class="danger">Малая Спасская</th>
					<th class="warning"></th>
					<th class="success"></th>
				</tr>
			</tbody>
		</table>
	</div>


</body>

</html>