Html 使用Angularjs基于分辨率隐藏按钮、图标和文本
我在响应性html(引导)方面已经变得不错了,但现在我必须根据分辨率删除元素 看看浏览器和移动设备: 根据分辨率,一些按钮应丢失Html 使用Angularjs基于分辨率隐藏按钮、图标和文本,html,css,angularjs,Html,Css,Angularjs,我在响应性html(引导)方面已经变得不错了,但现在我必须根据分辨率删除元素 看看浏览器和移动设备: 根据分辨率,一些按钮应丢失md图标其他按钮应丢失其文本,一些按钮应完全隐藏 我怎样才能用angular和CSS做到这一点 隐藏图标但保留文本 隐藏文本但保留图标 完全隐藏按钮 这是我的一些代码 <!--Save Invoice--> <td style="width:35%; text-align:right; padding-left:4px;"> <
md图标
其他按钮应丢失其文本,一些按钮应完全隐藏
我怎样才能用angular和CSS做到这一点
- 隐藏图标但保留文本
- 隐藏文本但保留图标
- 完全隐藏按钮
<!--Save Invoice-->
<td style="width:35%; text-align:right; padding-left:4px;">
<button class="book-button book-text-button book-std-bg" ng-click="vm.invoiceSave()">
<md-icon class="material-icons book-material" aria-label="Save">save</md-icon>
SAVE
</button>
</td>
<!--Pay Invoice-->
<td style="width:30%; text-align:right; padding-left:4px;" ng-if="vm.invoiceForm._id!='new'">
<button class="book-button book-text-button col-std-cyan" ng-click="vm.invoicePay()">
<md-icon class="material-icons book-material" aria-label="Save">monetization_on</md-icon>
PAY
</button>
</td>
<!--Print Invoice-->
<td style="width:5%; text-align:right; padding-left:4px;">
<button class="book-button book-text-button col-std-black" ng-click="vm.printInvoice()">
<md-icon class="material-icons book-material" aria-label="Delete">print</md-icon>
</button>
</td>
拯救
拯救
货币化
支付
打印
用于隐藏图标
用Css编写
@media screen and (max-width:768px)
{
.material-icons {display:none;}
}
用于隐藏文本
Html代码
<td style="width:35%; text-align:right; padding-left:4px;">
<button class="book-button book-text-button book-std-bg" ng-click="vm.invoiceSave()">
<md-icon class="material-icons book-material" aria-label="Save">save</md-icon>
<span class="btntext">SAVE</span>
</button>
</td>
用于隐藏按钮
在Css中
@media screen and (max-width:768px)
{
.book-button {display:none;}
}
保存发票
<td style="width:35%; text-align:right; padding-left:4px;">
<button class="book-button book-text-button book-std-bg" ng-click="vm.invoiceSave()">
<md-icon class="material-icons book-material" aria-label="Save">save</md-icon>
<span class="hide-xs">SAVE</span>
</button>
</td>
<td style="width:30%; text-align:right; padding-left:4px;" ng-if="vm.invoiceForm._id!='new'">
<button class="book-button book-text-button col-std-cyan" ng-click="vm.invoicePay()">
<md-icon class="material-icons book-material" aria-label="Save">monetization_on</md-icon>
<span class="hide-xs"> PAY</span>
</button>
</td>
<td style="width:5%; text-align:right; padding-left:4px;">
<button class="book-button book-text-button col-std-black" ng-click="vm.printInvoice()">
<md-icon class="material-icons book-material" aria-label="Delete"><span class="hide-xs">print</span></md-icon>
</button>
</td>
拯救
拯救
支付发票
<td style="width:35%; text-align:right; padding-left:4px;">
<button class="book-button book-text-button book-std-bg" ng-click="vm.invoiceSave()">
<md-icon class="material-icons book-material" aria-label="Save">save</md-icon>
<span class="hide-xs">SAVE</span>
</button>
</td>
<td style="width:30%; text-align:right; padding-left:4px;" ng-if="vm.invoiceForm._id!='new'">
<button class="book-button book-text-button col-std-cyan" ng-click="vm.invoicePay()">
<md-icon class="material-icons book-material" aria-label="Save">monetization_on</md-icon>
<span class="hide-xs"> PAY</span>
</button>
</td>
<td style="width:5%; text-align:right; padding-left:4px;">
<button class="book-button book-text-button col-std-black" ng-click="vm.printInvoice()">
<md-icon class="material-icons book-material" aria-label="Delete"><span class="hide-xs">print</span></md-icon>
</button>
</td>
货币化
支付
打印发票
<td style="width:35%; text-align:right; padding-left:4px;">
<button class="book-button book-text-button book-std-bg" ng-click="vm.invoiceSave()">
<md-icon class="material-icons book-material" aria-label="Save">save</md-icon>
<span class="hide-xs">SAVE</span>
</button>
</td>
<td style="width:30%; text-align:right; padding-left:4px;" ng-if="vm.invoiceForm._id!='new'">
<button class="book-button book-text-button col-std-cyan" ng-click="vm.invoicePay()">
<md-icon class="material-icons book-material" aria-label="Save">monetization_on</md-icon>
<span class="hide-xs"> PAY</span>
</button>
</td>
<td style="width:5%; text-align:right; padding-left:4px;">
<button class="book-button book-text-button col-std-black" ng-click="vm.printInvoice()">
<md-icon class="material-icons book-material" aria-label="Delete"><span class="hide-xs">print</span></md-icon>
</button>
</td>
打印
您可以使用Bootstrap的内置类,如
.hidden-xs, .hidden-sm, .hidden-md, .hidden-lg
例如:
<button class="book-button book-text-button book-std-bg" ng-click="vm.invoiceSave()">
<md-icon class="material-icons book-material hidden-sm" aria-label="Save">save</md-icon>
<span class="hidden-xs">SAVE</span>
</button>
拯救
拯救
在上述代码中,“md图标”将隐藏在小屏幕中,“保存”文本将隐藏在额外的小屏幕中
您可以在此处引用这些类:
答案不清楚,没有提供代码示例或有用的链接