Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы Bootstrap 3 » Создание дополнительных классов. Основы bootstrap 3 для начинающих. Урок №23

14.10.2016


00:30


2665


пока нет


Создание дополнительных классов. Основы bootstrap 3 для начинающих. Урок №23

Создание дополнительных классов. Основы 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».
Теперь у вас будет общая картина вот такая:

Создание дополнительных классов. Основы bootstrap 3 для начинающих. Урок №23

Дальше нужно  привязать новый 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 для начинающих. Урок №23

Это значит, что все прекрасно работает.

Теперь давайте посмотрим, как сделать так, чтобы можно было менять стили на сайте, но при этом не задевать стили 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». Попробуйте сами сделать  то, о чем я вам рассказыал с любым блоком.
Удачи!
Жду вас на следующих уроках.



Случайные записи:

  1. Слои в CSS. Основы CSS для начинающих. Урок №16
  2. Знакомство с CSS. Основы CSS для начинающих. Урок №1
  3. Шпаргалка по HTML на русском языке
  4. Бесплатный курс по основам HTML
  5. Сетка. Основы bootstrap 3 для начинающих. Урок №4

Последние записи рубрики:

  1. Бесплатный курс по основам Bootstrap3
  2. Создание простого сайта на Bootstrap 3. Практика по пройденному материалу
  3. Тесты Bootstrap 3 онлайн. Основы Bootstrap 3 для начинающих
  4. Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26
  5. Миниатюры. Основы bootstrap 3 для начинающих. Урок №25

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245