Как сделать сразу мобильное меню bootstrap

#jquery #html #css #bootstrap

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

Ответы

Ответ 1


  

    Dropdown 
    

      
Action
      
Another action
      
Something else here
      

      
Separated link
    
  


просто хардкод! это если нужно постоянное отображение дропменю


Ответ 2

Если работать с bootstrap на уровне less, то в файле variables.less настраивается
переменная @grid-float-breakpoint.
Customize and download
находим эту переменную, задаём значение(например 1280px) меньше которого меню коллапсирует.
Скачиваем, пользуемся.

Проблема при загрузке .css

#css #bootstrap #google_chrome #angular_cli

                    
Файл .css почему-то не подгружается, выводя в консоли ошибку:


  Refused to apply style from
  'http://localhost:3000/node_modules/bootstrap/dist/css/bootstrap.min.css'
  because its MIME type ('text/html') is not a supported stylesheet MIME
  type, and strict MIME checking is enabled.


Может, кто сталкивался с такой проблемой, заранее спасибо!


Ссылка на файл "bootstrap.min.css":
https://www.dropbox.com/s/ij4v7pchuksannc/bootstrap.min.css?dl=0
    

Ответы

Ответ 1

Судя по всему проект на Angular2+ и после компеляции нет доступа к папке Node Modules,
а вместо файла возврящяеться текстовая страница. Попробуйте подключить этот файл в
./src/styles.css 

 @import "~bootstrap/dist/css/bootstrap.min.css"


~ - это маска для пути к node_modules, webpack расшифрует и подставит нужный файл
в сборку Angular.


Ответ 2

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

Если причина не в этом, то было бы неплохо предоставить содержимое файла css.

Bootstrap + SASS, как начать работу?

#html #css #bootstrap #sass

Установил SASS через консоль, по этому туториалу sass-scss.ru. 

В работе мне потребуется bootstrap.

Вопрос: 


Как начать использовать в проекте SASS, создать файл style.scss и писать в него css
код или нужны дополнительные действия? 
Как правильно подключить bootstrap и начать его использовать в проекте? 


Сейчас на начальной стадии, html код выглядит так:




    
      
        
        
        
        
        
      
    
      
        
Hello, world!
    
        
        
        
      
    



    

Ответы

Ответ 1

Если честно все не так просто, советую посмотреть/почитать гайд по развёртыванию
проекта на Gulp/Webpack так как если писать тут выйдет очень много кода. Что бы использовать
Sass нужно сначало развернуть NPM + например Webpack.

https://proglib.io/p/webpack-in-15/ - пример,  но в интернете их ещё масса, стоит
лишь поискать. 

Но для новичка Gulp будет легче в плане понимания. 

После того как ты установишь зависимости на свой проект, выполни установку ещё двух
пакетов: 

npm install bootstrap
npm install sass


И далее опиши таски в webpack/gulp, опять таки примеров в интернете много. 

Будут вопросы пиши:)


Ответ 2

1. Вариант: Использовать webpack или gulp сборщик. Быстро и удобно, но нужно правильно
настроить. Примеров сборки в сети достаточно много.

Для gulp сборки выполнить: 

npm i –g gulp
npm i --save-dev gulp
npm i --save-dev gulp-sass
npm i bootstrap


Настроить gulpfile.js.

Подключение bootstrap в style.scss:

@import "node_modules/bootstrap/scss/bootstrap.scss";


2. Вариант: Использовать online конверторы (например sassmeister ). Минусы - долго
и неудобно.

3. Вариант: Конвертер с помощью командной строки ruby. Для этого нужно установить
rubyinstaller. Запустить командную строку ruby. Выполнить команды:

gem install sass

sass input.scss output.css


или

sass --watch input.scss:output.css

Валидное расположение блоков

#css #bootstrap #div

Подскажите как грамотно расположить блоки как на данном рисунке(блок 3 немного заезжает
на блок 1,), что б они сохранили при этом адаптивность свою(при изменении ширины экрана
не проваливались ни куда). Можно и на бутстрапе, просто интересен грамотный подход,
да бы минимизировать использование лишних тегов и стилей.Заранее спасибо
    

Ответы

Ответ 1

css - calc()

browser support calc



.block-1 {
  height: 200px;
  background: #ccc;
}

.block-2,
.block-3 {
  height: 100px;
  background: #ddd;
}

.block-3 {
  height: 100px;
  background: #999;
  margin-left: -50px;
  width: calc(100% + 50px)!important;
}


@media screen and (max-width: 767px) {
  .block-3 {
    margin-left: 0;
    width: 100%!important;
  }
}


  

    
1
    

      

        
2
        
3
      
    
  



Ответ 2

Поскольку вопрос про минимизацию кода, предлагаю ещё один вариант.

Строил то же, что и soledar10. Отличия в деталях:


Второй и третий блоки не надо заворачивать в отдельную строку.
Вместо calc можно использовать проценты от ширины экрана.
Поскольку бутстрап рабоает в логике "mobile first", органичнее использовать @media
(min-width: 768px). Это позволяет задать width и margin-left для третьего блока только
один раз, когда они отличаются от значений по умолчанию.
col-sm- действует для всех экранов шириной от 768 пикселей. Если при большей ширине
экрана поведение не меняется, то другие классы добавлять не нужно.




.block-red {
  background-color: red;
  height: 400px;
}
.block-green {
  background-color: green;
  height: 200px;
}
.block-yellow {
  background-color: yellow;
  height: 200px;
}
@media (min-width: 768px) {
  .block-yellow {
    margin-left: -10%;
    width: 85% !important;
  }
}



  

    

    

    

  

Функция “читать далее” после определённого количества слов

#html #css #bootstrap

Здравствуйте. Как сделать так, чтобы там, где я пометил красным, появлялась ссылка
"читать далее"? Т.е как установить лимит слов?
    

Ответы

Ответ 1

Как правильно заметил @AndreyFedorov , обрезку традиционно логично делают на стороне
сервера. 

Но если очень хочется, то можно обрезать по словам и на клиенте с помощью javascript:



$(document).ready(function() {
  var wordsToCut = 15;
  var contentWrapper = $('div');
  var contentText = contentWrapper.text();
  contentText = contentText.split(' ').slice(0, wordsToCut).join(' ');
  contentWrapper.text(contentText);
  contentWrapper.append("... Читать далее");
});
div {
  width:300px;
  background: #EEE;
  }

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar rhoncus
tempus. Mauris non velit vitae leo tempor fringilla sed quis mi. In dignissim ultrices
augue ut molestie. Maecenas venenatis auctor mauris. Integer a ex sit amet nibh ultricies
posuere. Integer suscipit dui augue. Donec finibus mi eget dapibus varius. In pulvinar
nec dolor eu rhoncus. Etiam volutpat pellentesque eros et euismod. Nam vitae mollis
sem. Suspendisse ornare enim libero, a ornare tortor suscipit quis. Nunc tincidunt
pretium ligula a finibus. Suspendisse cursus massa a convallis mattis. Integer consectetur
aliquam nisl, pretium mattis mi. Donec laoreet felis a ligula congue, tincidunt bibendum
dolor dignissim. Nam sodales imperdiet tincidunt. Vivamus eu lobortis nisi, sed sodales
nulla. Nullam quis hendrerit mauris. Vestibulum sollicitudin sit amet urna in viverra.
Vestibulum eros libero, elementum at vehicula eu, fringilla porta turpis. Curabitur
at elit at quam ultrices fermentum ut in turpis. Donec porta, turpis non fermentum
sollicitudin, dui purus tincidunt diam, ut euismod orci neque eget felis. Integer pharetra
pretium eros ut mattis. Nunc quam nisi, egestas eget dui vel, tempor efficitur tortor.




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



    $(document).ready(function() {
      var lettersToCut = 140;
      var contentWrapper = $('div');
      var contentText = contentWrapper.text();
      contentText = contentText.substr(0, lettersToCut);
      contentWrapper.text(contentText);
      contentWrapper.append("... Читать далее");
    });
div {
  width: 300px;
  background: #EEE;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar rhoncus
tempus. Mauris non velit vitae leo tempor fringilla sed quis mi. In dignissim ultrices
augue ut molestie. Maecenas venenatis auctor mauris. Integer a ex sit amet nibh ultricies
posuere. Integer suscipit dui augue. Donec finibus mi eget dapibus varius. In pulvinar
nec dolor eu rhoncus. Etiam volutpat pellentesque eros et euismod. Nam vitae mollis
sem. Suspendisse ornare enim libero, a ornare tortor suscipit quis. Nunc tincidunt
pretium ligula a finibus. Suspendisse cursus massa a convallis mattis. Integer consectetur
aliquam nisl, pretium mattis mi. Donec laoreet felis a ligula congue, tincidunt bibendum
dolor dignissim. Nam sodales imperdiet tincidunt. Vivamus eu lobortis nisi, sed sodales
nulla. Nullam quis hendrerit mauris. Vestibulum sollicitudin sit amet urna in viverra.
Vestibulum eros libero, elementum at vehicula eu, fringilla porta turpis. Curabitur
at elit at quam ultrices fermentum ut in turpis. Donec porta, turpis non fermentum
sollicitudin, dui purus tincidunt diam, ut euismod orci neque eget felis. Integer pharetra
pretium eros ut mattis. Nunc quam nisi, egestas eget dui vel, tempor efficitur tortor.




Ну а если задача стоит вроде "текст должен занимать заданный контейнер, не больше
и не меньше", тогда можно скрыть часть текста с помощью css:



div {
  width: 300px;
  height: 90px;
  position: relative;
  overflow: hidden;
  background: #EEE;
}
div a {
  width: 120px;
  display: block;
  position: absolute;
  bottom: 0;
  right:0;
  background: #EEE;
  text-align: right;
}
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar rhoncus
tempus. Mauris non velit vitae leo tempor fringilla sed quis mi. In dignissim ultrices
augue ut molestie. Maecenas venenatis auctor mauris. Integer a ex sit amet nibh ultricies
posuere. Integer suscipit dui augue. Donec finibus mi eget dapibus varius. In pulvinar
nec dolor eu rhoncus. Etiam volutpat pellentesque eros et euismod. Nam vitae mollis
sem. Suspendisse ornare enim libero, a ornare tortor suscipit quis. Nunc tincidunt
pretium ligula a finibus. Suspendisse cursus massa a convallis mattis. Integer consectetur
aliquam nisl, pretium mattis mi. Donec laoreet felis a ligula congue, tincidunt bibendum
dolor dignissim. Nam sodales imperdiet tincidunt. Vivamus eu lobortis nisi, sed sodales
nulla. Nullam quis hendrerit mauris. Vestibulum sollicitudin sit amet urna in viverra.
Vestibulum eros libero, elementum at vehicula eu, fringilla porta turpis. Curabitur
at elit at quam ultrices fermentum ut in turpis. Donec porta, turpis non fermentum
sollicitudin, dui purus tincidunt diam, ut euismod orci neque eget felis. Integer pharetra
pretium eros ut mattis. Nunc quam nisi, egestas eget dui vel, tempor efficitur tortor.Читать далее

Помогите советом, как с html и css сделать такие блоки?

#html #css #вёрстка #bootstrap

Все выполняю с помощью bootstrap. 
Нужно выполнить блоки в точности как на прилагаемом изображении.
Самые главные моменты:


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


Возможно есть какой-то простой способ реализации этой штуки. У меня пока все с жуткими
костылями, и сыпется верстка. Испробовал уже самые разные вариации
    

Ответы

Ответ 1

section {
  box-sizing: content-box;
  height: 64px;
  border-bottom: 3px solid transparent;
  margin: 1em 0;
}

img {
  height: 100%;
  float: left;
}

div {
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
  padding: .5em;
  border: 3px solid silver;
  border-left: none;
}

section:hover {
  border-color: red;
}

  
  
Тут какое-то описание



  
  
Тут какое-то описание



  
  
Тут какое-то описание



Ответ 2

Похоже на то, учитывая, что в при наведении серой рамки нет + появляется тень (судя
по скриншоту).



section {
  box-sizing: border-box;
  height: 64px;
  border-bottom: 2px solid transparent;
  margin: 1em 0;
}

img {
  height: 100%;
  float: left;
}

div {
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
  padding: .5em;
  border: 1px solid #ddd;
  border-left: none;
  background-color: #fff;
}

section:hover {
  border-color: #7d2d3a;
  box-shadow: 0 0 6px 3px rgba(0,0,0,.08);
}

section:hover div {
  border-color: transparent;
}

  
  
Куррорт-Аваза



  
  
Красивый болгарский курорт Созополь



  
  
Hotel Splendid Conference Spa Resort 5* расположен в чудесном курортном местечке
– Бечичи на берегу чистейшего Адриатического моря.







А насчёт:


  Вроде решил. Добавил в div:hover нижняя рамка none. Вроде пока не прыгает ничего,
и скос исчез) 


то лучше использовать селектор:

section:hover div


чтобы при наведении и на пикчу срабатывало то же самое поведение.



Так же можно вместо красного бордера для section сделать изящнее, с анимацией через
section:after. 

Например https://jsfiddle.net/acid_grip/3u3pu41y/

Как задать ширину колонок таблицы из массива JSON c помощью JQuery?

#html #jquery #css #json #bootstrap

Есть массив JSON  ["27.798634","145.57683400000002","223.353834"] и таблица Bootstrap,
состоящая из трех колонок. Как с помощью JQuery задать каждой колонке значение ширины
соответствующее значениям в массиве JSON?




  
  
  
  
  
  




  
Bordered Table
  
The .table-bordered class adds borders to a table:
            
  

    

      

        
Firstname
        
Lastname
        
Email
      
    
    

      

        
John
        
Doe
        
john@example.com
      
      

        
Mary
        
Moe
        
mary@example.com
      
      

        
July
        
Dooley
        
july@example.com
      
    
  





    

Ответы

Ответ 1

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

const column = ["23.798634", "145.57683400000002", "233.353834"];

$('.table').find('thead th').each((i, th) => {
  $(th).width(column[i]);
});

12 и 16-колоночная система Bootstrap

#bootstrap #frontend

Мне нужно сверстать адаптивный сайт по макетам из PSD. Но проблема в том что для
широких экранов макет сделан с использованием сетки на 16 колонок Bootstrap, для средних
на 12, для маленьких на 5. Выходит что при изменении разрешения экрана, должна меняться
система сеток. И как при этом писать код, если при разном разрешении он будет разный.
    

Ответы

Ответ 1

Вообще странно, что макет изначально рисуется под бутстрап на 16 колонок. Обычно
12 колонок более, чем достаточно и грамотный веб-дизайнер так не будет поступать. Но
всегда есть исключения, истинной причины так поступать не знаю... Поэтому!

Отвечая на Ваш вопрос:

Если всё же нужно сохранить 16 колонок и использовать бутстрап - настройте его на
16 колонок здесь (переменная @grid-columns) для версии 3.4 или здесь (переменная $grid-columns)
для версии 4.2. Полученный сгенерированный бутстрап (если это версия 3.4) подключите
стандартным способом к проекту. В случае с версией 4.2 достаточно просто заменить значение
переменной и сохранить.

Для более мелких разрешений, где необходимо использовать 12 и 5 колонок - используйте
1 колонку как 3 (например 3 справа/слева и 10 в середине). Для объединенных 3-х можно
использовать внутреннюю микросетку из 16 колонок и т.д.

Для 5 колонок - по аналогии: 3 по цетру (по две) и 1 справа/слева (по пять). Внутри
них также микросетка.



P.S. Вы можете менять соотношения на своё усмотрение, я привёл просто один из вариантов
реализации (с микросеткой внутри по 16 колонок).

Bootstrap. Выровнять содержимое по центру контейнера

#html #css #bootstrap

Имеется вот такой контейнер. Как выровнять его содержимое по центру? 


В bootstrap есть тег center-top. Я его пробовал по разному применять, но нужного
результата он мне не дал. Код ниже. 



@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.top-cover {
  width: 100px;
  height: 100px;
  background-color: black;
  margin-right: 10px;	
  margin-top: 15px;
}

.top-name {
  display: block;
  width: 100px;
  max-height: 40px;
  overflow: hidden;
}

  

    

      
Oxxxymiron - Город под подошвой
      
Oxxxymiron - Город под подошвой
      
Oxxxymiron - Город под подошвой
      
Oxxxymiron - Город под подошвой
      
Oxxxymiron - Город под подошвой
      
Oxxxymiron - Город под подошвой

      
Oxxxymiron - Город под подошвой
      
Oxxxymiron - Город под подошвой
      
Oxxxymiron - Город под подошвой
      
Oxxxymiron - Город под подошвой
      
Oxxxymiron - Город под подошвой
      
Oxxxymiron - Город под подошвой
    
  




    

Ответы

Ответ 1

В бутстрапе есть класс .center-block, который превращает элемент в блок и выравнивает
его по центру контейнера. Нужно использовать именно его, а не .center-top или .centered-top.

Чтобы этот класс выровнял блоки по центру ячеек, нужно применить его к самим блокам,
а из .top-cover удалить margin-right: 10px;.

Oxxxymiron - Город под подошвой


Но строки кода и без того чересчур длинные и однообразные. А по сути .center-block
добавляет к блокам margin-left: auto; margin-right: auto;. Поэтому можно задать эти
свойства стилям .top-cover и .top-name, которые вы уже используете, и обойтись без
.center-block. А к .top-name добавить ещё и text-align: center;.

Кроме того, col-lg-2 col-md-3 col-sm-3 col-xs-6 - это то же самое, что и col-lg-2
col-sm-3 col-xs-6. Заменил для красоты на col-lg-2 col-md-3 col-sm-4 col-xs-6. Теперь
при разной ширине экрана получается две, три, четыре или шесть колонок.

Проверьте результат:



@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.top-cover {
  width: 100px;
  height: 100px;
  background-color: black;
  margin-top: 15px;
}

.top-name {
  display: block;
  width: 100px;
  max-height: 40px;
  overflow: hidden;
  text-align: center;
}

.top-cover,
.top-name {
  margin-left: auto;
  margin-right: auto;
}

  

    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой

    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
  



Ответ 2

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.top-cover {
  width: 100px;
  height: 100px;
  background-color: black;
  margin-top: 15px;
}

.top-name {
  display: block;
  width: 100px;
  max-height: 40px;
  overflow: hidden;
  text-align: center;
}

.top-cover,
.top-name {
  margin-left: auto;
  margin-right: auto;
}

  

    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой

    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
  

Не работает .hasClass

#javascript #jquery #bootstrap

Мой скрипт:

$(document).ready(function(){
  if ( $("#menu-xs" ).hasClass('in') ) {
    $( ".main-bg" ).css("height","500px");
  }
});


Айди #menu-xs - это меню, которое появляется с помощью бутстраповского collapse.
Когда оно появляется - ему присваивается класс .in. Данный скрипт почему-то не хочет
видеть этого. Отдельно строка с действием после ифа выполняется. Стоит задача выполнять
эту строку при появлении #menu-xs. Подскажите, будьте добры, в чем может быть проблема.
Благодарю.
    

Ответы

Ответ 1

Ваш скрипт выполняется только один раз - при загрузке страницы. Задача, как я понял,
стоит другая - запускать скрипт при появлении collapse. Для этого вам нужно привязаться
к событию collapse у bootstrap. Вот список этих событий. Вам, вероятно, нужно shown.bs.collapse.
Код будет таким:

$(document).ready(function(){
  $('#menu-xs').on('shown.bs.collapse', function(){
    $( '.main-bg' ).css('height', '500px');
  })
});

Не работает .hasClass

#javascript #jquery #bootstrap

Мой скрипт:

$(document).ready(function(){
  if ( $("#menu-xs" ).hasClass('in') ) {
    $( ".main-bg" ).css("height","500px");
  }
});


Айди #menu-xs - это меню, которое появляется с помощью бутстраповского collapse.
Когда оно появляется - ему присваивается класс .in. Данный скрипт почему-то не хочет
видеть этого. Отдельно строка с действием после ифа выполняется. Стоит задача выполнять
эту строку при появлении #menu-xs. Подскажите, будьте добры, в чем может быть проблема.
Благодарю.
    

Ответы

Ответ 1

Ваш скрипт выполняется только один раз - при загрузке страницы. Задача, как я понял,
стоит другая - запускать скрипт при появлении collapse. Для этого вам нужно привязаться
к событию collapse у bootstrap. Вот список этих событий. Вам, вероятно, нужно shown.bs.collapse.
Код будет таким:

$(document).ready(function(){
  $('#menu-xs').on('shown.bs.collapse', function(){
    $( '.main-bg' ).css('height', '500px');
  })
});

Выравнивания блока по центру другого блока bootstrap

#html #css #bootstrap

    

        
Displaying the Result
        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
    




Есть такая разметка HTML: 

 #promo-block{
    height:300px;
  position: relative;
  z-index: 1;
  text-align: center;
  background: url(img/1920x1080/02.jpg) no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
    min-height:100%;
}


Вот такой CSS:

Как я могу выровнять текст по центру родителя? Выровнять его по горизонтали не составило
труда, но по вертикали никак не получается.
    

Ответы

Ответ 1

#promo-block {
height: 300px;
display: flex;
flex-wrap: wrap;
background: url(img/1920x1080/02.jpg) no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
#promo-block .container{
align-self: center;
display:flex;
flex-wrap: wrap;
}
.col-sm-6 {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

    

        

            
Displaying the Result
            
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
        
    
    




Можно вот-так на флексах.


Ответ 2

Вот пример как можно создать то что вам нужно -




    
        
            
            
        
        
        

          
Yes It's My landing Page
    	  
Under Construction, Coming Soon !!!
        
        
    


Ответ 3

#promo-block {
  height: 800px;
  position: relative;
  z-index: 1;
  text-align: center;
  background: url(img/1920x1080/02.jpg) no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  min-height: 100%;
}

#promo-block>.container {
  height: 100%;
}

#promo-block>.container>.row {
  height: 100%;
}


  

    

      

        
Displaying the Result
        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
      
    
  

Что такое top-level position в HTML?

#html #css #bootstrap

В  документации  Bootstrap 4.1  в разделе Modal  непонятное обозначение
 HTML top-level positions ссылка.

Какие  позиции являются top-level ?

Есть ли какая то общепринятая классификация HTML позиций ?
    

Ответы

Ответ 1

Они имели ввиду свойство z-index которое должно отвечать за позиционирование элемента
по оси Z (ближе к пользователю или дальше), что бы его не перекрывали другие элементы.
(На данный момент это свойство равно $zindex-modal: 1050 !default;)

Как сделать так, чтобы правая колонка всплывала вверх?

#html #css #html5 #вёрстка #bootstrap

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

Код HTML:






    

        

            

                

                    

                        
Информация
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam sed massa sollicitudin, accumsan
                        diam et, luctus elit. Praesent odio est, faucibus a est at,
dictum facilisis mi. Vestibulum a
                        libero odio. Sed nec ullamcorper nulla, ac lobortis odio.
Donec egestas vel risus ac gravida.
                        Curabitur consectetur lobortis auctor. Fusce cursus semper
lorem, ac auctor nunc fermentum sit
                        amet. Pellentesque nec lacus in magna consectetur viverra.
Proin quis turpis laoreet, aliquam
                        est ac, lacinia nibh. Aliquam erat volutpat. Curabitur placerat
consectetur maximus.
                        Mauris accumsan leo non lacus vehicula efficitur.
                    
                    

                        
Фотогалерея
                        Место для фотогалереи
                    
                    

                        
Новости
                        Место для новостей
                    
                
            
            

                

                    
Поиск
                    

                        
                        
                            
                        
                    
                
                

                    
Газета
                    
Содержимое блока
                
                

                    
Контакты
                    

                        
jjj
                    
                
            
        
    




    

Ответы

Ответ 1

Бутстрап умеет менять колонки местами: http://getbootstrap.com/css/#grid-column-ordering

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






    

        

            

                

                    
Поиск
                    

                        
                        
                            
                        
                    
                
                

                    
Газета
                    
Содержимое блока
                
                

                    
Контакты
                    

                        
jjj
                    
                
            
            

                

                    

                        
Информация
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam sed massa sollicitudin, accumsan
                        diam et, luctus elit. Praesent odio est, faucibus a est at,
dictum facilisis mi. Vestibulum a
                        libero odio. Sed nec ullamcorper nulla, ac lobortis odio.
Donec egestas vel risus ac gravida.
                        Curabitur consectetur lobortis auctor. Fusce cursus semper
lorem, ac auctor nunc fermentum sit
                        amet. Pellentesque nec lacus in magna consectetur viverra.
Proin quis turpis laoreet, aliquam
                        est ac, lacinia nibh. Aliquam erat volutpat. Curabitur placerat
consectetur maximus.
                        Mauris accumsan leo non lacus vehicula efficitur.
                    
                    

                        
Фотогалерея
                        Место для фотогалереи
                    
                    

                        
Новости
                        Место для новостей
                    
                
            
        
    

Выравнивание картинки по размеру блока [закрыт]

#css #html5 #вёрстка #bootstrap

        
             
                
                    
                        
                            Закрыт. Этот вопрос не по теме. Ответы на него в данный
момент не принимаются.
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            Хотите улучшить этот вопрос? Переформулируйте вопрос,
чтобы он соответствовал тематике «Stack Overflow на русском».
                        
                        Закрыт 2 года назад.
                                                                                
           
                
        
Здравствуйте!

Использую bootstrap для верстки. Как выравнять по ширине картинку с родительским блоком?



Картинка в этом блоке:


  

    
  



А за ним блок к контентом:


  

    
Здесь будет расположен весь остальной контент.
  



Саму верстку целиком можете посмотреть здесь(уже нельзя).

Спасибо.
    

Ответы

Ответ 1

На самом деле, у вас там нет картинки, это всего лишь отступ другого блока:


Блок этот вот:



И у него на картинке выше я отметил класс, который имеет цвет фона. Решить это можно
вот так:



Другими словами, просто удалите тот класс, ijh, из кода в своем style.css, он вам
не нужен, так как внутри блока с этим классом другие блоки уже имеют класс m_mid_tpl,
который точно также задает вам цвет фона со значением rgb(235, 235, 235).


Ответ 2

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

.ijh {
  background-color: rgb(235, 235, 235);
}


Этого делать не нужно, так как в колонке присутствуют паддинги, которые имеют обратные
отступы из за родительского .row

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


  


    

      не правильно
    

    

      

        правильно
      
    

  



Ответ 3

Чтоб изображение не выходило за пределы блока, выставьте ему max-width;  

img { max-width: 100%; }


Ответ 4

Картинка в div [body > div > div:nth-child(3) > div], у него три класса (col-lg-12,
col-sm-12, col-xs-12), в которых прописано:

padding-right: 15px;
padding-left: 15px;


Сбросьте их у div-контейнера.


Ответ 5

Если изображене выходит за пределы блок, нужно родительскому блоку придать свойство: 

overflow: hidden;

убрать href ссылки для media print

#css3 #html5 #bootstrap #print

При отправки страницы на печать в предварительном просмотре отображаются якоря ссылок
возле каждой ссылки, возможно ли как-то отключить эту функцию?
    

Ответы

Ответ 1

@media print {
  a[href]:after {
    content: "";
  }
}


Разумеется, при этом это переопределение должно идти после стилей бутстрапа.


Ответ 2

Сам решил проблему, буду рад если кому то поможет

a:after{
    content: "" !important;
}

Как Bootstrap переключается между размерами экранов (md-xs)

#css #bootstrap

За счет каких свойств CSS это возможно? С JS я представляю как, какой нибудь if экран_широкий
{ свойства; } else { свойства_для телефонов; }, ну и в таком духе. Но насколько я знаю
в css такого нет. За счет чего достигается эффект, что при изменении ширины браузера
свойства неожиданно начинают браться из xs а не из md например и container начинает
растягиваться на весь экран?
    

Ответы

Ответ 1

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



или вот в 4-ом 
breakpoints тоже с помощью медиа запросов, вот так это выглядит внутри css:


Ответ 2

Медіа запроси 

например: 

 @media (max-width: 600px){
 какойто селектор {
   название свойства: значение свойства;
  }
}

Как в scss/sass импортировать не весь файл, а один стиль запретить?

#css #bootstrap #sass #scss

В bootstrap есть стиль для ссылок и кнопок, выделение точками вокруг элемента + цвет
+ подчеркивание на событии :focus, выглядит это так:

a {
  color: $link-color;
  text-decoration: none;

  &:hover,
  &:focus {
    color: $link-hover-color;
    text-decoration: $link-hover-decoration;
  }

  &:focus {
    @include tab-focus;
  }


и

@mixin tab-focus() {
  // Default
  outline: thin dotted;
  // WebKit
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}


Если outline: none; еще можно сделать после импорта .scss в своем файле, но что делать
с цветом и подчеркиванием, если нужно, чтобы цвет и подчеркивание сохранялись те, что
и были, то есть если была синяя ссылка с подчеркиванием, то при клике она должна оставаться
такой же. Если же прописать конкретный цвет и подчеркивание, то для другой, например
красной ссылки без подчеркивания, она будет изменяться, а не оставаться собой.

То есть, нужно вообще не импортировать эти стили или как то удалить их после импорта.
Ведь редактировать исходники .scss неправильно? Тогда как удалить все :focus ы? 
    

Ответы

Ответ 1

В данном случае необходимо писать свой миксин наподобие 
@mixin tab-focus(), только с указанием параметров, которые вы сможете указывать для
конкретных классов.
получается

@mixin tab-focus($outline_dotted, $outline_offset, $outline_size ) {
  outline: $outline_dotted;
  // WebKit
  outline: $outline_size ;
  outline-offset: $outline_offset
}

a{
&:focus {
    @include tab-focus('none', '-2px', '5px');
  }
}

закладки со свёртываемым контентом

#html5 #css3 #bootstrap

В bootstrap есть отличные nav-tabs и nav-pills которые работают через
data-toggle="tab" создаётся пара секций:


    

       Первая
    
    

       Вторая
    


    

      ...
    
    

      ...
    

     ... другие секции ...



И всё прекрасно, даже есть fade класс который добавляется в атрибут tab-pane чтобы
переключение между вкладок было плавное, но когда много закладочек, и их высота сильно
разнится, особенно превышая стандартную высоту вьюпорта, контент заметно подпрыгивает
на переключениях из за резкозти смены размера контента, так-же в bootstrap есть такая
вещь как accordion с классом collapse который делает плавно сворачивающиеся панельки
между которыми можно переключаться, например вот такие:
http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=accordion

Поскольку я не мастер вёрстки и js а только учусь, подскажите, как можно добавить
свёртывание развёртывание контента, но в эти вот nav-tabs / nav-pills ?

Поскольку я провёл не один день в попытках найти что-то такое в гоголе и яндуксе,
всё что я нашёл это https://css-tricks.com/organic-tabs/
они то как раз делают что надо, но хотелось бы не городить так много всего, а попробовать
реализовать это дело максимально функционалом bootstrap и минимально jQuery.

Я также пробовал добавлять класс "collapse in" в активную и "collapse" в остальные
вкладки и менять data-toggle на collapse как в аккордионах, но вкладки перестают реагировать
на нажатия.

Подскажите люди добрые как-же победить этот вопрос?

Благодарю за внимание.
    

Ответы

Ответ 1

Задача: Построить закладки tabs или таблетки pills с эффектом сворачивания и разворачивания
как у аккордеона. При этом обойтись штатными средствами бутстрапа, не дописывая свои
скрипты и не добавляя чужие.

Решил в три этапа. Код в конце ответа показывает результаты всех трёх этапов.

1) Будем строить таблетки, потому что они ярче :) Начинаем строить не от таблеток
к аккордеону, а от аккордеона к таблеткам. Берём из описания  бутстрапа пример с аккордеоном
и переставляем фрагменты кода, чтобы из трёх панелей получилось две. В верхнюю собираем
все три заголовка, а в нижнюю - тексты к ним. 

2) Скрещиваем заголовки


  

    
      Collapsible Group Item #2
    
  



с таблетками из другого примера бутстрапа

Profile


и получаем


    
      Collapsible Group Item #2
    



3) Чтобы активная таблетка выделялась синим, нужно пристроить class="active" и data-toggle="tab".
Первый атрибут относился к пункту списка 
, а второй - к ссылке внутри этого пункта.
Но у ссылки уже есть data-toggle="collapse". Поэтому оба оставшихся атрибута назначаем
пункту списка.

Результат









  

    
1)
    


      

        

          

            

              
                Item #1
              
            
          
          

            

              
                Item #2
              
            
          
          

            

              
                Item #3
              
            
          
        
        

          

            

              
Anim pariatur cliche reprehenderit...
            
          
          

            

              
Anim pariatur cliche reprehenderit...
              
Anim pariatur cliche reprehenderit...
            
          
          

            

              
Anim pariatur cliche reprehenderit...
              
Anim pariatur cliche reprehenderit...
              
Anim pariatur cliche reprehenderit...
            
          
        
      

    
  

  
  

    
2)
    


      

        

            
              Item #1
            
        
        

            
              Item #2
            
        
        

            
              Item #3
            
        
      
    

      

        

          

            
Anim pariatur cliche reprehenderit...
          
        
        

          

            
Anim pariatur cliche reprehenderit...
            
Anim pariatur cliche reprehenderit...
          
        
        

          

            
Anim pariatur cliche reprehenderit...
            
Anim pariatur cliche reprehenderit...
            
Anim pariatur cliche reprehenderit...
          
        
      
    

    
  

  
  

    
3)
    

  
        

          

              
                Item #1
              
          
          

              
                Item #2
              
          
          

              
                Item #3
              
          
        
      

        

          

            

              
Anim pariatur cliche reprehenderit...
            
          
          

            

              
Anim pariatur cliche reprehenderit...
              
Anim pariatur cliche reprehenderit...
            
          
          

            

              
Anim pariatur cliche reprehenderit...
              
Anim pariatur cliche reprehenderit...
              
Anim pariatur cliche reprehenderit...
            
          
        
      

    
  


  






Можно посмотреть живьём и в песочнице.

Не срабатывает required у select в модальном окне

#javascript #html #jquery #bootstrap #валидация

Имеется следующая ситуация, есть на странице две кнопки, которые лежат рядом друг
с другом Сформировать программу из краткосрочно плана и Сформировать отчет сравнение
с краткосрочным планом по нажатию на которые открывается модальное окно:

HTML-код модального окна и кнопок открытия модального окна:





  

    

      
      

        
        
Выбор краткосрочного плана
      
      

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

        
        
      
    
  



Если нажать на одну из кнопок, то модальное окно выглядит примерно так:



JavaScript код, который обрабатывает нажатия на кнопки на странице, в том числе и
в модальном окне:

function fillChoisePlanSelector() {
  console.log('fillChoisePlanSelector');

  $.get('@Url.Action("GetShortTermPlanList", "Programs")', {
      year: 2016 })
    .done(function(result) {
      var parsedResult = JSON.parse(result);
      $.each(parsedResult, function(index, elem) {
        $('#choise-plan')
          .append($('', {
            value: elem.Id,
            text: elem.Name
          }));
      });

      AjaxAbsoluteLoaderOff();
      $('#modal-choise-plan').modal();
    })
    .error(function() {
      AjaxAbsoluteLoaderOff();
    });
}

$('#btn-generate-program-from-plan').click(function() {
  AjaxAbsoluteLoaderOn();
  $('#btn-click-type').val('generate-program-from-plan');
  $('#btn-choise-plan-ok').text('Сформировать программу');
  fillChoisePlanSelector();
});

$('#get-report-compare-with-plan').click(function() {
  AjaxAbsoluteLoaderOn();
  $('#btn-click-type').val('report-compare-with-plan');
  $('#btn-choise-plan-ok').text('Сформировать отчет');
  fillChoisePlanSelector();
});

$('#btn-choise-plan-ok').click(function(e) {
  e.preventDefault();

  if ($('#btn-click-type').val() === 'report-compare-with-plan') {
    //TODO: Сформировать отчет
    console.log('Сформировать отчет');
  } else {
    //TODO: Сформировать программу
    console.log('Сформировать программу');
  }
});


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



Но вот в чем беда: если я ничего не выбираю (остается надпись --Выберите план--)
и нажимаю на кнопку Сформировать программу/отчет (надпись меняется, в зависимости от
кнопки, на которую нажали перед открытием модалки, видно в JS) то required не срабатывает,
модалка закрывается и JS продолжает свое выполнение. 

Что я делаю не так, в чем причина такого поведения и как исправить, чтобы required
сработал?
    

Ответы

Ответ 1

Методом проб и ошибок выяснил, что если у кнопки убрать data-dismiss="modal" и в
JavaScript убрать обработку нажатия на кнопку $('#btn-choise-plan-ok').click то валидация
начинает работать. При любой попытке навесить обработку нажатия на кнопку - валидация
перестает работать. Поэтому было решено перенести форму внутрь модального окна (она
была вокруг модалки):


  

    

      

       
       

         
         
Выбор краткосрочного плана
       
       

         
Выберите из предложенного списка краткосрочный план./p>
         
           --Выберите план--
         
       
       

        
        
       
      
    
  



И навесить обработку отправки данных с формы:

$('#form-choise-plan').submit(function(e) {
    e.preventDefault();
    $('#modal-choise-plan').modal('hide');

    if ($('#btn-click-type').val() === 'report-compare-with-plan') {
        //TODO: Сформировать отчет
        console.log('Сформировать отчет');
    } else {
        //TODO: Сформировать программу
        console.log('Сформировать программу');
    }
});


Оставшийся код остался без изменений. Таким образом валидация обязательного поля
работает: