Ответы, понравившиеся пользователю iwebdesigner

Что за библиотека tether.min.js в bootstrap?

Сергей @SergeiB

Это библиотека для позиционирования. Команда Bootstrap использовала её раньше для позиционирования выпадающих меню (dropdowns), подсказок (tooltips) и всплывающих окон (popovers). Сейчас вместо данной библиотеки используется её более продвинутый аналог - popper.js. Если от него отказаться, перечисленные выше компоненты перестанут работать. В Bootstrap последних версий popper.js включили по умолчанию в файл bootstrap.bundle.js. С другой стороны, если в проекте вы не используете подсказки и всплывающие окна, то можно обойтись и вовсе без popper.js, поскольку выпадающее меню в навигационной панели (navbar) может работать без этого плагина.

Ответ написан более трёх лет назад

Комментировать

Можно ли средствами Bootstrap-4 реализовать карусель блоков div без картинок?

HamSter @HamSter007

HTML/CSS верстальщик

Если о стандартной карусели (по 1 слайду), но именно с карточками, то вместо картинки вставляете карточку:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" >
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
  
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      
      
      <div class="card">
        <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
      
    </div>
    <div class="carousel-item">
      <div class="card">
        <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="card">
        <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

пример 1

-------------------------------------------------

Если же Вы хотите прокрутку по 3 блока, то стандартное решение .row и .col-4:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" >
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
  
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      
      
      <div class="row">
        <div class="col-4">
          <div class="card">
            <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div class="card">
            <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div class="card">
            <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
      </div>
      
    </div>
    <div class="carousel-item">
      <div class="row">
        <div class="col-4">
          <div class="card">
            <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div class="card">
            <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div class="card">
            <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="row">
        <div class="col-4">
          <div class="card">
            <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div class="card">
            <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div class="card">
            <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

пример 2

----------------------------------------------------------

И вот еще на codepen готовые решения есть

Ответ написан более трёх лет назад

Комментировать

Как собрать данные посетителя сайта?

Павел Волынцев @copist

Empower people to give

Я нашёл в этом вопросе три технологических вопроса:

1. Про вычисление города

Есть форма заявки с полями "номер телефона" ... добавлен на базу mysql ... адрес (город проживание клиента который нажал на кнопку)

Если в форме нет поля для выбора страны и города, то можно вычислить приблизительное местоположение по IP адресу. Это неточная информация, ей нельзя доверять на 100%, потому что пользователь мог зайти на сайт через анонимные прокси. Желательно уточнить у него - "Вы точно из города X?".

Для автоматического вычисления гео-данных можно воспользоваться платной базой GEO данных сервиса MaxMind или платными открытыми веб-сервисами
Или бесплатными сервисами, которые возвращают данные с очень большой погрешностью, например вместо города возвращают страну :(

Пример получения информации через API MaxMind для языка PHP

<?php
require_once 'vendor/autoload.php';
use GeoIp2\Database\Reader;

// This creates the Reader object, which should be reused across lookups.
$reader = new Reader('/usr/local/share/GeoIP/GeoIP2-City.mmdb');

// Replace "city" with the appropriate method for your database, e.g., "country".
$record = $reader->city('128.101.101.101');

print($record->country->isoCode . "\n"); // 'US'
print($record->country->name . "\n"); // 'United States'
print($record->country->names['zh-CN'] . "\n"); // '美国'

print($record->mostSpecificSubdivision->name . "\n"); // 'Minnesota'
print($record->mostSpecificSubdivision->isoCode . "\n"); // 'MN'

print($record->city->name . "\n"); // 'Minneapolis'

print($record->postal->code . "\n"); // '55455'

print($record->location->latitude . "\n"); // 44.9733
print($record->location->longitude . "\n"); // -93.2323

Пример получения информации об IP адресе на языке PHP через открытый сервис ipinfo.io

$ip = $_SERVER['REMOTE_ADDR'];
$details = json_decode(file_get_contents("http://ipinfo.io/{$ip}"));
echo $details->city; // -> "Mountain View"

Пример запроса:
$ curl ipinfo.io/8.8.8.8

Пример ответа:

{
  "ip": "8.8.8.8",
  "hostname": "google-public-dns-a.google.com",
  "loc": "37.385999999999996,-122.0838",
  "org": "AS15169 Google Inc.",
  "city": "Mountain View",
  "region": "CA",
  "country": "US",
  "phone": 650
}

2. Про передачу данных с веб-страницы

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

Можно отправить форму на сервер методом POST, а можно передать по технологии AJAX.
learn.javascript.ru/ajax-intro

3. Про сохранение в базу данных

Как сделать чтобы ... эти данные записать на БД

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

Ответ написан более трёх лет назад

2 комментария

Как стилизовать через css полосу прокрутки внутри блока?

Александр @z80b

Frontend

Scrollbar стилизовать можно только в webkit браузерах и ie да и то не очень сильно. В ie так не получится скорее всего. В webkit с помощью свойств:
::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer.
Пример:

::-webkit-scrollbar { width: 3px; height: 3px;}
::-webkit-scrollbar-button {  background-color: #666; }
::-webkit-scrollbar-track {  background-color: #999;}
::-webkit-scrollbar-track-piece { background-color: #ffffff;}
::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
::-webkit-scrollbar-corner { background-color: #999;}}
::-webkit-resizer { background-color: #666;}

Лучше использовать какой-нибудь js-плагин, типа этого: manos.malihu.gr/jquery-custom-content-scroller

Ответ написан более трёх лет назад

1 комментарий

Как задать стандартные значения в FTPSync Sublime Text 3?

secretsergey @secretsergey Автор вопроса

Проблему решил. Решение:
1) Жмём Preferences -> Browse Packages
2) Создаём папку FTPSync.
3) Внутри папки создаём файл ftpsync.default-settings
4) В него записываем желаемые значения.

Ответ написан более трёх лет назад

Комментировать

Как вставлять знак рубля?

khipster @khipster

₽ ₽ но по моему мы скоро будем писать у.е.

Ответ написан более трёх лет назад

10 комментариев

Как называется плагин для Sublime Text который автоматически добавляет комментарий в конце закрывающего блока HTML с классами и идентификаторами?

flareair @flareair

Если вдруг еще не пробовали, то попробуйте Emmet.
Он умеет вот так:

Вводите
.container|c
Жмете Tab

<div class="container"></div>
<!-- /.container -->

Ответ написан более трёх лет назад

6 комментариев

Как эффективно развивать себя как разработчика?

aRegius @aRegius

Python Enthusiast

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

Будьте конкретны:
- "Моя цель на ближайшие 6 месяцев - вырасти до позиции XXX в текущей компании". И далее:
- "Что мне нужно сделать для того, чтобы в течение 6 месяцев в моей компании вырасти до XXX ?"

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

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

Но все начинается с конкретики:
- "...хочется максимально эффективно развивать себя...". Что конкретно значит (для вас) "максимально эффективно"? По каким критериям вы будете определять, эффективно вы развиваетесь или нет? Количество прочитанных книг? Сложность решаемых задач? Что конкретно?
- "...чтобы стать не только полноценным девом...". Что конкретно значит (для вас) "полноценный дев"? Как вы поймете, что стали "полноценным девом"? Вы добьетесь определенной должности? Будете зарабатывать определенную сумму денег? Что конкретно?

Успехов.

Ответ написан более трёх лет назад

Комментировать

Как установить метод selected для объекта option в зависимости от содержания URL?

Дмитрий Беляев @bingo347 Куратор тега JavaScript

Crazy on performance...

jQuery:

$('#marka option').each(function () {
  var $this = $(this);
  if (location.href.indexOf($this.val()) === -1) {
    // не содержит
  } else {
    $this.prop('selected', true);
  }
});

Native DOM API:

Array.prototype.forEach.call(document.getElementById('marka').options, function(opt) {
  if (location.href.indexOf(opt.value) === -1) {
    // не содержит
  } else {
    opt.selected = true;
  }
});

Ответ написан более трёх лет назад

1 комментарий

Как задать минимальную ширина сайта на мобильных устройствах?

Кирилл @skv1991

веб-программист, спортсмен

Обычно используют:

<meta name="viewport" content="width=device-width, initial-scale=1">

А если нужно, чтобы минимальная ширина была 600px, то

<meta name="viewport" content="width=600, initial-scale=1">

Допустим страница у нас находится в div с id=page
Тогда в CSS составляют уже media-queries (медиа-запросы)

html, body {
       width: 100%;
}
#page {
       /* максимальная ширина страницы - 600px */
       width: 600px;
}

@media all and (max-width: 600px) {
	#page {
		/* максимальная ширина страницы - 100% - для телефонов */
	       width: 100%;
	}
}

И так далее по аналогии.
Ширину самого сайта лучше описывать в div внутри тега body

Так же загляните сюда.

Ответ написан более трёх лет назад

Комментировать

Войдите на сайт