0

пример

Можно ли организовать такое дело на бутстрапе как на картинке выше, или он тут бессилен и лучше чисто на css?

7
  • 1
    bootstrap не css? :) ну у тебя тут 3 колонки, это col-md-4 класс вешаешь на каждый блок, и у тебя получатся 3 одинаковые колонки в строке. 10 мая 2016 в 11:13
  • вот пример - jsfiddle.net/dh3mLpch - использую 24 grid
    – soledar10
    10 мая 2016 в 11:30
  • @soledar10 жесть, почему не так? jsfiddle.net/m8jjgvyr/1 у вас дичайшая грязь если вы так пишите. Зачем вы делаете непонятные под уровни? когда бутстрап сам переведен новую строку если колонка будет выходить за пределы 10 мая 2016 в 11:35
  • если иконки спрайтом - можно и так
    – soledar10
    10 мая 2016 в 11:37
  • + если я сделаю лишний div - это грязь?
    – soledar10
    10 мая 2016 в 11:38

2 ответа 2

1

Не понятно, что именно вы имеете ввиду под словами "такое дело", но вот вам пример.

html body {
  background-color: #018287; 
  color: white;
}

.media > .media-body > .media-heading {
  color: black;
  font-weight: 600; 
  font-size: 20px
}
.glyphicon-lg {
  font-size: 65px;
  padding: 7px;
  border: 2px dashed white;
}
.col-ident {
  margin-bottom: 20px
}
<div class="container">
<div class="row">
  <div class="col-md-4 col-sm-6 col-xs-6 col-ident">
    <div class="media">
      <div class="media-left media-middle">
        <span class="glyphicon glyphicon-fire glyphicon-lg"></span>
      </div>
      <div class="media-body">
        <h4 class="media-heading">SOME SERVICE</h4>
        Text text text text text text 
        text text text text text text text
        text text text text text 
      </div>
    </div>
  </div>
  <div class="col-md-4 col-sm-6 col-xs-6 col-ident">
    <div class="media">
      <div class="media-left media-middle">
        <span class="glyphicon glyphicon-fire glyphicon-lg"></span>
      </div>
      <div class="media-body">
        <h4 class="media-heading">SOME SERVICE</h4>
        Text text text text text text 
        text text text text text text text
        text text text text text 
      </div>
    </div>
  </div>
  <div class="col-md-4 col-sm-6 col-xs-6 col-ident">
    <div class="media">
      <div class="media-left media-middle">
        <span class="glyphicon glyphicon-fire glyphicon-lg"></span>
      </div>
      <div class="media-body">
        <h4 class="media-heading">SOME SERVICE</h4>
        Text text text text text text 
        text text text text text text text
        text text text text text 
      </div>
    </div>
  </div>
  <div class="col-md-4 col-sm-6 col-xs-6 col-ident">
    <div class="media">
      <div class="media-left media-middle">
        <span class="glyphicon glyphicon-fire glyphicon-lg"></span>
      </div>
      <div class="media-body">
        <h4 class="media-heading">SOME SERVICE</h4>
        Text text text text text text 
        text text text text text text text
        text text text text text 
      </div>
    </div>
  </div>
  <div class="col-md-4 col-sm-6 col-xs-6 col-ident">
    <div class="media">
      <div class="media-left media-middle">
        <span class="glyphicon glyphicon-fire glyphicon-lg"></span>
      </div>
      <div class="media-body">
        <h4 class="media-heading">SOME SERVICE</h4>
        Text text text text text text 
        text text text text text text text
        text text text text text 
      </div>
    </div>
  </div>
  <div class="col-md-4 col-sm-6 col-xs-6 col-ident">
    <div class="media">
      <div class="media-left media-middle">
        <span class="glyphicon glyphicon-fire glyphicon-lg"></span>
      </div>
      <div class="media-body">
        <h4 class="media-heading">SOME SERVICE</h4>
        Text text text text text text 
        text text text text text text text
        text text text text text 
      </div>
    </div>
  </div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

0
-1

Бутстрапом можно, но не эффективно. Разве что HTML+CSS.
Можешь конечно написать сниппет на 1 блок и спавнить его столько раз, сколько тебе нужно.

Возможно в инете и готовые есть.

6
  • эм, что? не эффективно? на бутстрапе? вы его хоть хорошо знаете? 10 мая 2016 в 11:17
  • Я им неоднократно пользовался, автор вопроса интересуется чтобы сделать как на скриншоте. В его случае бутстрап кроме колонок ничего сносного не даст.
    – Hromik
    10 мая 2016 в 11:19
  • кроссбраузерную разметку он даст! А вопрос звучит так: может ли бутстрап так делать?. Ответ - да, он может и даже прекрасно. И если бустрап подключен к странице, весь интерфейс лучше строить на нем 10 мая 2016 в 11:20
  • Я и не утверждаю что бутстрап - это плохо. Дело каждого как и что делать, бс для более ленивых.
    – Hromik
    10 мая 2016 в 11:23
  • 2
    ух как же вы ошибаетесь :) Готовая технология, это не лень, а прививание небольшого стандарта в верстке, тем более кроссбраузерного. Так что... лень тут совсем не причем. Это как сборщики webpack, gulp, вы что хотите собирать каждый файл проекта руками? Конечно нет. Технология такая же. Автоматизация рулит прогрессом 10 мая 2016 в 11:28

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.