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

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

Есть модальная форма.
Вызывается таким образом:
Код: 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:08
| Ответить | Цитировать | Написать  
Вопросы по Bootstrap
    #39135455
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
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>


Криво выглядит, но зато работает нормально и на мобильных устройствах, и на десктопе.
...
Рейтинг: 0 / 0
23.12.2015, 10:18
| Ответить | Цитировать | Написать  
Вопросы по Bootstrap
    #39135497
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
href="javascript:void(0)"
...
Рейтинг: 0 / 0
23.12.2015, 10:50
| Ответить | Цитировать | Написать  
Вопросы по Bootstrap
    #39135499
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
Значение href не важно.
Выявилось два бага (ну или я что-то неправильно делаю):
1. На мобильном устройстве (андроид 4, стоковый браузер) кнопки внутри формы всегда вызывают отправку формы, поэтому использовать их для каких-то интерактивных действий нельзя.
2. Если у элемента-контрола есть атрибут href (его значение не важно, оно может быть даже пустым), то модальный диалог, вызываемый этим контролом, открывается криво.
...
Рейтинг: 0 / 0
23.12.2015, 10:54
| Ответить | Цитировать | Написать  
Вопросы по Bootstrap
    #39135505
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
Хотя да. Если задать href=javascript:void(0), то глюка нет.
Но и смысла тогда в такой ссылке нет.
Идея ведь в том, что если JS отключен, то сработает обычный переход по ссылке, а если не отключен, то откроется модальный диалог.
...
Рейтинг: 0 / 0
23.12.2015, 10:56
| Ответить | Цитировать | Написать  
Вопросы по Bootstrap
    #39135582
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
Alibek B.Идея ведь в том, что если JS отключен, то сработает обычный переход по ссылке, а если не отключен, то откроется модальный диалог.Тогда оставить href со ссылкой, а скриптом при открытии страницы прописывать туда void. Нет скриптов - нет void - работает ссылка.
...
Рейтинг: 0 / 0
23.12.2015, 11:30
| Ответить | Цитировать | Написать  
Вопросы по Bootstrap
    #39138531
Фотография Тshаmil
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Тshаmil
Участник
AntonariyAlibek B.Идея ведь в том, что если JS отключен, то сработает обычный переход по ссылке, а если не отключен, то откроется модальный диалог.Тогда оставить href со ссылкой, а скриптом при открытии страницы прописывать туда void. Нет скриптов - нет void - работает ссылка.
это треш, а не решение.
...
Рейтинг: 0 / 0
26.12.2015, 02:54
| Ответить | Цитировать | Написать  
Вопросы по Bootstrap
    #39138532
Фотография Тshаmil
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Тshаmil
Участник
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, 02:58
| Ответить | Цитировать | Написать  
Вопросы по Bootstrap
    #39138533
Фотография Тshаmil
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Тshаmil
Участник
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, 03:03
| Ответить | Цитировать | Написать  
Вопросы по Bootstrap
    #39138585
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
Действительно, зря на мобильные устройства наговаривал.
Задал type=button, теперь работает нормально.
...
Рейтинг: 0 / 0
26.12.2015, 11:50
| Ответить | Цитировать | Написать  
Вопросы по Bootstrap
    #39138874
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
Подскажите еще.
На странице авторизации есть модальный диалог для напоминания пароля.
В этом диалоге при сабмите делается запрос на сервер, в ответ сервер возвращает результат запроса в 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:00
| Ответить | Цитировать | Написать  
Вопросы по Bootstrap
    #39138883
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
Частично разобрался, символ решетки забыл добавить: $('#auth-restore-form').
А в целом алгоритм правильный?
...
Рейтинг: 0 / 0
27.12.2015, 18:29
| Ответить | Цитировать | Написать  
Вопросы по Bootstrap
    #39138986
Фотография Тshаmil
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Тshаmil
Участник
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:02
| Ответить | Цитировать | Написать  
Вопросы по Bootstrap
    #39138987
Фотография Тshаmil
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Тshаmil
Участник
а, еще желательно, что бы избежать конфликтов с другими библиотеками которые используют функцию $, и быть уверенным что скрипт сработает после полной загрузки дома, делать так:

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


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