Bootstrap全局css样式_图片，响应式工具
生活随笔
收集整理的這篇文章主要介紹了
Bootstrap全局css样式_图片，响应式工具
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
響應(yīng)式圖片
在 Bootstrap 版本 3 中，通過為圖片添加 .img-responsive 類可以讓圖片支持響應(yīng)式布局。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form表單</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body><div class="container"><img src="001.jpg" class="img-responsive" lt="這是一張桌面的圖片"></div></body>
</html>
圖片形狀
通過為 <img> 元素添加以下相應(yīng)的類，可以讓圖片呈現(xiàn)不同的形狀。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form表單</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body><div class="container"><img src="1.png" class="img-responsive img-round" ><img src="1.png" class="img-responsive img-circle" ><img src="1.png" class="img-responsive img-thumbnail" ></div></body>
</html>
為了加快對移動設(shè)備友好的頁面開發(fā)工作，利用媒體查詢功能并使用這些工具類可以方便的針對不同設(shè)備展示
或隱藏頁面內(nèi)容<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>響應(yīng)式工具</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body> <div class="container"><p class="visible-sm-block">hello</p></div>
</body>
</html>
打印類
和常規(guī)的響應(yīng)式類一樣，使用下面的類可以針對打印機(jī)隱藏或顯示某些內(nèi)容。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>響應(yīng)式工具</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body> <div class="container"><p class="hidden-print">hello</p></div>
</body>
</html>
?
總結(jié)
以上是生活随笔為你收集整理的Bootstrap全局css样式_图片，响应式工具的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Bootstrap全局css样式_按钮
- 下一篇： 案例：返回浏览器需要的页面http服务器