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

Posted on by

Я буду работать в редакторе 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:

index.html
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!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 и опишем его содержимое:

main.css
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#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;
}

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

2016-02-13 02-33-10 Скриншот экрана

todo

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

TODO — Список задач на PHP, MySQL, JQUERY 2 урок

Размещено в PHP и отмечено , .