Heim >Web-Frontend >Bootstrap-Tutorial >So implementieren Sie abgerundete Ränder in Bootstrap
So implementieren Sie abgerundete Ränder in Bootstrap
- (*-*)浩Original
- 2019-07-18 16:23:207431Durchsuche
Bootstrap unterstützt Bilder.
.img-thumbnail: Fügen Sie etwas Polsterung und einen grauen Rand hinzu.
Wenn andere Elemente abgerundete Ränder erfordern, kann dies durch Festlegen von .border-radius und .border erreicht werden. (Empfohlenes Lernen: Bootstrap-Video-Tutorial)
Beispiel:
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>缩略图</h2> <p>.img-thumbnail 类用于设置图片缩略图(图片有边框):</p> <img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre"> </div> </body> </html>
Weitere technische Artikel zu Bootstrap finden Sie unter Erfahren Sie mehr in der Rubrik Bootstrap-Tutorial !
Das obige ist der detaillierte Inhalt vonSo implementieren Sie abgerundete Ränder in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verwenden Sie das Bootstrap-LayoutNächster Artikel：So verwenden Sie das Bootstrap-Layout