TODO — Список задач на PHP, MySQL, JQUERY 1 урок — Web-fomin

Я буду работать в редакторе Sublime Text, для веб-сервера подойдёт XAMPP.

Подготовим рабочее окружение для нашей TODO, создаём папки, а так же файл index.html:

2016-02-11 21-53-36 Скриншот экрана — Папки

Скачиваем последнюю версию JQuery 1.x https://jquery.com/download/

Версия 1.x от 2.x отличаются друг от друга, поддержкой старых браузеров (IE6, IE7, IE8).

2016-02-11 22-50-17 Скриншот экрана

Откроем архив и распакуем файл jquery-1.12.0.js (Ваша версия может немного отличаться от моей) в папку js.

Скачиваем JQuery UI https://jqueryui.com/ из архива нам нужен файл jquery-ui.min.js, который положим в паку js.

Bootstrap скачиваем на странице:

http://getbootstrap.com/getting-started/#download

можно скачать Bootstrap или скопировать код для подключения Bootstrap без загрузки.

2016-02-11 23-04-07 Скриншот экрана — Код для подключения Bootstrap

В случае если вы скачали bootstrap, из архива нам понадобятся всего 3 файла bootstrap-theme.min.css, bootstrap.min.css кладём в папку css, bootstrap.min.js в папку js.

2016-02-13 02-13-06 Скриншот экрана — Файлы проекта

Открываем index.html с помощью sublime text, пишем html и тут же нажимаем tab. У вас должен был создаться стандартный каркас html сайта.

2016-02-11 23-57-42 Скриншот экрана — Каркас html

Теперь напишем index.html html-каркас используя стили и разметку bootstrap:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
	<title>TODO</title>
	<!-- Bootstrap -->

	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">

	<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" id="header">
	<div class="container-fluid">
		<div class="navbar-header">TODO</div>
		<div class="nav">
			<ul class="nav navbar-nav navbar-right">
				<li>1</li>
				<li>2</li>
			</ul>
		</div>
	</div>
</div>
<div class="wrapper" id="main">
	<div class="container-fluid">
		<div class="row">
		<div class="col-sm-3 col-md-2 sidebar">#SideBar
			<ul class="nav nav-sidebar">
				<li><a href="#">Первая ссыль</a></li>
			</ul>
		</div>
		<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
			<h1>Page Header</h1>
			#content
		</div>	

		</div>
	</div>
</div>

<script type="text/javascript" src="js/jquery-1.12.0.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

</body>
</html>

Так же создадим файл main.css и опишем его содержимое:

#header{
	color: #fff;
}
#main{
	margin-top: 50px;
}
.sidebar{
	position: fixed;
	top: 50px;
	bottom: 0;
	left: 0;
	z-index: 1000;
	padding: 20px;
	overflow: hidden;
	background-color: #D8D8D8;
	border-right: 1px solid #eee;
}

Вот что должны увидеть: