英文:
Is it possible to make responsive HTML page with Angular ngClass directive and bootstrap classes?
问题
我想能够使用Bootstrap的btn-sm类来减小我的Angular应用程序中按钮的大小。
我想写类似于这样的代码：
<button [ngClass]="{ 'btn-sm': window.screen.width < '575.5px' }">Edit</button>
除了编写媒体查询之外，还有其他想法吗？
英文:
I want to be able to reduce the size of the buttons in my Angular application using bootstrap class btn-sm.
I want to write something like this:
<button [ngClass]="{ 'btn-sm' : window.screen.width < '575.5px' }">Edit</button>
Any other ideas except writing media query?
答案1
得分: 1
Yes you can do that, ngClass allows that.
首先，您需要引入Bootstrap。然后添加Bootstrap类，并使用ngClass指令根据特定条件有条件地应用额外的类，这是一个基本且常见的示例：
<div class="container">
<div class="row">
<div class="col-md-6" [ngClass]="{'col-lg-8': isLargeScreen}">
</div>
<div class="col-md-6" [ngClass]="{'col-lg-4': isLargeScreen}">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8" [ngClass]="{'col-md-6': isMediumScreen, 'col-sm-12': isSmallScreen}">
</div>
</div>
</div>
对于您发布的代码，存在错误，您给了window.screen.width一个字符串，但它需要是一个数字类型，示例：
<button [ngClass]="{'btn-sm': window.screen.width < 575.5}">Edit</button>
英文:
Yes you can do that, ngClass allows that.
First of all you need Bootstrap. Then add the bootstrap class and use the ngClass directive to conditionally apply additional classes based on certain conditions, a basic and common example for that:
<div class="container">
<div class="row">
<div class="col-md-6" [ngClass]="{'col-lg-8': isLargeScreen}">
</div>
<div class="col-md-6" [ngClass]="{'col-lg-4': isLargeScreen}">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8" [ngClass]="{'col-md-6': isMediumScreen, 'col-sm-12': isSmallScreen}">
</div>
</div>
</div>
</div>
For the code you posted, it's an error, you gave to window.screen.width a string but needs a number type, example:
<button [ngClass]="{ 'btn-sm' : window.screen.width < 575.5 }">Edit</button>
答案2
得分: 1
在Angular组件的.html文件中，所有变量都应该是组件的变量。因此，要使用"window"对象或"Math"对象，你应该在你的component.ts文件中写如下代码：
window:any=window;
Math:any=Math;
个人意见：以这种方式"硬编码"ngClass不太"可扩展"，媒体查询是为了避免这种"混合"HTML和.css的情况。
英文:
In the .html of a component in Angular all the variables should be variables of the component. So to use the object "window" or the object "Math" you should write in your component.ts
window:any=window;
Math:any=Math;
Personal opinion: It's not very "scalable" your approach to "hardcode" the ngClass in this way, the media querys are made to avoid this kind of "mix" html and .css
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论