В период с 10 по 20 ноября 2017 года на ITVDN проходила акция Technical Skills Марафон. В акции приняли участие 600 человек, из них 98 успешно выполнили задания практикумов. 21 ноября в 17:00 на YouTube канале в прямом эфире были определены победители марафона. Смотрите видео запись розыгрыша. Как и было заявлено в условиях акции, мы провели розыгрыш 5 подписок на три месяца и 25 подписок на 1 месяц. Вот имена победителей: HTML&CSS Малышев Сергей – подписка на 3 месяца Krasnou Vitali – подписка на 1 месяц Цымбаленко Денис - подписка на 1 месяц Brovenko Vadim- подписка на 1 месяц Хмара Владимир- подписка на 1 месяц Bezvesilny Konstantin- подписка на 1 месяц JavaScript Takes Leios– подписка на 3 месяца Милеев Антон– подписка на 1 месяц Loktionov– подписка на 1 месяц Корольчук Александр– подписка на 1 месяц Korobka Sergey– подписка на 1 месяц Хмара Владимир– подписка на 1 месяц SQL Цуканов Илья - подписка на 3 месяца Иванова Ольга - подписка на 1 месяц Safronyuk Maxim - подписка на 1 месяц Сидоренко Борис - подписка на 1 месяц Brovenko Vadim  - подписка на 1 месяц Prokhorov Konstantin - подписка на 1 месяц C# Starter Цуканов Илья - подписка на 3 месяца Кириличев Владислав - подписка на 1 месяц Белошицкий Николай - подписка на 1 месяц Гурбич Михаил - подписка на 1 месяц Karpenko Volodymyr - подписка на 1 месяц Хмара Владимир - подписка на 1 месяц С# Essential Brovenko Vadim - подписка на 3 месяца Хмара Владимир - подписка на 1 месяц Arsen Grigoryan - подписка на 1 месяц Xazaryan Artur - подписка на 1 месяц Bulyha Nazar - подписка на 1 месяц Nakytniak Dmitry - подписка на 1 месяц 4 участника акции успешно выполнили задания всех 5 практикумов. Вот их имена: Brovenko Vadim Хмара Владимир Korobka Sergey Pokydko Anton Наш супер-герой, выполнивший все задания с максимальными результатами - Brovenko Vadim. Мы поздравляем Вадима и будем рады вручить ему фирменную дженгу и футболку ITVDN! Письма с подорочными сертификатами будут отправлены победителям 22 ноября 2017 года. Благодарим всех участников марафона!

Technology Nation – это всеукраинская образовательная программа фонда BrainBasket, стартовавшая в 2016 году. О фонде BrainBasket BrainBasket стремится сделать ИТ-направление движущей силой экономического роста Украины с помощью развития образовательной инфраструктуры. Цель - способствовать подготовке 100000 новых IT-специалистов до 2020 года. Приятный подарок для участников Программы Technology Nation приготовил ITVDN - онлайн ресурс для профессиональной подготовки разработчиков программного обеспечения, созданный учебным центром CyberBionic Systematics. Все участники Программы (более 23 тысяч человек!) получат бесплатно полный доступ ко всем учебным материалам платформы ITVDN - это более пятидесяти видео курсов по таким популярным направлениям IT образования, как frontend разработка, программирование на С # и Microsoft .NET технологии, Python, разработка игр на Unity 3D, мобильная разработка на Xamarin.Android и другие. В каждом видео курсе есть не только видео уроки, но и полный комплект учебных материалов - примеры кода с комментариями, базовые конспекты, задания для самостоятельной работы, презентации. После каждого пройденного урока предусмотрено онлайн тестирование для проверки знаний и в случае успешной сдачи финального экзамена по курсу - соответствующий электронный сертификат от Testprovider.com. Для тех, кто сейчас проделывает первые шаги в изучении основ программирования, мы советуем воспользоваться ITVDN для изучения web технологий - ведь они сейчас являются наиболее популярными не только в Украине, но и в мире в целом. На ITVDN вы сможете изучить технологии по направлению Front-End разработки: • HTML & CSS • Создание адаптивного сайта с Twitter Bootstrap 3 • JavaScript Essential • JavaScript Advanced • JQuery • JavaScript Шаблоны • HTML5 & CSS3 • Angular JS Essential • React JS Essential Большой сюрприз ждет тех, кто прошел конкурсный отбор в двадцати трех городах и попал в первые учебные группы Программы Technology Nation. Эти 345 человек получат в подарок полный доступ к видео курсам ITVDN на 3 месяца! ITVDN желает Программе Technology Nation и всем ее участникам успехов в обучении ИТ-специалистов на высоком профессиональном уровне.

ITVDN выпустил новый видеокурс AngularJS для веб разработчиков, создающих приложения используя JavaScript, по одному из самых популярных JavaScript фреймворков, который используется для написания Single Page Application. Большинство разработчиков используют AngularJS как основную библиотеку при разработке SPA приложений. Этот видеокурс будет полезен тем, кто хочет овладеть современными знаниями и выйти на новый профессиональный уровень. Он будет интересен как начинающим разработчикам, так и тем у кого уже есть опыт в программировании языке JavaScript. Данный видеокурс позволит структурировать свои знания и даст возможность получить необходимый набор знаний для того чтобы научиться разбираться в чужом коде и создавать также свои собственные приложения. Об AngularJS можно сказать, что он стал стандартом в разработке SPA приложений. Для того чтобы изучить данный видеокурс Вам необходима будет владеть языком HTML и СSS и , в том числе, JavaScript Essential и JavaScript Advanced. В данном курсе вы узнаете что такое AngularJS и шаблоны MVC. Когда именно нужно использовать AngularJS и какова его структура. Будут приведены простые и сложные примеры. Можно будет изучить как использовать Bootstrap. Вы научитесь создавать AngularJS приложения использовать модули, контроллеры и основные директивы для построения пользовательского интерфейса. Также вы научитесь использовать однонаправленный и двунаправленные привязки данных. Использовать директивы для создания повторяющихся элементов интерфейса и загрузки частичных представлений. В курсе будет рассмотрен AJAX – как неотъемлемая часть Single Page приложения. Будут рассматриваются примеры работы с сервисом $http для взаимодействия с серверной стороной. Одно из преимуществ приложений, написанных с использованием шаблона MVC – тестируемость. В одном из уроков курса будет показано, как создавать и запускать unit тесты для AngularJS приложений. В этом курсе подробно рассматриваются принципы создания сервисов в AngularJS, а также рассматриваются основные системные сервисы. Подробнее информацию о курсе Вы можете посмотреть на странице видеокурса по AngularJS.

Новогоднее настроение, несмотря на дождь и слякоть, потихоньку проникает в наши офисы и дома. Мы все уже живем с предчувствии и ожидании праздника, отдыха, встреч и подарков. Образовательный портал ITVDN раздает подарки для IT специалистов – сертификаты на видео курсы. Чтобы получить их, нужно заполнить заявку.  Получив подарочный сертификат, можно выбрать один из видео курсов - по направлению C# и .NET: C# Starter (9 видео уроков ) C# Essential (18 видео уроков) C# Professional (17 видео уроков) SQL Essential (9 видео уроков) Алгоритмы и структуры данных (8 видео уроков) ADO.NET (8 видео уроков) Entity Framework 5.0 (4 видео урока) Шаблоны проектирования (29 видео уроков) WCF Essential (5 видео уроков) WPF Essential (10 видео уроков) WPF Advanced (10 видео уроков) Refactoring in .NET Apps (5 видео уроков) TDD (4 видео урока) SharePoint 2013 Администрирование (5 видео уроков) -по веб разработке (frontend и ASP.NET/backend): HTML, CSS ( 8 видео уроков) JavaScript Essential (5 видео уроков) JavaScript Advanced (10 видео уроков) HTML5, CSS3 (10 видео уроков) JQuery (9 видео уроков) Twitter Bootstrap  3 (4 урока) ASP.NET Базовый (10 видео уроков) ASP.NET Advanced (9 видео уроков) ASP.NET MVC Fundamentals ( 10 видео уроков) ASP.NET MVC 4 (5 видео уроков) Каждый видео курс включает в себя видео урок, презентацию, краткий конспект, практические примеры, расмотренные в уроке и задания для самостоятельной работы. Плюс тестирование и сертификация по выбранному видео курсу. Заявки принимаются до 25 декабря 2014 года. Заявку может составить любой сотрудник, но в целом в пакете для одной компании будет не более 10 сертификатов. Составитель заявки гарантированно получит свой именной подарочный сертификат. Коллектив ITVDN.com желает всем прекрасного Нового года!

С 21 по 28 января на ITVDN проходит акция — вы можете пройти обучение по курсу “TypeScript Fundamentals” бесплатно! Что такое TypeScript? TypeScript – это язык программирования для разработки веб-приложений, который является суперсетом JavaScript и отличается более строгими правилами и типизацией. Он обеспечивает простую навигацию по коду, очень удачно предотвращает возможные ошибки, а также делает код более структурированным и легко поддерживаемым. TypeScript активно применяется в современных фреймворках. К примеру, разработка эффективных и надежных веб-приложений на Angular невозможна без TypeScript.  О курсе “TypeScript Fundamentals” В ходе обучения вы освоите синтаксические конструкции, которые есть в TypeScript, а также научитесь пользоваться инструментами для разработки и компиляции кода. Вначале вас ожидает изучение переменных, функций, классов и интерфейсов. Следующий материал включает в себя такие темы, как “Generics” и “Модули, пространства имен”. По прохождению курса вы будете обладать фундаментальными знаниями языка программирования TypeScript. Чтобы приступить к обучению вам не нужны глубокие знания JavaScript - достаточно понимания базового синтаксиса. Программа курса: Введение. Переменные и функции Классы и интерфейсы Generics Модули и пространства имен Автор видео курса — Дмитрий Охрименко, CEO CyberBionic Systematics, более 10 лет в IT, Microsoft Certified Trainer and Developer и победитель Ukrainian IT Awards в номинации IT Education. Для кого этот курс Курс предназначен для начинающих FrontEnd разработчиков, которые уже знают HTML, CSS и JavaScript на базовом уровне. Курс входит в комплексные программы обучения по специальностям FrontEnd Developer, Angular Developer. Чему вы научитесь на этом курсе: Работать с переменными, функциями, классами и интерфейсами в TypeScript. Использовать Generics. Работать с модулями и пространствами имен. Создавать простые приложения при помощи TypeScript. Сроки акции Акция проходит с 21 по 28 января 2021 года. Доступ к курсу открывается на 10 дней.

Хочешь проверить и прокачать свои навыки программирования? С 23 по 31 июля на ITVDN все интерактивные тренажеры по самым популярным технологиям и языкам программирования  - в свободном доступе. Что такое интерактивный тренажер? Ты получаешь задание и выполняешь его прямо в браузере. Когда задание выполнено, нажимаешь кнопку “проверить” и получаешь оценку правильности выполненного задания. Если нужно, можешь воспользоваться подсказкой. Твоя цель - выполнить все задания и набрать максимальное количество баллов. За использование подсказок и за дополнительные попытки решения задачи баллы будут сниматься. Задания можно выполнять с перерывами. Результаты пройденных заданий сохраняются и ты  всегда сможешь продолжить с той задачи, на которой остановился ранее. Какие тренажеры есть на ITVDN C# Starter C# Essential Java Starter Python Starter Python Essential HTML & CSS HTML5 & CSS3 Starter HTML5 & CSS3 Essential JavaScript Essential SQL Essential C++ Starter C++ Essential Уровни сложности Наверное, ты уже обратил внимание, что по одной и той же технологии есть тренажеры разных уровней сложности (starter и essential). Выбирай тот, который соответствует твоим знаниям. Например, если ты знаешь Python на начальном уровне, пройди Python Starter, а если владеешь им достаточно уверенно, попробуй выполнить все задания на тренажере Python Essential. Чтобы стать программистом, нужно писать код. Не упусти хорошую возможность проверить и улучшить свои практические навыки. Если у тебя есть друзья, с которыми ты хочешь посоревноваться в прохождении тренажеров, расскажи им об этой акции. Желаем тебе успехов  в решении всех задач! Совершенствуйся на ITVDN!

YouTube канал ITVDN продолжает расти. Очень скоро мы перешагнем черту 140 тысяч подписчиков. Для нас это большая радость. Мы благодарим всех, кто смотрит наши видео уроки. В честь такого события мы проведем розыгрыш 5 подарочных сертификатов на 1 месяц подписки ITVDN. Условия акции просты: В период с 1 по 11 ноября поделитесь в социальных сетях любым видео с нашего канала. Заполните анкету участника акции (обязательно укажите ссылку на Ваш пост). Сохраните пост с видео на своей странице до момента объявления победителей. *Ваша страница должна быть открыта в настройках приватности для всех. Среди всех, кто выполнит условия акции, 12 ноября в 15:00 в прямом эфире на нашем канале будет проведен розыгрыш с помощью сервиса random.org и 5 счастливчиков получат в подарок подписку ITVDN сроком на 1 месяц. Почему выбирают ITVDN Ежедневно на YouTube канал ITVDN появляются новые видео уроки по программированию. Круг технологий, которым Вы можете обучаться, становится все шире. Но самой большой популярностью пользуются вебинары ITVDN. Вебинары – это возможность живого общения с нашими авторами, ответы на ваши вопросы. Сейчас на YouTube канале ITVDN более 1500 образовательных видео. Основные направления обучения: FrontEnd (HTML, CSS, Bootstrap, JavaScript, Angular, React, Vue.js и др.) Java, JDBC & Hibernate С#/.NET, .NET Core ASP.NET MVC, ASP.NET MVC Core Работа с базами данных (SQL, Transact SQL, MySQL, PostgreSQL) Шаблоны проектирования                                       PHP, Laravel, YII 2 Python, Django Unity/Game Dev. C++ Разработка под Android Paзработка под iOS Участвуйте в розыгрыше и пусть Вам повезет!

14 января ITVDN будет праздновать 4 года! Мы поздравляем с этой прекрасной датой всех, кто любит и знает ITVDN, а также тех, кто когда-либо принимал участие в его развитии – разработчиков, авторов курсов, статей и наших партнеров. За 4 года создан отличный ресурс, которым мы гордимся! Сейчас в  каталоге  ITVDN более 130 курсов, в Блоге ITVDN опубликовано несколько сотен статей, созданы онлайн тренажеры по HTML, CSS, JavaScript, Java, C#, SQL. Огромной популярностью пользуется YouTube канал ITVDN. Сейчас на нем в свободном доступе 1 364 видео по программированию и информационным технологиям, более 110 тысяч человек уже стали подписчиками этого канала. Мы продолжаем расти и развиваться. В 2018 году мы планируем записать не менее 50 новых курсов по самым актуальным и востребованным технологиям. Выиграй подписку на 3 месяца В честь Дня рождения мы проводим розыгрыш подарочных сертификатов на 3 месяца подписки, а также дарим всем, кто когда-либо приобретал подписку ITVDN 300 бонусов, которые можно обменять на подарки и скидки. Всего будет разыграно 5 подарочных сертификатов на 3 месяца. Чтобы принять участие в розыгрыше, нужно: Поделиться новостью о Дне рождения ITVDN на своей страничке в Facebook или VK. Заполнить регистрационную форму участника акции. Бонус для друзей: упомяните (тегните) в комментариях к нашему посту одного из Ваших друзей, интересующегося программированием и в случае Вашей победы друг получит в подарок подписку на 1 месяц. Определение победителей акции состоится 17 января 2018 года в прямом эфире на канале ITVDN в 16:00. Бонусы будут начислены 15 января 2018 года. Оставайтесь на ITVDN!

Подарок от ITVDN – видео курс AngularJS Essential с 16 по 23 февраля 2017 года доступен бесплатно для всех зарегистрированных пользователей ITVDN. AngularJS — JavaScript-фреймворк с открытым исходным кодом. Предназначен для разработки одностраничных приложений. Его цель — расширение браузерных приложений на основе MVC-шаблона, а также упрощение тестирования и разработки.(Определение из Википедии) Курс AngularJS Essential рассчитан на web-разработчиков, у которых есть базовые знания по HTML, CSS и JavaScript  на уровне курса JavaScript Advanced. Курс записан Дмитрием Охрименко - сертифицированным тренером и разработчиком Microsoft, лучшим профессионалом года в номинации IT Education ( Ukrainian IT Awards 2015 ). Курс состоит из 9 уроков. В феврале 2017 года Дмитрий также записал для ITVDN новый курс Angular2 Essential, который входит в пакет подписки. Темы, которые изучаются в курсе: Введение в AngularJS Использование привязок и стандартных директив Работа c DOM и валидация форм Контроллеры и Scope Фильтры Создание пользовательских директив Работа с модулями и сервисами AJAX Unit тестирование Для наилучшего результата используйте все возможности нашего ресурса: Смотрите видео уроки. Скачайте учебные материалы и работайте с практическими примерами урока. Выполняйте все задания к каждому уроку. Проверяйте, как усвоен материал, проходя тестирование после каждого урока. Для получения электронного сертификата, пройдите тестирование по всему курсу. Перейти к видео курсу AngularJS Essential. Для получения полного бесплатного доступа к курсу Вы должны быть зарегистрированным пользователем ITVDN.

Введение Много информации о Twitter Bootstrap в наши дни в мире веб-дизайна и программирования. Люди называют его благом для веб-разработчиков, это возможность проектировать с отсутствием знаний.  В большинстве сценариев веб-разработчиков имеется готовая идея, но невозможно приступить из-за отсутствия дизайн-проекта, над которым нужно работать. Они должны полагаться на дизайнеров, чтобы завершить клиентскую сторону своего проекта. Этот процесс является серьезной потерей времени для разработчика, для которого имеет значение, чтобы идея воплотилась в реальность как можно скорее. В таких сценариях Twitter Bootstrap приходит на помощь. Twitter Bootstrap – CSS фреймворк, он помогает в разработке веб-приложений. Он один из простых CSS фреймворков. Предполагается, что у Вас нет знаний в проектировании дизайна, все что Вам нужно - это написать немного HTML кода согласно спецификациям Bootstrap. В нем уже написаны для Вас CSS стили, также он имеет встроенную поддержку jQuery, и некоторые популярные инструменты JavaScript. Начинаем Чтобы приступить к использованию Twitter Bootstrap, Вам нужно скачать bootstrap.zip с официального сайта. Он содержит в себе набор файлов, а именно css, js и img, которые Вам понадобятся, чтобы начать создание веб-сайтов с Twitter Bootstrap. Папка “css” имеет таблицу стилей для адаптивного и неадаптивного дизайна. Она понадобиться для того, чтобы быстрее сделать сайт. Папка “js” имеет bootstrap.js. JavaScript файлы, которые содержат различные компоненты. В последней папке “img” содержится два набора одинаковых иконок, за исключением их фонового цвета. Изображения halflings были предоставлены glyphicons, и предоставляются бесплатно в проекте Twitter Bootstrap. До того, как приступить к работе, откройте Ваш текстовый редактор и создайте первый файл с именем “index.html”. Сохраните его в корневой папке Вашего проекта. Основной HTML шаблон для работы с Bootstrap Для активации Bootstrap фреймворк необходимо включить все нужные файлы и создать HTML-структуру. Сначала Вам необходимо построить структуру, а затем определить, какие файлы потребуются. Сперва, на что нужно обратить внимание, это то что HTML5 требует doctype: DOCTYPE html> Устанавливаем meta кодировку в utf-8, потому что в проекте потребуется использовать специальные символы, для того чтобы браузер правильно их отображал. Twitter Bootstrap также указывает на использование utf-8 в их документации для лучшей совместимости.  <meta charset="utf-8"> Когда Вы установите стандартные HTML-теги, такие как , и   Теперь Вам нужно перейти к подключению необходимых таблиц стилей bootstrap.css. <link rel="stylesheet" href="css/bootstrap.css" type="text/css"/> Теперь CSS готов, далее Вам необходимо включить все необходимые JavaScript файлы. Во-первых, необходимо включить файл jQuery, для этого подключим jQuery CDN.  <script src="http://code.jquery.com/jquery-1.10.1.min.js">script> Затем подключаем Bootstrap файл.   <script src="js/bootstrap.js">script> Все эти скрипты должны лежать чуть выше в конце тега . Наконец, закончили с процессом подключения всех необходимых файлов. Ваш index.html выглядит так.  Понимание того как это работает Во-первых, Вам нужно помнить, что Twitter Bootstrap во многом зависит от 12 сеток. Итак, о каких сетках идет речь? Предположим, Вы хотите две большие равные части внутри body в вашей странице index.html. Вы должны передать класс “span6” для каждого элемента div. Это говорит о том, что Bootstrap сделает две равные части, которые должны охватывать шесть сеток по бокам. Он имеет набор предопределенных классов для каждого элемента. Вы должны передавать соответствующие классы для каждого в случае необходимости. Работа с Bootstrap Разделим демо-страницу на пять основных частей: The header The marketing area The leftside bar The contents area The footer Чтобы обернуть все содержавшееся в наш веб-сайт, Вам нужно создать контейнерный класс, который должен быть с центра до середины экрана, а также имеет отступы со всех сторон. Для этого Bootstrap имеет класс “container”, который Вы будете использовать в качестве родительской оболочки. Итак, идем дальше и пишем следующий кусок кода: <div class="container"> Теперь поместим во внутрь контейнера div заголовок сайта. Для этого Вам нужно использовать тег h1. <h1><a href="#">Bootstrap Sitea>h1> Страница index.html будет размещена по центру. Время для панели навигации. Twitter Bootstrap предлагает следующую разметку для панели навигации:          <div class="navbar">               <div class="navbar-inner">                 <div class="container">                   <ul class="nav">                     <li class="active"><a href="#">Homea>li>                     <li><a href="#">Projectsa>li>                     <li><a href="#">Servicesa>li>                     <li><a href="#">Downloadsa>li>                     <li><a href="#">Abouta>li>                     <li><a href="#">Contacta>li>                   ul>                 div>               div>             div> “navbar” должен быть задан классом в основной панели навигации. Вам нужно следовать за вышеупомянутой разметкой, чтобы выглядело согласно стилю Twitter Bootstrap. Поместите код чуть ниже тега . Удостоверьтесь, что Вы помещаете все в родительском классе оболочки, т.е. “container”.  Перейдите к браузеру и проверьте страницу, увидите красивую панель навигации, чуть ниже заголовка сайта.   Конечно же, хочется, чтобы заголовок, выглядел немного иначе. В конце статьи будет рассмотрено, как Вы можете добавить свои стили, в существующие стили Bootstrap и добавить немного больше CSS для оформления заголовка. Давайте двигаться дальше, чтобы сделать вторую часть, которая называется “The marketing area”. Есть предопределенный класс, предоставленный Twitter Bootstrap для области “The marketing area”. Ему дали название класс “hero-unit”. Далее копируем приведенный ниже код и вставляем его ниже навигации div. <div class="hero-unit">     <h1>Marketing stuff!h1>     <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.p>     <a href="#" class="btn btn-large btn-success">Get Starteda>  div>   Не написав ни одной части CSS, у Вас есть такая красивая “The marketing area”. Приступим к самой интересной части - создание ссылок и кнопок. Вы можете создать любую ссылку, при этом она будет выглядеть так, как кнопка, добавив класс “btn”, и затем можно изменять ее размер, добавив несколько дополнительных классов, таких как btn-large/btn-small/btn-mini. Для изменения цвета кнопок добавим классы, такие как btn-success (зеленый), btn-info (светло-голубой), btn-warning (желтый) и btn-danger (красный). Подробнее о кнопках и украшениях ссылок можно найти в Twitter Bootstrap Base CSS section. Эти классы применяются к HTML элементу button. Теперь перейдем дальше, к панели левой стороны и содержанию. Как говорилось ранее, Twitter Bootstrap - это система из 12 сеток. Это означает, что Вы можете создать самое большое количество: это 12 сеток по вертикали, в любом родительском элементе. В настоящее время работаем в родительском классе “container”. Таким образом, разделим раздел на две неравные части, используя 12 сеток. Для левой стороны панели Вам нужно использовать класс “span4” и для правой стороны будем использовать “span8”. Имена классов показывают, что левая сторона должна охватить четыре сетки, а правая оставшиеся восемь. <div class="row">          <div class="span4">              <p>Dummy Textp>          div>          <div class="span8">              <p>Dummy Textp>          div>      div>   Вам нужно создать два отдельных столбца, стоящие рядом. По умолчанию классы span* выравниваются по левому краю. Чтобы разместить столбцы ниже всего содержимого, Вам нужно добавить “row”. Это действует, как традиционная строка таблиц. Теперь заполним левый столбец навигационным списком. Для создания навигационного списка следуйте следующей разметке. <ul class="nav nav-list">     <li class="nav-header">What we are?li>     <li class="active"><a href="#">Homea>li>     <li><a href="#">Our Clientsa>li>     <li><a href="#">Our Servicesa>li>     <li><a href="#">About Usa>li>     <li><a href="#">Contact Usa>li>     <li class="nav-header">Our Friendli>     <li><a href="#">Googlea>li>     <li><a href="#">Yahoo!a>li>     <li><a href="#">Binga>li>     <li><a href="#">Microsofta>li>     <li><a href="#">Gadgetic Worlda>li> ul> Вам нужно добавить класс “nav-list” в дополнение к классу “nav”, и это будет выглядеть как список. Добавляем класс “nav-header” к любому элементу “li”, “nav” класс будет выглядеть так, как заголовок в разделе ссылки.    Перемещаясь в “The contents area”, Вы будете просто заполнять его общими тегами и тегами . Никакие дополнительные классы не нужны, поскольку хотим, чтобы элементы выпадающего списка появлялись друг за другом, один ниже другого. Ниже приведен код, поместите его внутри “span8”. <h3>How we started?h3> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.p> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.p> <h3>How do we market?h3> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.p> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.p>   Как Вы можете видеть, почти закончили создание окончательного дизайна. Далее просто осталась часть “the footer portion”. Для “the footer portion”, будем снова делить “row” на три части. На этот раз раздел будет находиться в равных частях “span4”. Таким образом, Вы создадите еще одну строку div. Выполните приведенный ниже код: <div class="row"> <div class="span4">         <h4 class="muted text-center">Meet Our Clientsh4>         <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.p>         <a href="#" class="btn"><i class="icon-user">i> Our Clientsa>     div>     <div class="span4">         <h4 class="muted text-center">Know Our Employeesh4>         <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.p>         <a href="#" class="btn btn-success"><i class="icon-star icon-white">i> Our Employeesa>     div>     <div class="span4">         <h4 class="muted text-center">Reach Ush4>         <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.p>         <a href="#" class="btn btn-info">Contact Usa>     div> div> С помощью класса “span4” разделили строку на три равные части, а затем заполнили каждую из них с помощью тега , они выглядят как кнопки. Проверьте результат в браузере. Вы увидете маленькие изображения внутри кнопки, Our Clients и Our Employees. Вам нужно использовать тег и добавить соответствующие классы изображений, icon-user, icon-star, icon-glass и т.д. Чтобы изменить значок для белого, используйте icon-white вместе с icon-user и icon-star. Полный список значков классов можно найти в документации Bootstrap.  Чтобы добавить интервал между областью нижнего колонтитула и над содержанием, Вам нужно добавить тег между каждой “row”. Вставте тег и посмотрите на демо-страницу. Теперь для области авторского права, добавим следующий код:   <hr> <div class="footer"> <p>© 2013p> div>   Итак, наконец, создали простую, но достойную целевую страницу, используя чисто Twitter Bootstrap framework. Добавление пользовательских стилей к Twitter Bootstrap Если у Вас есть немного знаний в CSS, и Вы хотите настроить Bootstrap стили по умолчанию, то лучший способ — это создать собственную пользовательскую таблицу стилей, импортировать Bootstrap’s Style в верхней части, а затем переопределить стили в свой CSS-файл. Убедитесь, что ссылка именно на Вашу пользовательскую таблицу стилей, а не для Bootstrap CSS. Если для Вас достаточно таблиц стилей по умолчанию (Twitter Bootstrap), то Вам не нужно создавать пользовательскую таблицу стилей. Многие веб-сайты могут использовать эту структуру, и она станет общем стилем, который можно будет увидеть в каждом другом сайте, созданном с Bootstrap. Поэтому лучше добавить свою собственную таблицу CSS вверху Bootstrap CSS.   @import url("bootstrap.min.css");   Некоторые более важные компоненты из Twitter Bootstrap Выделенный параграф Чтобы выделить абзац посреди длинного документа, можете добавить класс “lead” к нему. Это сделает шрифты определенного абзаца немного больше, чем остальная часть документа. Теги акцентирования Вы можете также использовать стандартные теги  и внутри html-страницы. Теги  также будут работать. Выравнивание текста Внутри абзацев или div-тегов можно выравнивать текст с помощью классов: “text-left”, “text-center” и “text-right”. Цвет текста Можете установить цвет для текста абзаца по умолчанию, используя различные цвета текста как “muted” для серого, “text-warning” для красных, “text-error” для глубокого темно-бордового, “text-info” голубого и “text-success” для зеленого. Стиль таблицы Twitter Bootstrap имеет ту же самую конструкцию таблиц по умолчанию. Выполните следующую разметку:   <table class="table">     <tr>         <td>td>         <td>td>     tr>         ...     table>   Работа с изображениями Вы также можете добавлять изображения, используя обычный тег. Чтобы сделать Ваш дизайн более интересным, добавьте такие классы, как “img-rounded” для изображений с закругленными углами, “img-circle” для прокрутки изображений и “img-polaroid”, чтобы дать тень и радиус. Выпадающее меню Для создания выпадающего меню в уже существующую панель навигации, как показано в демо-странице, добавьте следующую разметку.   <li class="dropdown">     <a href="#" class="dropdown-toggle" data-toggle="dropdown">         <i class="icon-th-large">i> Drop Down         <b class="caret">b>     a>     <ul class="dropdown-menu">         <li><a href="#">Item1a>li>         <li><a href="#">Item2a>li>         <li><a href="#">Item3a>li>     ul> li>   Для выпадающего списка нужно обернуть родительский элемент с помощью класса “dropdown”, а затем использовать по умолчанию разметку “a”, и потом вложить еще один элемент со списком элементов. Источник: http://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/