Для получения полного доступа
зарегистрируйтесь.

Раздел:
Подраздел:
Языки:


dfatt
  • Репутация: 260
  • Сниппеты: 53
  • Ревизии: 7

Мне не нравится как выглядит select в Bootstrap, и при большом кол-ве записей в нём сложно найти нужное значение. С минимальными затратами, вы можете сделать из select в Bootstrap, классную штуку с поиском, например, так: BhkmGTk.png

Сделать это можно при помощи плагина Bootstrap-select, на сайте автора указаны вариации использования плагина.

Подключаем js и css, затем добавляем класс к select-у:

<select class="selectpicker">
  <option value="c">C</option>
  <option value="c#">C#</option>
  ...
</select>
Vampireos
  • Репутация: 11
  • Сниппеты: 1
  • Ревизии: 0
<!DOCTYPE html>
<html lang="ru">
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta http-equiv="x-ua-compatible" content="ie=edge">

  <!-- МЕТА -->
  <title>Заголовок</title>
  <meta name="description" content="описание не длинее 155 символов" />

  <!-- open graph Facebook-->
  <meta property="og:title" content="Заголовок" />
  <meta property="og:type" content="website" />
  <!-- если сайт многоязычный -->
  <!-- <meta property="og:locale" content="ru_RU"> -->
  <meta property="og:url" content="http://localhost.my" />
  <!-- не меньше 600х315, не более 8Мб -->
  <meta property="og:image" content="http://localhost.my/img/og_cover.jpg" />
  <meta property="og:description" content="описание не длинее 155 символов" />
  <meta property="fb:admins" content="Facebook ID" />

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@ник_компании_в_твиттере">
  <meta name="twitter:title" content="Заголовок">
  <meta name="twitter:description" content="описание не длинее 155 символов">
  <meta name="twitter:creator" content="@ник_в_твиттере">
  <!-- картинка не меньше 280х150, не более 1Мб -->
  <meta name="twitter:image" content="http://localhost.my/img/tw_cover.jpg">

  <!-- G+ / Pinterest -->
  <meta itemprop="name" content="Заголовок">
  <meta itemprop="description" content="описание не длинее 155 символов">
  <meta itemprop="image" content="http://localhost.my/img/g_cover.jpg">

  <!-- Google authorship -->
  <link rel="author" href="https://plus.google.com/[Google+_Profile]/posts"/>
  <link rel="publisher" href="https://plus.google.com/[Google+_Page_Profile]"/>

  <!-- фавиконы и иконки сайта -->
  <link rel="apple-touch-icon" href="apple-touch-icon.png">

</head>
<body>

</body>
</html>

Валидаторы:

Яндекс https://old.webmaster.yandex.ru/microtest.xml

Google https://search.google.com/structured-data/testing-tool

Pinterest https://developers.pinterest.com/tools/url-debugger/

Twitter https://cards-dev.twitter.com/validator

Facbook https://developers.facebook.com/tools/debug/

Bran
  • Репутация: 29
  • Сниппеты: 7
  • Ревизии: 0

Добавляем файла с анимациями (Animate.css):

<head>
  <link rel="stylesheet" href="animate.min.css">
</head>

Добавим эффект, например, fadeIn:

Результат c414f1672d3e498772c125ad099d7a52.gif

Или, bounceInLeft:

Результат f8cbe60c8260d7109cfc1f42744e961f.gif

На gif, анимация тормозит, но в действительности этого нет.

Для зацикливания анимации, добавьте класс infinite

<!-- fadeIn -->
<h1 class="animated fadeIn">Mega Corporation </h1>

<!-- bounceInLeft -->
<h1 class="animated bounceInLeft">Mega Corporation </h1>
Bran
  • Репутация: 29
  • Сниппеты: 7
  • Ревизии: 0

Разработчики не тратят время на поиск качественных иконок для UI - и это логично, мы тратим время на другие важные вещи — код.

Но мы делаем проекты для наших пользователей, и будет правильно потратить немного времени на причёсывание UI. В данном случае мы говорим про иконки, самый простой способ решить проблему — начать использовать Font Awesome.

  1. Копируем папки css, fonts к себе в проект
  2. Подключаем font-awesome.min.css

На сайте FA, есть каталог, берём название нужной нам иконки (для меню bars), и делаем так:

<span class="fa fa-bars"></span>
dfatt
  • Репутация: 260
  • Сниппеты: 53
  • Ревизии: 7

Быстрый способ добавить цветовой оверлей на фоновое изображение

.block_business {
    background: linear-gradient(
            rgba(0, 0, 0, 0.7),
            rgba(0, 0, 0, 0.7)
    ),
    url('https://images.unsplash.com/photo-1524758631624-e2822e304c36');
}

Результат: