Как сделать обо мне макет с использованием начальной загрузки

-1

Я хочу, чтобы создать обо мне страница, имеющие этот макет:Как сделать обо мне макет с использованием начальной загрузки

General Info. 

Name:     XYZ XYZ 

Age:     22 

Gender:    Male 


Contact Info. 

Email:    [email protected] 

Phone number:   923XXXXXXXXX

Это как Facebook обо мне страницы, где элементы находятся на левом и их значения находятся справа на определенном расстоянии, но выравнивается влево. Так что я хочу, чтобы значения были выровнены по левому краю на определенном расстоянии от элементов слева. Так есть ли какой-либо хороший способ или техника для такого выравнивания вместо использования разных интервалов для каждого из них?

источник

2015-06-22 Raj

Использование столбцов, как работает Bootstrap. Вероятно, вы должны прочитать документы Bootstrap. – DavidG

Вы пробовали написать какую-либо разметку самостоятельно? – NoobEditor

Используйте

или

возможно ...? –

ответ

Один из способов сделать это будет, как показано ниже:

<div class="row"> 
    <div class="col-sm-12">General Info</div> 
    <div class="col-sm-6">Name:</div><div class="col-sm-6">XYZ XYZ</div> 
    <div class="col-sm-6">Age:</div><div class="col-sm-6">22</div> 
    <div class="col-sm-6">Gender:</div><div class="col-sm-6">Male</div> 
    <div class="col-sm-12">Contact info</div> 
    <div class="col-sm-6">Email:</div><div class="col-sm-6">[email protected]</div> 
    <div class="col-sm-6">Phone number:</div><div class="col-sm-6">923XXXXXXXXX</div> 
</div>

источник

2015-06-22 11:17:44

хорошо, это тоже хороший способ, но я понял, что таблицы - лучший способ сделать это. Благодарю. – Raj

@Raj пока таблица будет работать, являются ли таблицы подходящим инструментом для работы? – hungerstar

@hungerstar Я думаю, ты просто спросил то же самое, что я собирался спросить. Bootstrap дает вам такую гибкость, использование таблицы для этого будет образом стирать стили бутстрапа как-то бесполезно. –

Вы можете добавить столько данных в требуемом формате, используя ниже код.

<html> 
<style type="text/css"> 
    #wrap { 
    float:left; 
    width:300px; 
    margin:0 auto; 
    } 
    #left_col { 
    float:left; 
    width:100px; 
    } 
    #right_col { 
    Float:left; 
    width:100px; 

    } 
</style> 
<div id="wrap"> 
    <div id="left_col"> 
      <p>Name:</p> 
    </div> 
    <div id="right_col"> 
      <p>XYZ XYZ</p> 
    </div> 
    <div id="wrap"> 
     <div id="left_col"> 
       <p>Age:</p> 
     </div> 
     <div id="right_col"> 
       <p>22</p> 
     </div> 
    </div>

источник

2015-06-22 11:42:19

Эй вы поняли, у вас нет тегов головы или тела в вашем коде? И поймите, что вы открываете divs, и вы их не закрываете. Pls исправить ваш код. –

Вам нужен визуальный практический результат, я думаю. Так что было бы лучше, если бы вы использовали визуальный конструктор bootstrap. Layoutit

Это поможет вам получить быстрый результат. Для вашего проекта.

источник

2015-06-22 13:15:23

bootply тоже возможно? Jsfiddle тоже? –

Смежные вопросы