Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Вопросы по Bootstrap / 19 сообщений из 19, страница 1 из 1
21.12.2015, 14:56
    #39133184
Alibek B
Alibek B
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вопросы по Bootstrap
Надоело изобретать велосипеды, решил использовать Bootstrap3.
Подскажите, есть ли что-то типа путеводителя или гайдлайна по нему?
Скажем, есть шаблон Cover .
Мне нужно в подобной странице вывести заголовок, пару абзацев текста, а затем указать небольшую сноску.
И я не могу найти, есть ли специальный стиль для сносок (пока его не нашел) или нужно добавлять свой стиль?
Или другими словами, можно считать, что если нужного мне элемента или стиля нет в компонентах , значит их нет и нужно добавлять свой?
________________________
Мы смотрим с оптимизмом...
...в оптический прицел.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.12.2015, 15:53
    #39133306
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вопросы по Bootstrap
я этим пользуюсь: http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-tables.php
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.12.2015, 15:58
    #39133315
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вопросы по Bootstrap
авторИли другими словами, можно считать, что если нужного мне элемента или стиля нет в компонентах, значит их нет и нужно добавлять свой?не обязательно, существует шрифт bootstrap awesome, добавляющий еще over 100500 иконок.

 
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.12.2015, 16:41
    #39133449
Alibek B
Alibek B
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вопросы по Bootstrap
Antonariyя этим пользуюсь: http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-tables.php
О, спасибо.
А то я пробовал этим пользоваться: http://www.bootply.com
Но им пользоваться не очень удобно.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.12.2015, 10:08
    #39135442
Alibek B
Alibek B
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вопросы по Bootstrap
Обнаружил странный глюк.

Есть модальная форма.
Вызывается таким образом:
Код: html
1.
2.
1. <button class="btn btn-link" data-toggle="modal" data-target="#auth-restore">Напомнить пароль</button>
2. <a href="/auth?restore" class="btn btn-link" data-toggle="modal" data-target="#auth-restore">Напомнить пароль</a>



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

Но мне бы хотелось использовать именно ссылку (чтобы на случай параноидальных настроек браузера клиент прошел по ссылке).
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.12.2015, 10:18
    #39135455
Alibek B
Alibek B
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вопросы по Bootstrap
Хм... Не понос, так золотуха.
На мобильном устройстве при нажатии на button внутри form происходит сабмит, даже если это кнопка без type=submit.
Сделал так:
Код: html
1.
<a class="btn btn-link" data-link="/auth?restore"  data-toggle="modal" data-target="#auth-restore">Напомнить пароль</a>


Криво выглядит, но зато работает нормально и на мобильных устройствах, и на десктопе.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.12.2015, 10:50
    #39135497
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вопросы по Bootstrap
href="javascript:void(0)"
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.12.2015, 10:54
    #39135499
Alibek B
Alibek B
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вопросы по Bootstrap
Значение href не важно.
Выявилось два бага (ну или я что-то неправильно делаю):
1. На мобильном устройстве (андроид 4, стоковый браузер) кнопки внутри формы всегда вызывают отправку формы, поэтому использовать их для каких-то интерактивных действий нельзя.
2. Если у элемента-контрола есть атрибут href (его значение не важно, оно может быть даже пустым), то модальный диалог, вызываемый этим контролом, открывается криво.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.12.2015, 10:56
    #39135505
Alibek B
Alibek B
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вопросы по Bootstrap
Хотя да. Если задать href=javascript:void(0), то глюка нет.
Но и смысла тогда в такой ссылке нет.
Идея ведь в том, что если JS отключен, то сработает обычный переход по ссылке, а если не отключен, то откроется модальный диалог.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.12.2015, 11:30
    #39135582
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вопросы по Bootstrap
Alibek B.Идея ведь в том, что если JS отключен, то сработает обычный переход по ссылке, а если не отключен, то откроется модальный диалог.Тогда оставить href со ссылкой, а скриптом при открытии страницы прописывать туда void. Нет скриптов - нет void - работает ссылка.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.12.2015, 02:54
    #39138531
Тshаmil
Тshаmil
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вопросы по Bootstrap
AntonariyAlibek B.Идея ведь в том, что если JS отключен, то сработает обычный переход по ссылке, а если не отключен, то откроется модальный диалог.Тогда оставить href со ссылкой, а скриптом при открытии страницы прописывать туда void. Нет скриптов - нет void - работает ссылка.
это треш, а не решение.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.12.2015, 02:58
    #39138532
Тshаmil
Тshаmil
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вопросы по Bootstrap
Alibek B.Хотя да. Если задать href=javascript:void(0), то глюка нет.
Но и смысла тогда в такой ссылке нет.
Идея ведь в том, что если JS отключен, то сработает обычный переход по ссылке, а если не отключен, то откроется модальный диалог.

это делается скриптом.
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
(function($){
   $('document').ready(function(){
        $('[data-toggle="modal"]').click(function(e){
          var modalId = $(this).data('tagrget');
          $(modalId).modal('show');
          e.preventDefault();
       });
   });
})(jQuery)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.12.2015, 03:03
    #39138533
Тshаmil
Тshаmil
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вопросы по Bootstrap
Alibek B.Хм... Не понос, так золотуха.
На мобильном устройстве при нажатии на button внутри form происходит сабмит, даже если это кнопка без type=submit.
Сделал так:
Код: html
1.
<a class="btn btn-link" data-link="/auth?restore"  data-toggle="modal" data-target="#auth-restore">Напомнить пароль</a>


Криво выглядит, но зато работает нормально и на мобильных устройствах, и на десктопе.
у button по умолчанию type=submit потому форма и отправляется.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.12.2015, 11:50
    #39138585
Alibek B
Alibek B
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вопросы по Bootstrap
Действительно, зря на мобильные устройства наговаривал.
Задал type=button, теперь работает нормально.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.12.2015, 18:00
    #39138874
Alibek B
Alibek B
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вопросы по Bootstrap
Подскажите еще.
На странице авторизации есть модальный диалог для напоминания пароля.
В этом диалоге при сабмите делается запрос на сервер, в ответ сервер возвращает результат запроса в JSON.
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
...
<button class="btn btn-link" type="button" data-link="/auth?restore"  data-toggle="modal" data-target="#auth-restore">Напомнить пароль</button>
...
<div class="modal fade" id="auth-restore" tabindex="-1" role="dialog" aria-labelledby="auth-restore-caption">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="auth-restore-caption">Напомнить пароль</h4>
      </div><!-- /.modal-header -->
      <div class="modal-body">
        <form class="form" id="auth-restore-form">
          <div class="form-group">
            <label for="auth-restore-login" class="control-label">Логин</label>
            <div class="input-group">
              <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
              <input id="auth-restore-login" name="login" type="text" class="form-control" required autofocus>
              <div class="input-group-btn">
                <button id="auth-restore-send" class="btn btn-default" type="submit" title="Отправить напоминание по SMS"><span class="glyphicon glyphicon-chevron-right"></span></button>
              </div>
            </div>
          </div>
        </form><!-- /.form -->
      </div><!-- /.modal-body -->
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
      </div><!-- /.modal-footer -->
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
...
<script>
  $(function(){
    $('auth-restore-form').on('submit', function(e){
      e.preventDefault();
      $.ajax({
        url: "/request.php?auth-restore",
        type: "POST",
        data: $("auth-restore-form").serialize(),
        dataType: "json",
        success: function(data){
          alert("Successfully submitted.")
        },
        error: function(data){
          alert("Failed submitted.")
        }
      });
    }); 
  });
</script>


Но preventDefault почему-то не работает, при нажатии на кнопку браузер пытается перейти на адрес ?login=123
По какой причине onSubmit не переназначается?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.12.2015, 18:29
    #39138883
Alibek B
Alibek B
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вопросы по Bootstrap
Частично разобрался, символ решетки забыл добавить: $('#auth-restore-form').
А в целом алгоритм правильный?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.12.2015, 00:02
    #39138986
Тshаmil
Тshаmil
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вопросы по Bootstrap
Alibek B.Частично разобрался, символ решетки забыл добавить: $('#auth-restore-form').
А в целом алгоритм правильный?
практически - да, только когда делается асинхронный запрос, нет смысла вешать все на событие submit, это событие происходит при отправке формы. Т.е. фактически запрос будет отправлен, два раза но остановлен с помощью preventDefault.

меняем тип кнопки на button:
<button id="auth-restore-send" class="btn btn-default" type="button" title="Отправить напоминание по SMS"><span class="glyphicon glyphicon-chevron-right"></span></button>

и вешаем событие на клик по кнопке:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
<script>
  $(function(){
    $('#auth-restore-send').on('click', function(e){
      e.preventDefault();
      $.ajax({
        url: "/request.php?auth-restore",
        type: "POST",
        data: $("#auth-restore-form").serialize(),
        dataType: "json",
        success: function(data){
          alert("Successfully submitted.")
        },
        error: function(data){
          alert("Failed submitted.")
        }
      });
    }); 
  });
</script>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.12.2015, 00:05
    #39138987
Тshаmil
Тshаmil
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вопросы по Bootstrap
а, еще желательно, что бы избежать конфликтов с другими библиотеками которые используют функцию $, и быть уверенным что скрипт сработает после полной загрузки дома, делать так:

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
(function($){
   $('document').ready(function(){

  $(function(){
    $('#auth-restore-send').on('click', function(e){
      e.preventDefault();
      $.ajax({
        url: "/request.php?auth-restore",
        type: "POST",
        data: $("#auth-restore-form").serialize(),
        dataType: "json",
        success: function(data){
          alert("Successfully submitted.")
        },
        error: function(data){
          alert("Failed submitted.")
        }
      });
    }); 
  });

   });
})(jQuery)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.01.2016, 12:52
    #39144037
Alibek B
Alibek B
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вопросы по Bootstrap
Еще подскажите по верстке?
В Bootstrap основная сетка содержит 12 колонок.
Мне нужно на странице отобразить основное содержимое, а справа показать информационную панель.
Для этого у меня используется колонка .col-md-8 с основным содержимым и колонка .col-md-4, в которой содержится панель.
Но высота основного содержимого больше, чем высота информационной панели, поэтому в правой части страницы остается свободная треть рабочего пространства.
А можно ли эту панель отобразить просто как float:right (с сохранением адаптивности Bootstrap, разумеется)?
Здесь примеров плавающей панели я не нашел, в при поиске натыкался только на довольно сомнительные варианты.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Вопросы по Bootstrap / 19 сообщений из 19, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]