макет загрузочной сетки для мобильных телефонов, планшета и рабочего стола

Question

Я пытаюсь создать более легкий пользовательский интерфейс для людей, чтобы вводить данные, для веб-приложения для подсчета очков в гольф. Принцип для больших кнопок нажимать для каждого счета, а не вводить их.

Я создал дополнительный файл CSS, чтобы сделать кнопки больше, чем по умолчанию ...

.btn-sq-lg { 
    width: 150px !important; 
    height: 150px !important; 
} 

.btn-sq { 
    width: 100px !important; 
    height: 100px !important; 
    font-size: 10px; 
} 

.btn-sq-sm { 
    width: 50px !important; 
    height: 50px !important; 
    font-size: 10px; 
} 

.btn-sq-xs { 
    width: 25px !important; 
    height: 25px !important; 
    padding:2px; 
} 

В настоящее время у меня есть следующее, который отображает должным образом на рабочем стол устройстве (Игнорируйте «хз» ячейки сетки, это я играл около. The «LG» ячейки сетки формата, как я хотел бы ...)

<div class="row"> 
    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-2 col-lg-offset-1"> 
     <button type="button" class="btn btn-primary btn-sq">Blob</button> 

    </div> 
    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-2"> 
     <button type="button" class="btn btn-primary btn-sq">2</button> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
     <button type="button" class="btn btn-primary btn-sq">3</button> 
    </div> 
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
     <button type="button" class="btn btn-primary btn-sq">4</button> 
    </div> 
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
     <button type="button" class="btn btn-primary btn-sq">5</button> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-2 col-lg-offset-1"> 
     <button type="button" class="btn btn-primary btn-sq">6</button> 

    </div> 
    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-2"> 
     <button type="button" class="btn btn-primary btn-sq">7</button> 
    </div> 
</div> 

Как/что эквивалент, чтобы сделать тот же формат на мобильном устройстве?

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

Answer 1

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

<div class="row"> 
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
     <button type="button" class="btn btn-primary btn-sq">3</button> 
    </div> 
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
     <button type="button" class="btn btn-primary btn-sq">4</button> 
    </div> 
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
     <button type="button" class="btn btn-primary btn-sq">5</button> 
    </div> 
</div> 

/* Anything below xs */ 
@media only screen and (min-width : 1px) { 
    .btn-sq { 
     padding: 4px; 
     width: 20px; 
     height: 20px; 
     font-size: 8px; 
     background-color: black; 
     color: white; 
    } 
} 
/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 320px) { 
    .btn-sq { 
     width: 25px; 
     height: 25px; 
     font-size: 11px; 
     background-color: pink; 
    } 
} 

/* Small Devices, Phones */ 
@media only screen and (min-width : 480px) { 
    .btn-sq { 
     width: 50px; 
     height: 50px; 
     font-size: 13px; 
     background-color: yellow; 
     color: black; 
    } 
} 

/* Small Devices, Tablets */ 
@media only screen and (min-width : 768px) { 
    .btn-sq { 
     width: 100px; 
     height: 100px; 
     font-size: 16px; 
     background-color: green; 
    } 
} 

/* Medium Devices, Desktops */ 
@media only screen and (min-width : 992px) { 
    .btn-sq { 
     width: 150px; 
     height: 150px; 
     font-size: 18px; 
     background-color: red; 
    } 
} 

Проверьте мой codepen: http://codepen.io/httpJunkie/pen/OVKJPZ это не идеальный, но он должен получить вас на вашем пути. Я вижу, что вам нужно только создать новый тип кнопки с квадратной кнопкой и установить обычные контрольные точки бутстрапа. Есть более умные способы сделать это, но это легче всего понять.

Answer 2

Вы должны использовать медиа-запрос, чтобы изменить размер кнопки на основе Размер экрана. Например, если вы находитесь на сотовом телефоне, вам нужно изменить свои кнопки на ширину/высоту 25 пикселей. Вы можете использовать ширину/высоту 50 пикселей для планшетов и 100 пикселей для больших экранов.

Например, чтобы справиться с сотовым телефоном вы бы добавить это в файл CSS:

@media only screen and (max-width: 500px) { 
    .btn-sq { 
     width: 50px !important; 
     height: 50px !important; 
     font-size: 10px; 
     background-color: yellow; 
    } 
}