Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.85/20: Рейтинг темы: голосов - 20, средняя оценка - 4.85
NAG
8 / 8 / 1
Регистрация: 15.03.2009
Сообщений: 267
1

резиновый макет с bootstrap

10.07.2013, 13:27. Просмотров 3617. Ответов 4
Метки нет (Все метки)

НЕ получается доверстать макет с бутстрапом (первый раз с ним работаю).
Как сделать что бы:
1) меню с классом ".top-nav" центрировалось по вертикали
2) в пунктах меню с классом ".nav-vert" на задний фон пунктов меню поставить изображение и оно тянулось при разных экранах моб.телефонов.

В приложение набросок макета.
html код
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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">
 
    <!--link rel="stylesheet/less" href="less/bootstrap.less" type="text/css" /-->
    <!--link rel="stylesheet/less" href="less/responsive.less" type="text/css" /-->
    <!--script src="js/less-1.3.3.min.js"></script-->
    <!--append ‘#!watch’ to the browser URL, then refresh the page. -->
    
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
 
  <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
  <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
  <![endif]-->
 
  <!-- Fav and touch icons -->
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
  <link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
  <link rel="shortcut icon" href="img/favicon.png">
  
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/scripts.js"></script>
</head>
 
<body>
<div class="container-fluid">
    <div class="row-fluid" id="header">
        <div class="span6 width50 floatleft">
            <a href="/" class="logo">
                <img src="img/logo.png">
            </a>
        </div>
        <div class="span6 width50 floatleft">
            <ul class="navbar top-nav">
                <li>
                    <a href="#"><i class="own-icon o-icon-home"></i> Home</a>
                </li>
                <li><a href="#"><i class="own-icon o-icon-user"></i>Username</a></li>
            </ul>
        </div>
    </div>
    <div class="row-fluid" id="imgbox">
        <div class="span12">
            <img src="img/poster.png">
        </div>
    </div>
    <div class="row-fluid" id="md-nav">
        <div class="span12">
            <ul class="nav nav-list nav-vert">
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">Library</a>
                </li>
                <li>
                    <a href="#">Applications</a>
                </li>
 
            </ul>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span12">
        </div>
    </div>
</div>
</body>
</html>
Мой CSS

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
@media (max-width: 767px) {
    body {
        font-size:100%;
        background: url("../img/bg.jpg") no-repeat center;
 
        background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        -webkit-background-size: cover;
    }
 
    .width50 {width: 49.9% !important;}
    .floatleft{float: left !important;}
 
    ul.nav-top {margin: 0px 0px 0px 0px ;}
.own-icon {
    background: url("../img/sprite.png") no-repeat;
}
 
.o-icon-home {
background-position: 0px 0px;
    }
.logo > img {
    max-width: 80%;
}
 
    #header {
        height: 14%;
    }
    #imgbox {height: 26%}
    #imgbox img {width: 100%}
 
    #md-nav {height: 27%}
    }
0
Миниатюры
резиновый макет с bootstrap  
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
10.07.2013, 13:27
Ответы с готовыми решениями:

Резиновый макет!!!
Доброе время суток всем. Есть один впросс!! Подскажите где можно скачать...

Резиновый макет
Может кто обьъснить,как делаются резиновые макеты,и размещение ссылок на...

Резиновый макет на CSS
Подскажите как правильно нужно сделать, делаю первый сайт блочными элементами...

Двухколоночный резиновый макет
Здравствуйте, коллеги. Как сделать такой макет: две колонки, ширина одной...

резиновый макет и масштабируемое img
Добрый день, собираюсь из psd сверстать резиновый макет, столкнулся пока что с...

4
NAG
8 / 8 / 1
Регистрация: 15.03.2009
Сообщений: 267
11.07.2013, 22:18  [ТС] 2
прошу закрыть тему!
0
Ruisenor
130 / 130 / 1
Регистрация: 29.05.2013
Сообщений: 612
11.07.2013, 23:14 3
решили свой вопрос ?
0
NAG
8 / 8 / 1
Регистрация: 15.03.2009
Сообщений: 267
12.07.2013, 01:37  [ТС] 4
ну +- да, от полной "резиновости" пришлось отказаться.
0
Ruisenor
130 / 130 / 1
Регистрация: 29.05.2013
Сообщений: 612
12.07.2013, 09:04 5
на сайте bootstrap есть много информации - где на днях видел резиновый макет bootstrap если найду скину вам для помощи
1
12.07.2013, 09:04
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
12.07.2013, 09:04

Самый оптимальный резиновый макет?
Всем доброго времени суток, я совсем не давно начал углубляться в html/css....

Bootstrap container-fluid почему не резиновый?
Добрый день уважаемые. Подскажите, пожалуйста, почему класс container-fluid...

Блочная верстка (резиновый сайт), подскажите как сделать такой макет (см. рисунок)?
я думаю что по цветам можно легко распознать что является контейнером, а что...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru