StepkinBlog.ru
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
14.10.2016
00:30
5047
пока нет
Создание дополнительных классов. Основы bootstrap 3 для начинающих. Урок №23
Всем привет!
Вот и пришло время рассказать вам, как добавить в Bootstrap 3 собственные стили и классы.
Я всегда использую дополнительные классы на своих заказах, это помогает выйти за рамки принятых стандартов Bootstrap 3.
Итак, в этой статье вы узнаете, как облегчить себе жизнь, используя дополнительные классы, не затрагивая классы Bootstrap 3. Да, именно не затрагивая классы Bootstrap 3, ведь может случится, что вам нужно будет их использовать.
Приступим. На данный момент у вас вот такая общая картина в папке «Полигон для bootstrap 3» (кто не понял о чем я, смотрите статью №2):
Код файла «index.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 на StepkinBLOG.RU</title> <!-- Bootstrap --> <link href="css/bootstrap.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.js"></script> </body> </html>
Что нам нужно сделать?
Создать свой файл для CSS стилей.
Для этого нужно создать файл расширения «css» с названием «style», то есть «style.css».
Теперь у вас будет общая картина вот такая:
Дальше нужно привязать новый css файл «style.css» к файлу «index.html».
Откройте «index.html» через блокнот для правки кода и между тегом <head></head> вставьте вот этот код:
<link rel="stylesheet" type="text/css" href="style.css">
Вот полный готовый код (строка №13):
<!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 на StepkinBLOG.RU</title> <!-- Bootstrap --> <link href="css/bootstrap.css" rel="stylesheet"> <!-- Мой CSS файл --> <link rel="stylesheet" type="text/css" href="style.css"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.js"></script> </body> </html>
Давайте проверим, работает ли наш файл «style.css». Сейчас я добавлю новый CSS стиль для h1. Откройте «style.css» для редактирования кода и пропишите для тега h1 размер и цвет:
h1 {
font-size: 90px;
color: #cc0;
}
В результате мы должны увидеть:
Было так:
А стало так:
Это значит, что все прекрасно работает.
Теперь давайте посмотрим, как сделать так, чтобы можно было менять стили на сайте, но при этом не задевать стили Bootstrap 3. Пример буду показывать на кнопках.
Вот такой стандартный код предоставляет Bootstrap 3 для вывода кнопок:
<button type="button" class="btn btn-primary">Primary</button>
результат:
Допишем наш класс через пробел «class="btn btn-primary myclass"»:
<button type="button" class="btn btn-primary myclass">Primary</button>
В CSS пропишите вот такой код:
.myclass
{
background-color: #000; // цвет кнопки
border-radius: 100px; // радиус закругления
border: 10px solid #ccc; // обводка
padding: 10px; // отступы внутри кнопки
font-size: 20px; // размер текста
}
Сохраняем и смотрим на результат.
результат:
Вот и все секреты! Добавляете дополнительный класс к любому элементу и задаете стили в файле «style.css». Попробуйте сами сделать то, о чем я вам рассказыал с любым блоком.
Удачи!
Жду вас на следующих уроках.