Style View diffrent для настольных и мобильных устройств | asp.net core 2 mvc5 - PullRequest
Новая
       13

Style View diffrent для настольных и мобильных устройств | asp.net core 2 mvc5

1 голос
/ 25 июня 2019

Итак, я занимался веб-приложениями на c # / razor в asp.net core 2 с mvc 5 и хорошо с ним справился, но теперь мне нужно создать новый веб-сайт, способный реагировать на дизайн.

Мне просто нужно изменить свое представление и его css в зависимости от устройства, на котором находится пользователь. Я уже использую bootstrap, который уже выполняет некоторую часть этой работы, но я просто хочу по-разному стилизовать мой вид.

Я уже прошел множество туториалов, но все они не включены в asp.net core 2 и используют BundleConfigs ect. Я не нашел турториал или шаблон для моей платформы и версии.

Это как раз то, что я ищу, и просто псевдокод: это должно быть примером полного представления. Так что, очевидно, не для других кнопок. 

if(device==mobile){
<a class="btn btn-sm">Link</a>
}
else{
<a class="btn btn-lg">Link</a>
}

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

1 Ответ

0 голосов
/ 25 июня 2019

Весь смысл Bootstrap в том, что он полностью сфокусирован на адаптивном дизайне и использует медиа-запросы в определенных точках останова (ширина экрана; xtra large / xl и large / lg display (27 "Apple Thunderbolt, например, с полноэкранным браузером)), medium / md (13-дюймовое окно ноутбука), small / sm (ipad) и xtra small / xs (iphone).

Поэтому абсолютно не нужно использовать конструкции if / else в вашем cshtml, никогдаВы конфигурируете свой макет с использованием всех этих адаптивных классов с постфиксами, такими как: -xl, -lg, -md, -sm и -xs и Bootstrap (медиазапросы) делают все остальное за вас в зависимости от размера окна на странице.отображается в.

Для вашего примера вы можете просто пойти по этому пути: 

<a class="btn btn-sm d-sm-none">Link</a>
<a class="btn btn-lg d-none d-sm-inline-block">Link</a>

Первый якорь отображается для ширины окна, страница отображается меньше sm и от равных и выше sm он скрыт (d-sm-none). Второй тег привязки скрыт "по умолчанию" (d-none) и отображается из см точка останова и выше (см, мд, lg, xl).Для дальнейшего ознакомления проверьте эту страницу начальной загрузки .

Так что нет необходимости в громоздких конструкциях if / else в вашем cshtml.

...