Загрузочный контейнер с двумя столбцами по центру и закругленными углами

ProgramBox

Загрузочный контейнер с двумя столбцами по центру и закругленными углами

Post author:admin
Запись опубликована:13 февраля, 2023
Post category:Вопросы по программированию

#html #css #twitter-bootstrap

#HTML #css #twitter-bootstrap

Вопрос:

ВОТ ZIP К МОЕМУ ПОЛНОМУ ИСТОЧНИКУ: https://www.zipshare.com/download/eyJhcmNoaXZlSWQiOiI3Y2MzNDc5Ny00NDhmLTQ5YzctYjQ2MS1iYTI5ZTQ0ZmI1ZDYiLCJlbWFpbCI6ImNhdWNhdUBpbmJveC5sdiJ9

У меня есть вопрос о кодировании 2 столбцов, которые написаны в существующем шаблоне.

В принципе, у меня есть PSD, который представляет шаблон моего веб-сайта, но я немного застрял в получении двух контейнеров, содержащих нижний табличный список с информацией (см. На скриншоте). Поле следующего столбца разделено на 2, и я подумал, что я мог бы просто сделать что-то вроде этого:

 <div class="row">
  <div class="col-md-6 col-md-push-6">.col-md-6 .col-md-push-3</div>
  <div class="col-md-6 col-md-pull-6">.col-md-6 .col-md-pull-6</div>
</div>

С чего мне на самом деле начать?

1. Не могли бы вы перечитать свой вопрос и уточнить, что именно вы пытаетесь сделать. Кроме того, прочитайте документы Bootstrap в сетке getbootstrap.com/css/#grid

2. Я пытаюсь сделать psd для начальной загрузки, и теперь я застрял в создании этих 2 нижних столбцов, создавая его стиль, а также разделяя второй столбец на два.

3. Том, я добавил исходный zip-файл в post, чтобы ты мог видеть, что у меня есть сейчас

Ответ №1:

Вот код для столбца 2, а также найдите снимок экрана, прикрепленный к приведенному ниже образцу..

      <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <div class="panel panel-default">
                    <!-- Default panel contents -->
                    <div class="panel-heading">Panel heading</div>
                    <!-- List group -->
                    <ul class="list-group">
                        <li class="list-group-item">Cras justo odio</li>
                        <li class="list-group-item">Dapibus ac facilisis in</li>
                        <li class="list-group-item">Morbi leo risus</li>
                        <li class="list-group-item">Porta ac consectetur ac</li>
                        <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                <div class="row">
                    <div class="col-md-push-12">
                        <pre class="text-justify">zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzZ
                    zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzZ
                    zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzZ
                    zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzZ  </pre>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-push-12">
                        <pre class="text-justify"> AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAa                 
                    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAa
                    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAa
                    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAa</pre>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                <pre class="text-justify"> 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 

        </pre>
            </div>
        </div>
    </div>

Надеюсь, это поможет. Пожалуйста, отметьте is answered / если этот ответ помогает вам решить вашу текущую проблему / проблему.

Приятного обучения.

1. Можно ли создавать list-group-items похожие строки? взгляните на таблицу вверху, было бы неплохо иметь дополнительные столбцы или для таблицы будут разные? Как вы можете видеть, теперь у меня есть таблица, но она выглядит очень простой, удалены границы, но все еще не привлекательна для глаз .. любой стиль для таблицы?

2. взгляните на нижнее левое поле, как бы вы создали там элементы? Вы бы предпочли <div> сделать его одной строкой и просто скопировать их?

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

4. Я не знаю, как сгруппировать эти элементы и заставить их работать должным образом. Я решил, что могу просто создавать классы и размещать каждую вещь для каждого класса следующим образом (один пользователь)

5. Не уверен, правильно ли я понимаю. можете ли вы поделиться тем, что вы сделали, и где вы застряли. Исправлена ли проблема с 2 столбцами — пожалуйста, отметьте ответ..