Уроки HTML, CSS. Как располагать элементы в контейнерах с помощью bootstrap

Привет друзья! Сегодня я вам расскажу как сделать так, чтобы ваш сайт был mobile friendly. Это легко можно сделать используя фреймворк bootstrap.

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

Также рекомендую вам изучить возможности фреймворка bootstrap, для того, чтобы вы знали какой у него есть функционал — чтобы не писать заново код например для создание менюшек сайта, создания ниспадающих списков, эффектов всплывающих окон – и в таком духе.

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

Фреймворк bootstrap — это очень удобный инструмент.

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

Существует три основных компонента—контейнера, строки и столбцы.

Контейнеры – для этого div блоку присваивается класс container для фиксированной ширины или container-fluid для растяжения блока на всю ширину.

Строки — для этого div блоку присваивается класс — row, который обеспечивают выравнивание столбцов по горизонтали.

Столбцы — — для этого div блоку присваивается класс – col, причем с указанием размера, сколько столбцов из 12 он занимает и с указанием типа экрана.

Ширина
контейнера 		None (auto) 576px 720px 940px 1140px
Класс
префикса 		.col-xs- .col-sm- .col-md- .col-lg- .col-xl-

Вступай в группу VK: https://vk.com/wiseplat 🚀

Подписывайся на канал YouTube: https://www.youtube.com/channel/UCfxnN0xALQR6OtznIj35ypQ

Уроки HTML, CSS. Как изменить цвет текста

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

Для заголовка h1 мы просто прямо внутри тэга указали стиль со свойством установленным в красный цвет. 

<h1 style="color: red;">Заголовок - меняем цвет</h1>

Для блочного элемента div и для абзаца тег p , мы указали назначения свойств стиля цвета через классы.

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

Вот код стилей:

<style>
        .bl{            
            color: blue;
        }
        .b0{
            color: black;
        }
        .p0 {
            color: green;            
        }
    </style>

Вот код который внутри тега body:


   <h1 style="color: red;">Заголовок - меняем цвет</h1>
   
<div class="bl">текст 1текст 1текст 1текст 1текст 1текст 1текст 
1текст 1текст 1текст <span class="b0">1текст 1текст 1текст 1текст</span> 1текст 1текст 
1текст 1текст 1текст 1текст 1текст 1текст 1текст 1текст 1текст</div>
    
<p class="p0">привет мир привет <span class="bl">мир привет мир привет 
мир привет</span>  мир привет мир привет мир привет мир </p>

Вступай в группу VK: https://vk.com/wiseplat 🚀

Подписывайся на канал YouTube: https://www.youtube.com/channel/UCfxnN0xALQR6OtznIj35ypQ

Уроки HTML, CSS Как подключить jQuery и вывести значения по id и классу

Привет друзья! В этом видео я вам расскажу, как подключить jQuery и как вывести результат выполнения в поле контейнера по значению id и названию класса. Для доступу к элементу по id в названии используется знак решетки, а для доступа по классу используется точка.

Содержимое файла my.js:

var b1 = "Привет это тест";
$("#mydiv1").html("v1 "+b1);
$("#mydiv1").fadeOut();
$(".cl01").html("v2 "+b1);

$("#mydiv1").html("v111111 "+b1);

Уроки HTML, CSS. Как с помощью jQuery вывести значение на экран

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

jQuery — это набор функций JavaScript, который помогает легко взаимодействовать JavaScript и HTML. С помощью библиотеки jQuery можно получить доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM и манипулировать ими.

Уроки HTML, CSS. Как подключить Javascript и вывести результат выполнения на экран

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

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

Первый пример:

var hi = "привет мир!";
document.getElementById("d1").innerHTML = hi;

Второй пример — для консоли:

var c = 20;
var b = 40;
var t = c*b;
console.log("c*b="+t);

Уроки HTML, CSS. Как сделать тень у элемента

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

Видеоурок

Стиль для создания тени — box-shadow. У нее есть шесть значений.

box-shadow: 4px 4px 15px 1px #d43e3ed1;

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

Третье значение — это сдвиг тени по вертикали, и тоже 4 пикселя бывает достаточно. Четвертый параметр — это радиус размытия тени, при установке в 0 размытия нет и тень имеет четкие контуры, а если 15 пикселей — то это вполне нормальная тень получается.

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

Вот пример кода из видео:

[div style=»width: 400px;
position: absolute;
left: 100px;
top: 100px;
background-color: #b4f8ff;
padding: 10px;
box-shadow: 19px 19px 15px 1px #d43e3ed1;»] Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 [/div]

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

Как в Python создать графическое окно

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

Видеоурок

Для того, чтобы создать графическое окно, можно использовать библиотеку Tkinter, она установлена в Python уже в качестве стандартного модуля, поэтому нам не нужно ничего дополнительно устанавливать для ее использования. Tkinter — очень мощная библиотека.

Вы только представьте, что вот эта стандартная интегрированная IDE для редактирования кода Python как раз и написана на этой самой библиотеке Tkinter. Круто, да?!

Здесь мы просто создадим окно, чтобы вам показать, что как это легко и просто сделать — инициализируем эту библиотеку.

from tkinter import *
window = Tk()
window.title("Привет мир!")
window.mainloop()

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

Если вы хотите экспериментировать дальше, и добавить какие-нибудь кнопки либо текстовые поля, то это можно сделать следующим образом.

Создание текстовой метки Label

Чтобы добавить текст в наш пример, используется класс Label, например: 

lbl = Label(window, text="Привет")

и с помощью функции grid и укажем ее положение:

lbl.grid(column=0, row=0)

✔ ————-

Вступай в группу Вк — https://vk.com/wiseplat 🚀

Группа FaceBook — https://www.facebook.com/wiseplat/

Инстаграм Wiseplat: https://www.instagram.com/wiseplat/

Instagram: https://www.instagram.com/shpaginoleg/

Twitter — https://twitter.com/WiseplatSchool

Если Вам понравилась публикация, подписывайтесь на канал!

Ставьте лайки, тогда будем еще писать такой контент 🙂

Если есть вопросы или пожелания, то пишите, в комментариях.