Простые советы.: HTML и CSS

Показаны сообщения с ярлыком HTML и CSS. Показать все сообщения

пятница, 1 июня 2018 г.

Скрыть / Показать содержимое поля ввода.

Довольно часто бывает необходимость добавить некий функционал полю ввода. Например - срыть / показать пароль пользователю, при вводе данных. Это значительно облегчает введение данных, особенно в случаях неисправности клавиатуры пользователя (западают кнопки, не пропечатываются, или не работает Caps или Shift.В общем, вещь не только привлекательная, но и порой, даже нужная!

В интернете вы найдете массу различных способов, как это сделать, но они, как правило, все написаны с библиотекой jQuery. Подключать библиотеку только для этого, бывает излишним, а переписывать нужные функции отдельно - трудозатратно, поэтому я решил написать код на чистом JavaScript.

Без долгих предисловий.

Рассмотрим вариант самого простого функционала - просто показать / скрыть пароль кликом на кнопку:

Вариант 1:самый простой.

Меняется только надпись на кнопке.
В файле HTML ничего особенного. Просто поле ввода пароля и кнопка. Им добавлены идентификаторы - id, для того, чтобы можно было с ними работать при помощи JavaScript.

JavaScript код я не стал выносить в отдельный файл и записал его здесь же.

Здесь мы получаем доступ к полю ввода и кнопке. Сохраняем их в глобальные переменные для того, чтобы каждый раз по клику не получать доступ - что является ресурсно затратной операцией.

На кнопку вешаем событие - click и запускаем функцию.

Внутри функции мы проверяем значение атрибута type у элемента input. Если это password, то мы меняем его на атрибут text, и наоборот.

Заодно и поменяли одержимое (название) кнопки button.

Можно это не делать, если не хотите добавлять достаточно затратную операцию .innerHTML. Для этого достаточно удалить код отмеченный красным.

Ниже полностью код файла index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>

</head>
<body>
 <p>Enter the Password: <input type="password" id="show1"></p>
 <button id="show">Show password</button>

 <script>
  var input = document.getElementById("show1");
  var button = document.getElementById("show");
  button.onclick = show;

  function show () {
   if(input.getAttribute('type') == 'password') {
    input.removeAttribute('type');
    input.setAttribute('type', 'text');
    button.innerHTML='Hide password';

   } else {
    input.removeAttribute('type');
    input.setAttribute('type', 'password');
    button.innerHTML='Show password';

   }
  }
 </script> 
</body>
</html>

Вариант с иконкой.

Смена надписи на кнопке и иконки в любой части кода

Идем на сайт Font Awesome и выбираем понравившиеся иконки.

Подключаем Font Awesome через CDN в нашем хедере.

Добавляем одну иконку на страницу.

Например: <i id="i" class="far fa-eye"></i>

Теперь мы будем менять не только атрибут, но и класс элемента i, поэтому нам нужно добавить элементу идентификатор id

Остальное здесь все почти точно так же.

Ниже полностью код файла index.html


        <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <!-- Font - Awesome -->
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
 </head>
 <body>
  <!-- <i class="far fa-eye-slash"></i> вторая иконка закомментированна-->
  <p>Enter the Password: <input type="password" id="show1"></p>
  <button id="show">Show password</button><i id="i" class="far fa-eye"></i>
  
  <script>
   var button = document.getElementById("show");
   button.onclick = show;
   var input = document.getElementById("show1");
   var icon = document.getElementById("i");
   function show () {
    if(input.getAttribute('type') == 'password') {
     input.removeAttribute('type');
     input.setAttribute('type', 'text');
     button.innerHTML='Hide password';
     icon.className = 'far fa-eye-slash';
    } else {
     input.removeAttribute('type');
     input.setAttribute('type', 'password');
     button.innerHTML='Show password';
     icon.className = 'far fa-eye';
    }
  }
 </script>
 </body>
 </html>

Несомненный плюс этого метода, это то, что иконку можно разместить в любой части сайта. Все примеры, я намеренно привожу без CSS, потому как это добавит вам простор для различных способов стилизации и оформления документа.

В этом коде все будет работать так как показано на картинке, но стоит помнить, что класс мы меняем новым свойством браузера, которое не поддерживается браузером IE < 10 версии.

В таких случаях можно использовать jquery или вариант ниже.

Третий вариант

Смена надписи и иконки внутри кнопки

Этот вариант вообще простой и очень похож на первый, потому что мы здесь меняем только содержимое кнопки кодом .innerHTML, куда мы положили и наши иконки.

Ниже полностью код файла index.html


 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <!-- Font - Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
  <!-- your file js -->
  <script src="main.js" defer></script>
 </head>
 <body>

  <p>Enter the Password: <input type="password" id="show1"></p>
  <button id="show">Show password  <i id="i" class="far fa-eye"></i></button>
  
  <script>
   var button = document.getElementById("show");
   button.onclick = show;
   var input = document.getElementById("show1");
   var icon = document.getElementById("i");
   function show () {
    if(input.getAttribute('type') == 'password') {
     input.removeAttribute('type');
     input.setAttribute('type', 'text');
     button.innerHTML='Hide password  <i id="i" class="far fa-eye-slash">';
    } else {
     input.removeAttribute('type');
     input.setAttribute('type', 'password');
     button.innerHTML='Show password  <i id="i" class="far fa-eye">';
    }
   }
  </script>
 </body>
 </html>

Вариант с подменой вводимых символов.

Приведу такой вариант просто для информации. Если честно, то совершенно не могу представить, где он может пригодиться.

Суть в том, что мы можем сохранить то что вводит пользователь так как ест, а вместо этого подставить в поле ввода случайные символы.

То есть. Пользователь вводит, например - vvvvvvvvv, а в поле ввода видит - ZfhEysUFKk.
Точно. как на картинке ниже.

Для этого мы сохраняем то что ввел пользователь в переменную str, а вместо этого в this.value выводим случайный символ, полученный путем генерации случайного числа (от 65 до 122 - потому как это цифровое значение символов в разных регистрах разрешенных для паролей).

Затем, мы из случайного числа генерируем символ - String.fromCharCode(); И уже этот символ выводим в поле ввода присвоив его переменной this.value Здесь приведу сам js скрипт


        var str =  "";  // то что ввел юзер
 document.getElementById("test").onkeypress = function (event) {
  // то что ввел юзер
  // var str = this.value;
  str = str + event.key;
  console.log(str);

  // вывод в инпут случайных символов
  this.value += String.fromCharCode(getRandomInt(65, 122));
  // запрет вывода в инпут того что вводит пользователь 
  return false;
 }
 // функция генерации случайного числа от - до
 function getRandomInt(min, max) {
   return Math.floor(Math.random() * (max - min)) + min;
 }

воскресенье, 8 апреля 2018 г.

Bootstrap 4 SASS .Руководство.

Выход новой версии Bootstrap4 подтолкнул меня к написанию этого руководства, потому что новая версия значительно отличается. На изучение её придется потратить некоторое количество времени, но оно того стоит. Данное руководство не является полным путеводителем по Bootstrap4, и несомненно, вам придется еще не раз заглянуть в документацию, но здесь мы рассмотрим базовые вещи по созданию макета сайта на bootstrap4 двумя различными способами

Установка

В нашем случае мы будем использовать SASS и поэтому воспользуемся полной установкой.

Если вам просто нужен Bootstrap для быстрого прототипирования, имеет смысл использовать метод CDN. Вы просто подключаете файлы, которые находятся на других ресурсах в интернете, без установки (скачивания). Таким образом вы добавляете их в ваш проект в виде ссылок.

Вы можете просто добавить код из примера ниже, в ваш файл проекта - index.html

<!doctype html> 
<html lang="en"> 
  <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 

    <!-- Bootstrap CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 

    <title> Bootstrap 4 Starter Template</title> 
  </head> 
  <body> 
    <h1> Hello< /h1> 

    <!-- Optional JavaScript --> 
    <!-- jQuery first, then Popper.js, then Bootstrap JS --> 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"> </script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"> </script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"> </script> 
  </body> 
</html>

Этот код прямо из страницы начальной загрузки Bootstrap 4.

С помощью этого шаблона вы можете сразу начать использовать Bootstrap. Преимущество в том, что это легко начать, но недостатком является то, что вам не хватает настройки, которую предлагает Sass.

Установка Bootstrap 4 через NPM

Мы собираемся начать наш проект прямо здесь, на этом этапе. Это потребует использования Node.js и его менеджера пакетов для установки самого загрузочного устройства вместе с несколькими другими пакетами. Это даст нам доступ к Sass, перезагрузке в реальном времени и т.д.

Во-первых, убедитесь, что вы установили Nodejs, открыв консоль или командную строку:

node -v

Если вы получите значение текущей версии, то все в порядке и можно продолжать, а если нет, то загрузите соответствующий установщик на основе вашей ОС и выполните процедуру установки с настройками по умолчанию.

Некоторые полезные сведения по настройке вы можете прочитать в моем посте - NPM Настройка Gulp и компиляции SASS

После завершения установки, перезагрузите консоль или командную строку, и у вас будет доступ к командам Node.js.

Давайте создадим папку для нашего проекта и перейдем в нее:

mkdir bs4 && cd bs4

Затем мы запустим npm init, чтобы создать файл package.json, который просто хранит наши зависимости.

npm init -y

(Примечание. Флаг -y просто позволяет нам пропускать ответы на различные запросы и вместо этого предоставляет им значения по умолчанию)

Затем мы снова будем использовать npm для установки нескольких разных пакетов в зависимости от зависимостей разработки:

npm install gulp browser-sync gulp-sass --save-dev

Здесь:

Gulp— это таск-менеджер для автоматического выполнения часто используемых задач.Вы увидите, как это работает, если вы новичок.
Brows-sync автоматически обновляет ваш браузер для нас при изменении файла.
gulp-sass позволяет собирать наш проект, интегрируя его с sass.
--save-dev - установить в отдельную папку. В нашем случае в папку проекта т.е - локально.

Затем мы будем использовать npm в последний раз, чтобы установить несколько пакетов в качестве регулярных зависимостей проекта:

npm install bootstrap jquery popper.js --save

bootstrap - конечно же, это пакет начальной загрузки.
jquery - java script библиотека, используемая непосредственно самим bootstrap шаблоном
popper.js также используется бутстрапом. Он позволяет размещать всплывающие окна, всплывающие подсказки и т.д.

Теперь, настало время открыть наш проект в редакторе кода. Я буду использовать Sublime 3.

Мы должны создать папку src для нашего проекта и несколько вложенных в нее папок. Дерево выглядит так:

/src
    /assets
    /css
    /js
    /scss

Внутри / src также создайте 4 папки, как показано выше.

Затем создайте файл index.html внутри / src / со следующим содержимым:

<!DOCTYPE html> 
<html class="no-js" lang="en"> 
    <head> 
        <title> Bootstrap 4 Layout< /title> 
        <meta http-equiv="x-ua-compatible" content="ie=edge"> 
      < meta name="viewport" content="width=device-width, initial-scale=1.0" /> 

        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800"> 
        <link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
        <link rel="stylesheet" href="/css/bootstrap.css"> 
        <link rel="stylesheet" href="/css/styles.css"> 
    < /head> 

    < body> 
        <script src="/js/jquery.min.js"> </script> 
        <script src="/js/popper.min.js"> </script> 
        <script src="/js/bootstrap.min.js"> </script> 
    < /body> 
< /html>

Я импортирую шрифт Raleway вместе с FontAwesome для иконок. Затем я ссылаюсь на bootstrap.css и файл styles.css. Они еще не существуют, но мы скоро их создадим.

Давайте также создадим файл styles.scss внутри папки / src / scss /. Мы собираемся ввести быструю переменную и набор правил для того, чтобы убедиться, что компиляция Sass работает:

$bg-color: red; 

body {
    background: $bg-color;
}

В корневой папке (папке проекта) создайте файл gulpfile.js и вставьте следующее содержимое:

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])
        .pipe(sass())
        .pipe(gulp.dest("src/css"))
        .pipe(browserSync.stream());
});

// Move the javascript files into our /src/js folder
gulp.task('js', function() {
    return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/popper.js/dist/umd/popper.min.js'])
        .pipe(gulp.dest("src/js"))
        .pipe(browserSync.stream());
});

// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {

    browserSync.init({
        server: "./src"  
    });

    gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], ['sass']);
    gulp.watch("src/*.html").on('change', browserSync.reload);
});

gulp.task('default', ['js','serve']);

Я опишу, что здесь происходит, исходя из задач, определенных выше:

default task - задача по умолчанию. Когда мы вводим gulp в командной строке, это говорит ему запускать как js, так и обслуживать задачи - task.
js task Это просто указание трех разных файлов javascript, которые хранятся в папке node_modules, которая создается при запуске npm install ... и перемещении их в нашу папку / src / js. Таким образом, мы можем включить их в наш HTML-файл выше, указав / src / js вместо папки node_modules.
serve task запускает простой сервер и наблюдает за нашими sass-файлами, и если они меняются, он вызывает задачу sass. Он также вызывает синхронизацию браузера при сохранении любого * .html-файла.
sass task Эта задача берет файлы bootstrap sass, так и наши пользовательские sass-файлы и компилирует их в обычный CSS, и сохраняет эти файлы CSS в нашей папке / src / css

Теперь настройку можно считать законченной.

Давайте запустим gulp в командной строке:

gulp

В любом случае, http: // localhost: 3000 загрузится в браузере, и ваш фон будет ярко красным! Это означает, что все прошло хорошо.

Контейнер для гридов

Начальная точка вашего проекта Bootstrap 4 почти всегда будет вращаться вокруг контейнера сетки. Класс .container позволяет горизонтально центрировать ваш макет. В качестве альтернативы, для макета .container-fluid. (100% -ная ширина), вы можете использовать .container-fluid.

Итак, давайте определим контейнер сетки как самый первый элемент в нашем макете:

    <body> 
        <div class="container"> 
            test
        </div> 

        ...3 тега сценария опущены
    </body>

Кроме того, удалите все из ваших styles.scss, поскольку нам не нужен красный фон.

Если вы посмотрите на своем браузере в инспекторе (CTRL+SHIFT+i в Chrome) на этот макет, то нажмите на значок селектора элементов и наведите указатель мыши над текстом «test», вы увидите контур контейнера. Это гибкий контейнер, поэтому вы можете уменьшить ширину вашего браузера и наблюдать, как он реагирует.

Определение Bootstrap 4 Navbar

После определения контейнера следующая наиболее вероятная секция раздела вашего макета, вероятно, будет какой-то навигацией. В Bootstrap это называется navbar.

Примечание. Ознакомьтесь с документацией Navbar. Документация для каждого элемента Bootstrap 4 довольно полная. Он предоставляет вам примеры вместе с соответствующим кодом.

Большинство навигационных панелей включают логотип компании, обычно выравниваемый по левому краю. Мы также будем включать навигацию, которая выровнена по правому краю.

Внутри нашего элемента .container добавим следующее:

<div class="container"> 
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> 
        <a class="navbar-brand" href="#"> CompanyName< /a> 
        
        <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
            <ul class="navbar-nav ml-auto"> 
                <li class="nav-item"> 
                    <a class="nav-link" href="#"> Home</a> 
                </li> 
                <li class="nav-item"> 
                    <a class="nav-link" href="#"> About</a> 
                </li> 
                <li class="nav-item"> 
                    <a class="nav-link" href="#"> Products</a> 
                </li> 
                <li class="nav-item"> 
                    <a class="nav-link" href="#"> Contact</a> 
                </li> 
            </ul> 
        </div> 
    </nav> 
</div>

Результат в браузере на этом этапе должен соответствовать следующему:

Как вы можете видеть, простой заголовок с навигацией. Для элемента списка продуктов, давайте изменим его так, чтобы он стал выпадающим меню:

<li class="nav-item dropdown"> 
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown"> 
        Products
    </a> 
    <div class="dropdown-menu"> 
        <a class="dropdown-item" href="#"> Product 1</a> 
        <a class="dropdown-item" href="#"> Product 2</a> 
        <div class="dropdown-divider"> </div> 
        <a class="dropdown-item" href="#"> Another Product</a> 
    </div> 
</li>

Результат должен выглядеть следующим образом:

В настоящее время наша навигационная система не имеет кнопки на мобильных устройствах. Итак, мы должны добавить HTML-код, необходимый для работы.

Добавьте следующую разметку между брендом и навигационным содержимым div:

<a class="navbar-brand" href="#"> CompanyName</a> 

<!--Add here --> 
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"> 
    <span class="navbar-toggler-icon"> </span> 
</button> 
<!--Add here --> 

<div class="collapse navbar-collapse" id="navbarSupportedContent">

После сохранения перетащите свой браузер в мобильное окно просмотра и нажмите кнопку переключения. Результат должен быть похож на следующий:

Как вы можете видеть, невероятно просто построить надежную, отзывчивую навигацию с помощью Bootstrap 4.

Интеграция раздела Bootstrap 4 (Секция Jumbotron)

Следующий общий элемент для многих макетов и целевых страниц - это раздел Jumbotron.

Под контейнером <nav> .. </ nav> добавьте следующий HTML:

...
</nav> 

<!-- Add here --> 

<div class="jumbotron"> 
    <h1 class="display-4"> Simple. Elegant. Awesome.</h1> 
    <p class="lead"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> 

    <p class="lead"> 
        <a class="btn btn-primary btn-lg" href="#" role="button"> Learn more</a> 
    </p> 
</div>

Большая часть этого HTML была взята из документации Jumbotron, но я просто модифицировал и удалял некоторые элементы, соответствующие моим потребностям. По большей части вы можете сделать это для любого другого необходимого элемента Bootstrap 4, так как их документация предоставляет вам множество примеров.

Результат в браузере теперь должен выглядеть так:

Пока что это все выглядит неубедительно, но мы некоторые настройки мы сделаем позже.

Система сеток Bootstrap 4

Возможно, самым важным аспектом, который следует понимать, когда речь идет о BS 4, является система сетки. Это основано на Flexbox, и если вам интересно, нет - сетка в BS 4 не основана на новой сетке CSS, к сожалению.

Bootstrap 4 был разработан уже много лет, и они уже были посвящены Flexbox. На данный момент Flexbox является более безопасной ставкой, поскольку сетка CSS поддерживается 76% браузеров, а Flexbox - почти на 100%.

Сетка Grid Documentation очень детализирована с множеством опций и примеров. Обязательно обратитесь к этой странице, когда у вас есть определенные потребности.

Для наших целей изначально мы собираемся определить раздел в нашем макете, который будет иметь 3 столбца равной ширины. Внутри этих столбцов у нас будут только некоторые функции, связанные с нашей компании. Мы собираемся использовать карты Bootstrap 4 для внутреннего содержимого внутри каждого из этих столбцов:

<div class="row"> 
    <div class="col"> 
        <div class="card"> 
            <div class="card-body text-center"> 
                <h5 class="card-title"> Card title</h5> 
                <p class="card-text"> Some quick example text to build on the card title</p> 
                <a href="#" class="card-link"> Another link</a> 
            </div> 
        </div> 
    </div> 
    <div class="col"> 
        <div class="card"> 
            <div class="card-body text-center"> 
                <h5 class="card-title"> Card title</h5> 
                <p class="card-text"> Some quick example text to build on the card title</p> 
                <a href="#" class="card-link"> Another link</a> 
            </div> 
        </div> 
    </div> 
    <div class="col"> 
        <div class="card"> 
            <div class="card-body text-center"> 
                <h5 class="card-title"> Card title</h5> 
                <p class="card-text"> Some quick example text to build on the card title</p> 
                <a href="#" class="card-link"> Another link</a> 
            </div> 
        </div> 
    </div> 
</div>

Это результат в браузере:

Это все столбцы с одинаковой шириной, которые достигаются путем простого указания класса .col на каждый столбец.

Если вы хотите, чтобы один из этих трех столбцов имел большую ширину, вы можете указать .col- # (# от одного до 12):

<div class="row"> 
    <div class="col"> 
        ...
    </div> 
    <div class="col-6"> 
        ...
    </div> 
    <div class="col"> 
        ...
</div>

И сетка автоматически отрегулирует ширину остальных столбцов так:

Мы не хотим этого. Таким образом, вы можете удалить -6 из среднего столбца.

Прямо сейчас, если вы настроите браузер на мобильный вид, вы увидите, что наша сетка не реагирует; они остаются в 3 колонках.

Скажем, например, что мы хотим, чтобы наша первая карта в первом столбце охватывала 100% ширину окна просмотра (предположим все 12 столбцов) только в небольших видовых экранах:

<div class="row"> 
    <div class="col-sm-12 col-md-4"> 
        <div class="card">

Сначала мы указываем .col-sm-12, что означает, что в небольших видовых экранах этот столбец займет все 12 столбцов.

Затем мы указываем .col-md-4, что означает, что на средних видовых экранах и больше он будет принимать 4 столбца:

Существует, конечно, гораздо больше вариантов и со временем вы сможете узнать о сетке Bootstrap 4 намного больше, но это общий смысл.

Вы можете использовать множество классов сетки для определения количества строк, которые должен принимать столбец в данном окне просмотра.

Отступы - Margins и Padding в Bootstrap 4

Обратите внимание, что в нашем примере изображение выше, между нашими элементами карты нет разницы? Если вам когда-либо понадобится добавить маркер (пространство вне элемента) или дополнение (пространство внутри элемента), вы можете использовать вспомогательные классы полей и дополнений.

Это работает следующим образом:

Вы используете m для margin или p для padding
После m или p вы добавляете либо: t (top - ), b (bottom -снизу), l (left -слева), r (right-cправa), x (левый и правый), y (верхний и нижний) или ничего для всех 4 сторон.
После дефиса вы указываете размеры от 0 до 5 (5 - наибольшее количество интервалов).

Итак, в нашем примере, похоже, нам нужно использовать margin и bottom , чтобы оттолкнуть карты под ним.

На первом карточном контейнере добавьте mb-4:

<div class="card mb-4">

Теперь исправлено:

Вот как вы можете легко обрабатывать оба поля и отступы в Bootstrap 4.

Давайте немного поработаем с использованием различных компонентов Bootstrap 4.

Работа с «Типографией» в Bootstrap 4

Давайте добавим раздел под нашими 3 столбцами в конце закрывающего </ div> для класса строк, который будет иметь 2 столбца.

Первый столбец будет использовать большинство столбцов (8), а правый столбец будет для вертикальной навигации в секции после этого.

<div class="row mt-sm-4 mt-md-0"> 
    <div class="col-sm-12 col-md-8"> 
        <h3> An important heading</h3> 
        <p class="lead"> A sort of important subheading can go here, which is larger and gray.</p> 

        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
        <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
    </div> 

    <div class="col-sm-12 col-md-4"> 
        ..vertical navigation shortly..
    </div> 
</div>

Bootstrap 4 имеет раздел «Типография» в своей Документации, который предоставит вам все вспомогательные классы на основе типа. Это довольно просто. Мы используем .lead, чтобы сделать акцент на подзаголовке под нашим элементом h3.

В своей Документации также есть раздел «Утилиты текста», который предоставляет вам параметры выравнивания текста, преобразования, курсив и веса шрифтов.

В небольших видовых экранах предположим, что мы хотим, чтобы наш тип был центрирован, а не по умолчанию, который выравнивается по левому краю.

Мы добавили бы следующий класс:

<div class="col-sm-12 col-md-8 text-sm-center text-md-left">

Это приведет к тому, что текст, содержащийся в div, будет сосредоточен в центре на небольших видовых экранах и выровнен по левому краю на среднем и большем.

Bootstrap 4 Вертикальная навигация

Мы добавим еще один элемент, прежде чем мы займемся настройкой. В нашей правой колонке, которую мы только что добавили, добавим вертикальную навигацию:

    <div class="col-sm-12 col-md-4"> 
        <h3 class="mb-4"> Secondary Menu</h3> 

        <ul class="nav flex-column nav-pills"> 
            <li class="nav-item"> 
                <a class="nav-link active" href="#"> Active</a> 
            < /li> 
            <li class="nav-item"> 
                <a class="nav-link" href="#"> Link</a> 
            </li> 
            < li class="nav-item"> 
                <a class="nav-link" href="#"> Link</a> 
            </li> 
            < li class="nav-item"> 
                <a class="nav-link disabled" href="#"> Disabled</a> 
            </li> 
        </ul> 
    </div>

Результат в браузере должен выглядеть так:

Вы также можете проверить его на небольших видовых экранах и заметить, что он отлично реагирует. Есть, конечно, гораздо больше возможностей, связанных с навигацией.

Кастомизационная настройка в Bootstrap 4

Теперь у нас есть довольно стандартный макет, который вы можете найти на большинстве веб-сайтов.

К счастью, Bootstrap 4 имеет прочную систему, которая позволяет легко настраивать простые элементы.

Откройте файл /src/scss/styles.scss и вставьте следующее:

// Variable Overrides 

// Bootstrap Sass Imports
@import "node_modules/bootstrap/scss/bootstrap";

Согласно разделу Theming, вы можете выбрать либо включить все файлы Bootstrap 4 sass, либо добавить отдельные элементы в зависимости от ваших потребностей. Чтобы все было просто, мы просто импортируем все, как было выше.

Изменение цветов темы в Bootstrap 4

Возможно, наиболее распространенной проблемой является изменение цвета.

Если вы откроете файл node_modules / bootstrap / scss / _variables.scss, вы заметите, что в верхней части он упоминает систему цветов. В этом разделе вы увидите все переменные, которые вы можете переписать, чтобы соответствовать цветам.

Давайте изменим только основной цвет, изменим styles.scss на следующее:

// Variable Overrides 
$theme-colors: (
  "primary": #d95700
);

Сохраните его, и это результат:

Очень просто!

Давайте также изменим цвет фона:

// Variable Overrides 
$theme-colors: (
  "primary": #d95700
);

$body-bg: #ededed;

Теперь результат выглядит следующим образом:

Хм, теперь наша секция jumbletron (hero) выглядит уродливой, так как она также была серой.

Мы можем настраивать пользовательские настройки для определенных элементов, используя инспектор в chrome или firefox, находим связанные классы элементов, которые хотим изменить, и изменяем их в нашем файле styles.scss.

В этом случае класс, ответственный за jumbotron, является .jumbotron. Давайте изменим цвет фона и добавим небольшую границу к вершине, чтобы имитировать dropshadow из navbar:

// Variable Overrides 
$theme-colors: (
  "primary": #d95700
);

$body-bg: #ededed;

.jumbotron {
    background-color: #ffffff !important;
    border-top: 3px solid rgb(219, 219, 219);
}

Теперь результат:

Заключение

Надеюсь, вам понравился этот курс / учебник по Bootstrap 4. Мы только слегка коснулись основ, и есть еще много чего вы можете узнать. На этом этапе все, что вам нужно изучить, должно быть простым, так как теперь вы понимаете основы и что почти все описано в документации.

Хотите освоить самые современные методы написания React приложений? Надоели простые проекты? Нужны курсы, книги, руководства, индивидуальные занятия по React и не только? Хотите стать разработчиком полного цикла, освоить стек MERN, или вы только начинаете свой путь в программировании, и не знаете с чего начать, то пишите через форму связи, подписывайтесь на мой канал в Телеге, вступайте в группу на Facebook.

Удачного кодирования!

Выражаю огромную благодарность Gary Simon за его труд и доступную подачу материала.

Телеграм канал - Full Stack JavaScript Developer

Помочь проекту (любая валюта). DONATE

среда, 7 марта 2018 г.

Смена картинки при наведении курсора.

Плавная смена картинок при наведении курсора.

Весь код я рассказал здесь - Как изменить картинку при наведении на неё курсора, но получил несколько вопросов. Решил все собрать в одном месте. По шагам:

Создаем новый пост и добавляем в него код HTML. Учтите, что image1.jpg - картинка, которая видна постоянно, а image2.jpg - та, которая будет появляться при наведении курсора

<div class="animate2" style="margin-top: 100px;">
    <img class="first" height="" src="image2.jpg" width="100%" />
    <img class="second" height="" src="image1.jpg" width="100%" />
</div>

Теперь, где нибудь выше или ниже этого кода, прямо в вашем посте добавляем фото, которое будет видно постоянно - image1.jpg. Из всего добавленного кода, нас интересует только src нашей картинки. Копируем его и вставляем на место image1.jpg, внутри двойных кавычек
Тоже самое проделываем во второй картинкой. После этого, код, который вы использовали для получения src картинок, можно полностью удалить.
Идем в "Настройки" -> "Шаблоны+ ->"Продвинутые" ->"Добавить CSS" и вставляем код, котоый приведен ниже прям в поле отмеченное на втором фото

.animate2{

  position:relative;

  margin:0 auto;/* устанваливаем блок div по центру страницы*/

  width:480px; /* Ширина */

  height: 360px;  /* Высота */                

}

.animate2 img {

  position:absolute; /* абсолютное позиционирование*/

  left: 0; /* выравниваем картинки по левому верхнему углу div-а*/

  top: 0; /* выравниваем картинки по левому верхнему углу div-а */  

}
.animate2 img.first { /* первая картинка полностью прозрачная */

  opacity:0;

  filter:alpha (opacity=0);

}

.animate2:hover img.first { /* при наведении курсора первая картинка становится не прозрачной */

  opacity:1;

  filter:alpha (opacity=100);

}

.animate2:hover img.second, .animate2 img.second:hover { /* а вторая при наведении курсора становится прозрачной */

  opacity:0;

  filter:alpha (opacity=0);
     -moz-transition: all 3s ease-in-out; /* эффект перехода для Firefox до версии 16.0 */

    -webkit-transition: all 3s ease-in-out; /* эффект перехода для Chrome до версии 26.0, Safari, Android и iOS */

    -o-transition: all 3s ease-in-out; /* эффект перехода для Opera до версии 12.10 */

    transition: all 3s ease-in-out; 
}
/*--для всех браузеров---*/
.animate:not(:hover) img.second, .animate img.second:not(:hover) {
  
  
  -moz-transition: all 3s ease;
  -wedkit-transition: all 3s ease;
  -o-transition: all 3s ease;
  transition: all 3s ease;
}
/*---замедление возрата к началу--*/
.animate2:not(:hover) img.first:not(:hover){
  opacity:0;
  filter: alpha (opacity=100);
   filter: alpha (opacity=0);
  -moz-transition: all 3s ease;
  -webkit-transition: all 3s ease;
  -o-transition: all 3s ease;
  transition: all 3s ease;
}
.animate2:not(:hover) img.second, .animate2 img.second:not(:hover) {
  opacity:1;
  filter: alpha (opacity=0);
  -moz-transition: all 3s ease;
  -webkit-transition: all 3s ease;
  -o-transition: all 3s ease;
  transition: all 3s ease;
}

понедельник, 8 мая 2017 г.

Фронтенд тестирование

Серия статей, посвященная тестированию фронтенда, в переводе:

Введение: https://tproger.ru/translations/frontend-testing-1/
Юнит-тестирование: https://tproger.ru/translations/frontend-testing-2/
Е2Е-тестирование: https://tproger.ru/translations/frontend-testing-3/
Интеграционное тестирование: https://tproger.ru/translations/frontend-testing-4/

пятница, 21 апреля 2017 г.

Анимация ссылок при наведении

Иногда бывает необходимость придать вашему сайту некоторую динамику. Мне очень нравится динамическое подчеркивание ссылок при наведении, сделанное при помощи чистого CSS. Плюсы здесь чисто визуальные эффекты для пользователя и простота исполнения, которая не будет тормозить загрузку вашего сайта. Пример можно посмотреть здесь:

See the Pen ПОДЧЕРКНУТАЯ ССЫЛКА(abcinblog) by YaroslavW (@YaroslavW) on CodePen.

код очень простой:

HTML

<h2><a href="#">It is underlined link</a></h2>

CSS

h2 > a {
  position: relative;
  text-decoration: none;
  color:#000;
}
h2 > a:hover {
  color: red;
}
h2 > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: green;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: sczlaX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
h2 > a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

Для того, чтобы вам было проще ориентироваться в коде, что там за что отвечает и пр., я выделил все разными цветами.

вторник, 21 февраля 2017 г.

Материалы по CSS

Несколько материалов , которые наглядно демонстрируют возможности современного CSS и здорово вдохновляют:

— Подборка интересных демок, реализованных без использования JavaScript: https://tproger.ru/digest/5-amazing-creations-css-only/

— 10 популярных фронтенд-элементов, для реализации которых не нужен JavaScript: https://tproger.ru/digest/you-might-not-need-js/

— 8 хитрых приёмов, реализуемых с помощью одного лишь CSS: https://tproger.ru/translations/8-tricks-with-css/

— Еще 12 примеров, для реализации которых вам не нужен JavaScript: https://tproger.ru/digest/modern-css/

Движок для 3D-рендеринга в браузере, основанный на CSS: https://tproger.ru/news/voxel-css/

5 нетривиальных моментов разработки фронтэнда на CSS: https://tproger.ru/articles/5-css-tricks/

10 генераторов CSS-кода: https://tproger.ru/digest/10-css-code-generators/

Больше статей здесь: https://tproger.ru/tag/css/

Как работает CSS Flexbox : https://tproger.ru/translations/how-css-flexbox-works/

Фишки современного CSS: https://tproger.ru/digest/modern-css/

Курс по CSS Flexbox: https://tproger.ru/video/css-flexbox/

Создание изображений с помощью CSS: https://tproger.ru/translations/pure-css-images-1/

вторник, 29 марта 2016 г.

Введение в CSS

В предыдущих курсах вы уже немного познакомились с CSS. В этом и последующих курсах мы разберём его детально.

Напомним, что CSS расшифровывается как «каскадные таблицы стилей». Этот язык отвечает за внешний вид HTML-страницы. Синтаксис языка достаточно прост: он состоит из селекторов и свойств.

С помощью селекторов можно сказать браузеру какие именно элементы мы хотим оформить. Свойства описывают как именно мы хотим оформить эти элементы. То есть селекторы — это снайперский прицел, а свойства — это кисть, рубанок, скальпель и перфоратор.

В курсе (здесь ссылка на курс «Структура HTML – документа» ) Структура HTML-документа были описаны различные способы подключения стилей. В этом курсе мы будем пользоваться редактором CSS.

Пример вначале страницы.

CSS-правила

Весь CSS-код состоит из повторяющихся блоков следующего вида:

селектор {

свойство1: значение;

свойство2: значение;

}

Такой блок называется «CSS-правило». Каждое CSS-правило содержит хотя бы один селектор и свойство.

Простейшие селекторы — это селекторы по именам тегов. С их помощью можно задать стили для всех абзацев на странице, для всех ссылок, заголовков первого уровня и так далее. Такие селекторы содержат имя тега без символов < и >. Например:

p {

/* стили для абзацев */

}

h1 {

/* стили для заголовков */

}

Продвинутые селекторы

К более сложным селекторам можно отнести селекторы с использованием классов и псевдоклассов.

Класс позволяет объединять разные элементы в смысловые группы и применять к ним одинаковое оформление. Например, можно создать класс «элементы с ошибкой» и задать ему красный цвет текста. Затем можно добавлять этот класс к любому HTML-тегу: абзацу, заголовку, элементу списка и так далее.

Класс тега можно задать с помощью атрибута class, который содержит имя класса (или имена классов через пробел). Пример:

В примере у первого абзаца задан класс help, у второго абзаца заданы классы help и error.

Селектор с использованием класса задаётся так: .имя_класса. Например:

.help { ... }

.error { ... }

Более подробно об использовании селекторов, я расскажу в отдельном посте «Селекторы».

Свойства для оформления текста

В CSS существует огромное количество свойств. Их можно разбить на следующие группы:

• оформление текста;

• работа с размерами и отступами;

• позиционирование элементов;

• создание сеток;

• декоративные: цвета, фон, тени;

• другие.

В этом задании мы познакомимся с несколькими свойствами для оформления текста, а более подробно об этом я расскажу в посте «Оформление текста с помощью CSS». А пока что вы можете посмотреть примеры составления кода !
(ссылка на пост с кодами к «Знакомство с CSS» пример № 1)

Свойства для задания размеров и отступов

С помощью CSS можно задавать ширину, высоту, внешние и внутренние отступы элементов, минимальную и максимальную ширину и высоту и так далее.

Все свойства, которые так или иначе влияют на размеры и отступы элементов, описываются в так называемой «Блочной модели документа». Помимо свойств для отступов и размеров в блочную модель входят свойства для описания границ и очень важное свойство display, которое определяет тип элемента (блочный, строчный и другие).

В этом примере № 2 мы познакомимся с некоторыми свойствами из блочной модели, а более подробно и полно о них я расскажу в посте «Блочная модель документа».

Позиционирование элементов.

С помощью позиционирования можно очень точно и гибко управлять расположением элементов. Позиционирование применяют для создания сложных «многослойных» интерфейсов, таких как всплывающие окна или галереи, а также для вёрстки мелких декоративных элементов.

Главным свойством для работы с позиционированием является position, которое переключает режимы позиционирования элемента. Ещё четыре свойства: top, right, bottom, left, управляют расположением элемента. И последнее свойство z-index управляет порядком слоёв.

В этом примере № 3 мы изменим стандартный режим позиционирования элемента на абсолютный и поперемещаем элемент.

Более подробно теория и практика позиционирования элементов будет рассмотрена в посте «Позиционирование».

Создание сетки страницы.

Типичный веб-сайт состоит из шапки, главного меню, блока с основным содержанием, боковых колонок, подвала. Эти блоки могут быть расположены друг под другом, в несколько колонок или ещё сложнее. Такое взаимное расположение основных блоков сайта и называют «сеткой» или «раскладкой».

Сетка может быть фиксированной или тянущейся, когда ширина блоков изменяется в зависимости от ширины браузера. Чтобы быстро и легко создавать сетки, нужно хорошо разбираться в блочной модели и позиционировании.

В этом примере № 4 мы создадим простейшую раскладку из двух колонок. А в посте «Сетки» рассмотрим приёмы создания сеток и потренируемся строить более сложные раскладки страниц.

Декоративные свойства.

Чтобы сделать страницу яркой и красивой можно использовать множество свойств: цвет текста, фон, тени, рамки, закругления и многие другие.

Работа с декоративными свойствами будет подробно рассмотрена в серии «Фоны» и «Оформление текста с помощью CSS».

Пример создания красивых полей и кнопок вы можете увидеть на этом примере №.5

Каскадность

Напомним, что CSS расшифровывается как «каскадные таблицы стилей». Почему именно каскадные?

Всё дело в том, что стили для элемента могут быть определены в нескольких местах: внутри одного файла стилей и в разных файлах стилей.

Браузер находит все CSS-правила, затрагивающие данный элемент, а затем комбинирует их и получает итоговый список свойств для этого элемента. Комбинирование свойств производится по чётким правилам, которые опираются на приоритетность и специфичность.

Название «каскадные» появилось из-за описанного механизма комбинирования стилей из разных CSS-правил.

В этом задании мы скомбинируем стили для одного из абзацев.

<!DOCTYPE html>

<html>

<head>

<title>Каскадность</title>

</head>

<body>

<h1>Каскадность и просветление</h1>

<p>Каскадность — это очень мощный механизм.</p>

<p class="truth">Веб-разработчик, постигший тайны каскадности, достигает просветления в вёрстке и становится гуру.</p>

<p>Веб-разработчик, не стремящийся постигнуть каскадность, так и останется подмастерьем.</p>

</body>

</html>

CSS:

p {

outline: 2px solid rgba(0, 0, 0, 0.1);

padding: 10px;

}

.truth {

background-color: #dff0d8;

}

Каскадность. Переопределение стилей .

В предыдущем примере мы с помощью класса добавили ко второму абзацу дополнительные стили. CSS-правило для абзацев и CSS-правило для класса содержали по одному свойству. Когда мы добавили класс ко второму абзацу, в его наборе стилей стало два свойства. Вот так:

p {

padding: 10px;

}

.truth {

background-color: #dff0d8;

}

стили второго абзаца {

padding: 10px;

background-color: #dff0d8;

}

Свойства в CSS-правилах были разными. А что произойдёт, если в разных CSS-правилах будут совпадающие свойства? Сейчас и проверим.

<!DOCTYPE html>

<html>

<head>

<title>Каскадность. Переопределение стилей</title>

</head>

<body>

<h1>Каскадность и просветление</h1>

<p>Каскадность — это очень мощный механизм.</p>

<p>Веб-разработчик, не стремящийся постигнуть каскадность, так и останется подмастерьем.</p>

</body>

</html>

CSS:

p {

padding: 10px;

outline: 2px solid rgba(0, 0, 0, 0.1);

background-color: #dff0d8;

}

.truth {

background-color: #aaddff;

}

Каскадность и приоритеты

Когда в предыдущем задании мы задали цвет фона для правила с классом truth, одно из свойств второго абзаца переопределилось:

p {

padding: 10px;

background-color: #dff0d8;

}

.truth {

background-color: #aaddff;

}

стили второго абзаца {

padding: 10px;

background-color: #dff0d8;

background-color: #aaddff;

}

Когда для одного и того же элемента есть несколько CSS-правил с одинаковыми свойствами, браузер использует понятия приоритетов и специфичности, чтобы выбрать значение свойства из нескольких возможных. Упрощённо, можно сказать что:

1. CSS-правила в значении атрибута style самые приоритетные,

2. за ними идёт селектор с id,

3. затем селектор с классом,

4. затем селектор с именем тега.

На самом деле, механизм определения приоритетов и специфичности более сложный. Подробно он будет описан в курсе «Наследование и каскадирование». Пока чо можно разобрать на примере № 6

Каскадность. Коктейль из классов

Похоже, вы решили головоломку! Поздравляем!

Для решения нужно было лишь переместить CSS-правило для класса green ниже CSS-правила для класса blue. Когда к одному элементу применяются несколько CSS-правил, то приоритетность этих правил определяется по их селектору. Если селекторы однотипные, как в нашем случае, то тогда более приоритетным является CSS-правило, которое расположено ниже в коде.

Резюмируем. Одному и тому же элементу можно назначать несколько классов. Благодаря механизму каскадности, CSS-правила этих классов будут комбинироваться, а при конфликте свойств будет применяться механизм приоритетов.

Назначение нескольких классов одному элементу — очень гибкий и мощный приём в арсенале веб-разработчика. Он позволяет упрощать и значительно сокращать CSS-код.

Представьте, что на макете очень много блоков с одинаковым фоном, цветом текста и отступами. Вместо того, чтобы всё время повторять CSS-свойства для этих блоков, можно создать один общий класс и использовать его в HTML-коде. А если понадобится изменить внешний вид этих блоков, то нужно будет исправить всего один класс в CSS.
Все это разобрали на примере № 7

Наследование .

Другой важный механизм CSS — это наследование. Он заключается в том, что часть стилей может передаваться от родительского элемента к дочерним (вложенным в него).

Например, все элементы внутри тега body являются дочерними по отношению к нему. Если для body в стилях задать цвет текста красным, то цвет всех остальных элементов тоже станет красным.

Ещё пример: тег ul является родительским по отношению к вложенным в него тегам li. Если задать для ul шрифт курсивом, то и внутри всех li шрифт станет курсивным.
Это хорошо видно из примера № 8

Ненаследуемые свойства.

Наследование работает не для всех свойств. Некоторые свойства применяются только к самому элементу и не переходят к его потомкам.

К таким ненаследуемым свойствам относятся: ширина, высота, отступы, режим позиционирования и другие. Согласитесь, было бы странно задать отступы для body и обнаружить, что у всех вложенных элементов тоже появились отступы.

Более подробно наследование описано в курсе «Наследование и каскадирование» и на примере № 9

Теперь можно перейти к посту "Выравнивание текста, цвет текста, подчеркиваниев CSS и прочее"

Страницы

Translate

Поиск по этому блогу

пятница, 1 июня 2018 г.

Скрыть / Показать содержимое поля ввода.

Вариант 1:самый простой.

Вариант с иконкой.

Третий вариант

Вариант с подменой вводимых символов.

воскресенье, 8 апреля 2018 г.

Bootstrap 4 SASS .Руководство.

Установка

Установка Bootstrap 4 через NPM

Контейнер для гридов

Определение Bootstrap 4 Navbar

Интеграция раздела Bootstrap 4 (Секция Jumbotron)

Система сеток Bootstrap 4

Отступы - Margins и Padding в Bootstrap 4

Работа с «Типографией» в Bootstrap 4

Bootstrap 4 Вертикальная навигация

Кастомизационная настройка в Bootstrap 4

Изменение цветов темы в Bootstrap 4

Заключение

среда, 7 марта 2018 г.

Смена картинки при наведении курсора.

понедельник, 8 мая 2017 г.

Фронтенд тестирование

пятница, 21 апреля 2017 г.

Анимация ссылок при наведении

HTML

CSS

вторник, 21 февраля 2017 г.

Материалы по CSS

вторник, 29 марта 2016 г.

Введение в CSS

Ярлыки

Форма для связи

Страницы

Translate

Поиск по этому блогу

пятница, 1 июня 2018 г.

Вариант 1:самый простой.

Вариант с иконкой.

Третий вариант

Вариант с подменой вводимых символов.

воскресенье, 8 апреля 2018 г.

Установка

Установка Bootstrap 4 через NPM

Контейнер для гридов

Определение Bootstrap 4 Navbar

Интеграция раздела Bootstrap 4 (Секция Jumbotron)

Система сеток Bootstrap 4

Отступы - Margins и Padding в Bootstrap 4

Работа с «Типографией» в Bootstrap 4

Bootstrap 4 Вертикальная навигация

Кастомизационная настройка в Bootstrap 4

Изменение цветов темы в Bootstrap 4

Заключение

среда, 7 марта 2018 г.

понедельник, 8 мая 2017 г.

пятница, 21 апреля 2017 г.

HTML

CSS

вторник, 21 февраля 2017 г.

вторник, 29 марта 2016 г.

Ярлыки

Форма для связи

пятница, 1 июня 2018 г.

воскресенье, 8 апреля 2018 г.

среда, 7 марта 2018 г.

понедельник, 8 мая 2017 г.

пятница, 21 апреля 2017 г.

вторник, 21 февраля 2017 г.

вторник, 29 марта 2016 г.