Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Bootstrap иконки в списке

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

  1.  
  2. <ul id="BottomInfo">
  3.                         <li>
  4.                         <span class="glyphicon glyphicon-earphone"></span>
  5.                         <a><?=View::ReturnBlock("Address","html");?></a>
  6.                     </li>
  7.                     <li>
  8.                         <span class="glyphicon glyphicon-envelope"></span>
  9.                         <a href="mailto:<?=View::ReturnBlock("Email","html");?>"><?=View::ReturnBlock("Email","html");?></a>
  10.                     </li>
  11.                     <li>
  12.                         <span class="glyphicon glyphicon-map-marker"></span>
  13.                         <a href="<?=View::ReturnBlock("PhoneTop","html");?>">
  14.                                                         <?=View::ReturnBlock("PhoneTop","title");?>
  15.                         </a>
  16.                     </li>
  17.                 </ul>
  18.  


CODE (html):

  1.  
  2. #BottomInfo{margin-top: 7px;padding: 5px 0;}
  3. #BottomInfo li{ display:block; margin-bottom: 10px; position:relative;}
  4. #BottomInfo li span{ color:#00a1e6; font-size:1.1em;}
  5. #BottomInfo li a{ color:#FFFFFF;font-size:1.1em;line-height:17px;}
  6.  
  7. #BottomInfo li p::before{ padding-left:10px; display:inline-block;}
  8. #BottomInfo li p{ padding-left:10px; display:inline-block;}
  9.  

Но если происходит переход на следующую строку, то эта строка упорно лезет пол иконку (без отступа слева)
Прикреплено изображение

(Отредактировано автором: 24 Января, 2017 - 23:04:33)

Ответ:
немного исправил:
Вопрос: расскажите про Bootstrap. где он должен быть, какую среду разработки использовать?

решил поиграться с Bootstrap.
не часто занимался с JS фреймворками, поэтому в недоумении зачем все эта методика инсталлирования которая описана на сайте:
чтоб заинсталлировать нужен "bower", чтоб поставить "bower" нужен "npm", потом еше надо какой то "Grunt" поставить.
врезультате всей написанной методики все залезло в user\appdata\npm\bower\node_modules\bower_components\bootsrap...
еще где то в этой цепочке обязатеьно надо было поставить "git".
и что теперъ с этим всем делать? с какой стороны к этому всему подлезть? что запускать?
не хватило терпения дальше копатъся, взял тот же дистрибутив от Bootstrap и засунул традиционную в папку htdocs в apache, где остальные библиотеки JS. туда же в отдельные папки записал пару Bootstrap-html-шаблонов со стилями.
только тогда все "схватилось" и шаблоны заработали. вроде ничего другого и ненадо.

как правильно работать с Bootstrap, где должны быть его библиотеки, как он должен быть корректно заинсталлирован?
и надо ли все ето npm, bower,git, Grunt?
вообще какой отладчик лучше использовать для Bootstrap и других JS фреимворков?
Ответ:
oaken
Alex123F
там конкретно втирают что надо все это делать то что я написал выше.
Ты ошибаешся, в самом верху упомянутой страницы есть большая кнопка Download Bootstrap, чуть ниже - раздел Bootstrap CDN. Это именно то что тебе нужно.
Все остальные способы установки используются в фреймворках типа NodeJs для облегчения жизни разработчику по отслеживанию версионности и зависимостей между пакетами.
Вывод, если ты не знаешь что это - оно тебе не нужно.
А так да, бутстрап серьезный пакет, поэтому предоставляет практически любые способы установки под любые фреймврки, а как иначе-то?


ладно, будем считать что я пропустил мимо ушей эту "кнопку" :).. но пока мало что нового, познавательного.
скажитe хоть кто-нибуть какую среду разработки для JS удобно щас использовать?
есть смысл в WebStrom или есть что то более резонное?
Вопрос: bootstrap верстка

для верстки надо подключить /bootstrap.min.css или ему нужен обязательно bootstrap.min.js?
bootstrap-theme.min.css
Ответ: Только учти ! одну вещь, при зайди на сайт bootstrap зайди в examples и найди там SIDEBAR пример,
Просмотри его сурс ! и делай свой сайт по такому же методу, как там - в плане подключение библиотек - файлов !
Тогда у тебя будет работать верстка под все возможный старые браузеры (IE) которые поддерживает сам bootstrap !
Иначе если сам будет подключать в не правильном порядке, то верста будет лететь до 9 версии internet explorer.
Это так, что бы не мучались потом :) как я
Вопрос: Вертка landing page при помощи bootstrap 3

Всем привет
Делаю свой первый landing page при помощи bootstrap 3, шаблон сделал в фотошопе. Начал версту и тут трабл, делаю шапку но у меня лого с текстом не идет в один блок, а просто текст идет ниже логотипа и все остальное. Что я делаю не так, код ниже. Прошу помощи.
Код

<body>
  <header class="container">
   <div class="row">
        <div class="col-md-3"><img src="img/logo.png" alt="logo.png"></div>
        <div class="col-md-4"><h1>Qualified Technical Group</h1><br \>Пн-Пт: 10.00 - 19.00 <br \> Сб: 10.00 - 17.00 </div>
        <div class="col-md-3"></div>
        <div class="col-md-2"></div>
    </div>
      
      
  </header> 
   
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  
  <footer></footer>
     
</body>

Ответ:
Всем привет
Делаю свой первый landing page при помощи bootstrap 3, шаблон сделал в фотошопе. Начал версту и тут трабл, делаю шапку но у меня лого с текстом не идет в один блок, а просто текст идет ниже логотипа и все остальное. Что я делаю не так, код ниже. Прошу помощи.
Код

<body>
  <header class="container">
   <div class="row">
        <div class="col-md-3"><img src="img/logo.png" alt="logo.png"></div>
        <div class="col-md-4"><h1>Qualified Technical Group</h1><br \>Пн-Пт: 10.00 - 19.00 <br \> Сб: 10.00 - 17.00 </div>
        <div class="col-md-3"></div>
        <div class="col-md-2"></div>
    </div>
      
      
  </header> 
   
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  
  <footer></footer>
     
</body>

Вопрос: Эффект перекатывания (bootstrap)

Здравствуйте, требуется, чтобы при наведении на один из блоков меню в котором есть иконка, эта иконка менялась на другую(такую же только другого цвета)
HTML5
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html>
<head>
      <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>
 
    <!-- Bootstrap -->
    <link href="/css/bootstrap.css" rel="stylesheet">
      <link href="/style.css" rel="stylesheet">
 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
 
<body>
    <div class = "container-fluid">
        
    <div class = "row">
        
        <div class = "navbar navbar-inverse">
            
                <div class = "navbar-header">
                    <button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target ="#responsive-menu">
                        <span class = "sr-only">Открыть навигацию</span>
                        <span class = "icon-bar"></span>
                        <span class = "icon-bar"></span>
                        <span class = "icon-bar"></span>
                    </button>
                </div>
                
                <div class = "collapse navbar-collapse" id = "responsive-menu">
                    <ul class = "nav navbar-nav">
                        
                        <li>
                            <div class = "container-fluid img1">
                                
                                
                            </div>
                            <a href = "">Главная</a>
                        </li>
                        
                        <li href = "#">
                            <div class ="container-fluid img2">
                                
                            </div>
                            <a href = "#">Продукция</a>
                        </li>
                        
                        <li><a href = "#">История</a></li>
                        
                        
                        <li>
                            <div class = "container-fluid img3">
                                
                            </div>
                            <a href = "#">О нас</a>
                        </li>
                    </ul>
                </div>
            
        </div>
    </div>
 
            
    </div>
    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/js/bootstrap.js"></script>
</body>
 
 
</html>
CSS
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
51
52
53
54
55
56
57
58
59
60
.navbar{
    float:left;
    height:100vh;
    margin:0;
    padding:0;
    border-radius:0px;
    background:#212528;
}
.nav li, a{
    
    display:block;
    clear:both;
    width:250px;
    margin:0;
    padding-right:20px;
    text-align: right;
}
 
.nav li:hover{
    background: #1c2022
}
.nav .container-fluid{
    position: absolute;
    margin-top:15px;
    margin-left:15px;
}
.img1{
    background:url(/img/home.png);
    background-repeat:no-repeat;
    display:block;
    height:16px;
}
 
.img2{
background:url(/img/products.png);
    background-repeat:no-repeat;
    display:block;
    height:20px;    
}
.img3{
background:url(/img/aboutUS.png);
    background-repeat:no-repeat;
    display:block;
    height:20px;    
}
.nav img{
    
    top:16px;
    right:200px
}
.nav, .navbar-nav, .collapse{
    margin:0;
    padding:0;
}
 
.collapse{
    margin-top:70px;
    
    padding-left:3px
}
Ответ: Dmitri446, в чём проблема? Вставьте иконку фоном и при наведении мыши меняйте фон... Для примера:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul{list-style: none}
        li{height:40px; padding:20px 50px; vertical-align: middle; background: url(images/list.png) no-repeat left center}
        li:hover{height:40px; background: url(images/list_hover.png) no-repeat left center}
        a{text-decoration: none; line-height:40px}
    </style>
</head>
<body>
    <ul>
        <li><a href="#">Пункт 1</a></li>
    </ul>
</body>
</html>
Вопрос: не отображаются bootstrap glyphicons

Когда index.html находится в той же папке, где и fonts, js, css векторные иконки отображаются
        <link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet" href="css/bootstrap-theme.css">
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<script src="js/bootstrap.min.js" type="text/javascript"></script>
	

Но как только я его перекладываю в папку(ну и соответственно меняю путь к файлам bootstrap) все стили и вообще все работает, кроме этих иконок. Не понимаю почему. Буду признателен если кто объяснит доступно.
        <link rel="stylesheet" href="../css/bootstrap.css">
	<link rel="stylesheet" href="../css/bootstrap-theme.css">
	<script src="../js/jquery.min.js" type="text/javascript"></script>
	<script src="../js/bootstrap.min.js" type="text/javascript"></script>
	
Ответ: big-duke,

Большое спасибо!!!!!! Эта статья действительно решила проблему!!!

If anyone are using local resource and facing this problem in firefox. You can go to about:config and change the security.fileuri.strict_origin_policy preference to false
Вопрос: как при помощи Bootstrap вывести иконку на странице?

как при помощи Bootstrap вывести иконку?
Ничего выводит:

Расположение файлов

project\css\bootstrap.css
project\img\glyphicons-halflings.png
project\index.html


<html>
<head>
  <title>Page Title</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>

</head>

<body>
<form  align='center'>

Form:
<br>
<span class="glyphicon glyphicon-phone"></span>

</form>
 
</body>

</html>
Ответ: mightyducksfan,
Вопрос: Текстовые поля в Bootstrap

Здравствуйте.
Использую Bootstrap. При добавлении в блок текстового поля таким способом:
HTML5
1
<input type="text" class="form-control" size="5" name="n1" id="n1">
это текстовое поле растягивается на весь блок. Как изменить его размер? Мне в него надо вводить небольшое число и большой размер не нужен.
Ответ:
CSS
1
2
3
.form-control input[type="text"] {
    width: 300px;
}
Также можно добавить padding, чтобы текст не "вылазил" дальше, чем надо (если там иконка поиска или еще что).
Вопрос: Как на Bootstrap спозиционировать menu?

Есть вот такая вот менюшка на Bootstrap. Никак не могу понять, как элементы списка разместить справа. Задаю им float:right — никакой реакции. Также пробовал прописывать ul.navbar-right, но это сдвигало menu лишь пикселей на 5.

Даже пробовал компоненту <a href="#" class="navbar-brand">MY<span>FOLIO</span></a> задать margin-right:50%, но и это ничего не изменило. Кто-то может подсказать, как сдвинуть li вправо?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="row">
            <div class="navbar navbar-inverse navbar-static-top">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#responsive-menu">
                            <span class="sr-only">Открыть навигацию</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a href="#" class="navbar-brand">MY<span>FOLIO</span></a>
                    </div>
                    <div class="collapse navbar-collapse" id="responsive-menu">
                        <ul class="nav navbar-nav">
                            <li><a href="#">HOME</a></li>
                            <li><a href="#">ABOUT ME</a></li>
                            <li><a href="#">SERVICES</a></li>
                            <li><a href="#">MY WORK</a></li>
                            <li><a href="#">CONTACT ME</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
Ответ: Вот если еще актуально...
CSS
1
class="pull-right"
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    
<div class="container">
  <h2>Example</h2>
  <div class="pull-left">Float an element to the left</div>
  <div class="pull-right">Float an element to the right</div>
</div>
 
</body>
</html>
Вопрос: bootstrap carousel периодически падает на TV браузере

Коллеги, может кто сталкивался с проблемой, что нибудь посоветуйте:
Дано:
tv samsung, шнурком в сети, с tizen browser, в котором должен в bootstrap 2 карусели крутиться произвольный контент, смена слайдов в коде.

Проблема:
периодически (после длительной нормальной работы) появляется окно "настроить список каналов", какой то стартовый режим для телевизора, как мне пояснил мой коллега, это происходит из-за краха браузера. Все idle для TV disabled. Пробовал убирать из карусели iframe, т.е. крутились только img - максимально легкое для браузера содержимое - тоже самое.

Решение, ломаться вроде не чему:
<div class="carousel">
    <div class="carousel-inner ">
        <div class="item" data-delay="10">
            <iframe src="" data-src="http://...">Ваш браузер не поддерживает плавающие фреймы!</iframe>
        </div>
        <div class="item" data-delay="10">
            <img src="" data-src="http://...">
        </div>
        ....
    </div>
</div>


    function nextFrame() {
        $("div:not('.active')").find("iframe").attr('src','');
        //
        $carousel.carousel("next");
        //
        var $slide = $('div.active');
        var $element = $slide.children().first();
        var $tag = $element.get(0).tagName;
        //
        if($tag == "IFRAME"){
            var src = $element.attr("data-src");
            src = src.split("%nocache%").join(Date.now());
            $element.attr("src", src);
        }
        var $delay = parseInt($slide.attr('data-delay'));
        setTimeout(nextFrame, $delay*1000);
    }
    $(function() {
        $carousel = $('.carousel');
        $carousel.carousel({
            interval: false,
            pause: true
        });
        nextFrame();
    });
Ответ: крендель,

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