HTML редактор

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Подключение Bootstrap 3 к HTML странице</title>

<link href="/examples/vendors/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">

/* цвет текста, содержащий название сайта или бренда */
        .navbar-default .navbar-brand {
            color: #ecf0f1;
        }

/* цвет текста (название сайта или бренда), при поднесении к нему курсора мышки или при его нахождении в фокусе */
        .navbar-default .navbar-brand:hover,
        .navbar-default .navbar-brand:focus {
            color: #d1ffed;
        }

/* Цвет пунктов навигационного меню */
        .navbar-default .navbar-nav > li > a {
            color: #ecf0f1;
        }

/* Цвет пункта меню, при поднесении к нему курсора мышки или при его нахождении в фокусе */
        .navbar-default .navbar-nav > li > a:hover,
        .navbar-default .navbar-nav > li > a:focus {
            color: #d1ffed;
        }

/* Цвет и фон активного пункта меню, а также поднесении к нему курсора мышки или при его нахождении в фокусе */
        .navbar-default .navbar-nav > .active > a,
        .navbar-default .navbar-nav > .active > a:hover,
        .navbar-default .navbar-nav > .active > a:focus {
            color: #d1ffed;
            background-color: #27ae60;
        }

/* Цвет и фон открытого пункта меню, а также поднесении к нему курсора мышки или при его нахождении в фокусе */
        .navbar-default .navbar-nav > .open > a,
        .navbar-default .navbar-nav > .open > a:hover,
        .navbar-default .navbar-nav > .open > a:focus {
            color: #d1ffed;
            background-color: #27ae60;
        }

/* Цвет стрелочки (треугольничка) у раскрывающихся пунктов меню */
        .navbar-default .navbar-nav > .dropdown > a .caret {
            border-top-color: #ecf0f1;
            border-bottom-color: #ecf0f1;
        }

/* Цвет стрелочки (треугольничка) при поднесении к нему курсора мышки или при его нахождении в фокусе */
        .navbar-default .navbar-nav > .dropdown > a:hover .caret,
        .navbar-default .navbar-nav > .dropdown > a:focus .caret {
            border-top-color: #d1ffed;
            border-bottom-color: #d1ffed;
        }

/* Цвет стрелочки (треугольничка), открывшегося пункта меню */
        .navbar-default .navbar-nav > .open > a .caret,
        .navbar-default .navbar-nav > .open > a:hover .caret,
        .navbar-default .navbar-nav > .open > a:focus .caret {
            border-top-color: #d1ffed;
            border-bottom-color: #d1ffed;
        }

/* CSS стили для мобильных устройств */
        /* Цвет рамки у кнопки, которая открывает меню */
        .navbar-default .navbar-toggle {
            border-color: #27ae60;
        }

/* Цвет фона кнопки (которая открывает меню) при поднесении к ней курсора мышки или при нахождении её в фокусе */
        .navbar-default .navbar-toggle:hover,
        .navbar-default .navbar-toggle:focus {
            background-color: #27ae60;
        }

/* Цвет полосочек в кнопочке, которая открывает меню */
        .navbar-default .navbar-toggle .icon-bar {
            background-color: #ecf0f1;
        }

/* Цвет пунктов меню в раскрывающихся списках */
        @media (max-width: 767px) {
            .navbar-default .navbar-nav .open .dropdown-menu > li > a {
                color: #ecf0f1;
            }

/* Цвет и фон пункта меню в раскрывающихся списках, при поднесении к нему курсора мышки или при нахождении его в фокусе */
            .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
            .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
                color: #d1ffed;
                background-color: #27ae60;
            }
        }

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
            border-color: #27ae60;
        }

body {
            padding-top: 250px;
        }

.article {
            background: rgba(255, 255, 255, 0.88);
            padding-top: 20px;
            margin-bottom: 10px;
        }

footer {
            background: rgba(255, 255, 255, 0.7);
            line-height: 30px;
            padding: 0 15px 0 15px;
        }
    </style>

</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"

data-target="#navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Название сайта</a>
        </div>

<div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="#">Пункт 1 <span class="sr-only">(current)</span></a>
                </li>
                <li>
                    <a href="#">Пункт 2</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"

aria-expanded="false">Пункт с подпунктами 1<span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Подпункт 1.1</a></li>
                        <li><a href="#">Подпункт 1.2</a></li>
                        <li><a href="#">Подпункт 1.3</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Подпункт 1.4</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Подпункт 1.5</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Найти">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Пункт 3</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="article container">
    <div class="row">
        <div class="col-md-8">
            <h1 class="h2 page-header">Lorem ipsum dolor sit amet.</h1>
            <p>Lorem ipsum dolor sit amet. Consequuntur magni dolores et molestiae non

recusandae. Debitis aut odit aut officiis debitis aut rerum hic tenetur. Eveniet, ut

aut rerum facilis est eligendi optio, cumque nihil molestiae consequatur. Tempore, cum

soluta nobis est eligendi optio cumque. Incidunt, ut aut reiciendis voluptatibus

maiores alias consequatur aut reiciendis. Aspernatur aut reiciendis voluptatibus

maiores. Adipisci velit, sed ut labore. Ab illo inventore veritatis et dolorum fuga

voluptas sit, aspernatur. Nesciunt, neque porro quisquam est. Quis nostrum

exercitationem ullam corporis. Est, qui ratione voluptatem sequi nesciunt. Accusamus

et quas molestias excepturi sint, obcaecati cupiditate non numquam eius modi.

Asperiores repellat. eum fugiat, quo minus id, quod maxime placeat, facere

possimus.</p>
            <p>Obcaecati cupiditate non recusandae consequatur, vel. Delectus, ut aliquid

ex ea voluptate velit esse, quam nihil impedit. Quam nihil molestiae consequatur, vel

illum. Earum rerum hic tenetur a sapiente delectus. Blanditiis praesentium voluptatum

deleniti atque corrupti, quos dolores eos, qui blanditiis. Ut aut odit aut rerum. Iste

natus error sit voluptatem sequi. Delectus, ut aut odit aut reiciendis. In ea

voluptate velit esse, quam nihil. Eius modi tempora incidunt, ut aliquid. Asperiores

repellat. blanditiis praesentium voluptatum deleniti atque. Ullam corporis suscipit

laboriosam nisi. Inventore veritatis et dolorum fuga nesciunt. Quasi architecto beatae

vitae dicta sunt, explicabo nulla vero eos et quas.</p>
            <h2 class="h3 page-header">Quae ab illo inventore</h2>
            <p>Quae ab illo inventore veritatis et quasi architecto beatae vitae dicta

sunt. Molestiae consequatur, vel eum fugiat. Consectetur, adipisci velit, sed quia

dolor sit aspernatur. Voluptates repudiandae sint et dolorum fuga aut odit aut rerum

facilis. Ex ea commodi autem vel. Dolor sit, aspernatur aut rerum facilis est

eligendi. Deleniti atque corrupti, quos dolores eos. Quae ab illo inventore veritatis

et voluptates repudiandae sint et accusamus. Mollitia animi, id est eligendi optio,

cumque nihil. Consectetur, adipisci velit, sed ut labore et quas. Expedita distinctio

harum quidem rerum facilis est laborum. Sint, obcaecati cupiditate non numquam eius.

Eius modi tempora incidunt, ut enim.</p>
            <p>Harum quidem rerum necessitatibus saepe eveniet, ut labore. Iste natus

error sit voluptatem accusantium doloremque laudantium. Blanditiis praesentium

voluptatum deleniti atque corrupti. Eos et iusto odio dignissimos. Perspiciatis, unde

omnis voluptas sit, aspernatur. Quod maxime placeat, facere possimus, omnis dolor

repellendus. Et iusto odio dignissimos ducimus, qui dolorem ipsum, quia consequuntur.

Sequi nesciunt, neque porro quisquam est, omnis iste natus error sit voluptatem. Saepe

eveniet, ut perspiciatis, unde omnis iste natus error. Accusamus et quas molestias

excepturi sint, obcaecati cupiditate. Laboriosam, nisi ut perspiciatis, unde omnis.

Vel illum, qui in culpa, qui blanditiis praesentium. Eum fugiat, quo voluptas nulla

vero.</p>
            <p>Cupiditate non provident, similique sunt in culpa, qui blanditiis praesentium.

Obcaecati cupiditate non numquam eius modi tempora incidunt, ut et dolorum fuga. Atque

corrupti, quos dolores et accusamus. Nostrum exercitationem ullam corporis suscipit

laboriosam, nisi ut labore. Itaque earum rerum facilis est et quas. Aliquam quaerat

voluptatem sequi nesciunt, neque porro quisquam est, qui quaerat. Minus id, quod

maxime placeat, facere possimus omnis. Sint, obcaecati cupiditate non numquam eius

modi tempora incidunt. Totam rem aperiam eaque ipsa, quae. Dolore magnam aliquam

quaerat voluptatem accusantium doloremque. Quo voluptas sit, aspernatur aut

perferendis. Suscipit laboriosam, nisi ut et quasi architecto beatae vitae.</p>
        </div>
        <div class="col-md-4">
            <h4 class="page-header">Cupiditate non</h4>
            <ul class="list-group">
                <a href="#" class="list-group-item list-group-item-success">Ut labore et