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

Скачиваем последнюю версию JQuery 1.x https://jquery.com/download/
Версия 1.x от 2.x отличаются друг от друга, поддержкой старых браузеров (IE6, IE7, IE8).
Откроем архив и распакуем файл 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 без загрузки.

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

Открываем index.html с помощью sublime text, пишем html и тут же нажимаем tab. У вас должен был создаться стандартный каркас 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; }
Вот что должны увидеть:
