Home >Web Front-end >HTML Tutorial >Bootstrap global CSS styles for buttons and pictures_html/css_WEB-ITnose
Bootstrap global CSS styles for buttons and pictures_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:40:171139browse
.btn-default??The default style of the button;
.btn-primary??The preferred style of the button;
.btn-success??The success style of the button ;
.btn-info?? General information style of the button; '
.btn-warning?? warning style of the button;
.btn-danger?? button Dangerous style;
.btn-link?? button link style;
.btn-lg?? large button style;
.btn-sm?? small Button style;
.btn-xs?? Extra small button style;
.btn-block?? Set the button to fill the parent element;
.active?? Set the button to the active state;
.disabled?? Set the button to the disabled state;
.img-circle?? Set the image to be circular;
.img- rounded?? Set the image to rounded corners;
.img-thumbnail?? Set the image to a square shape;
.img-responsive?? Add responsiveness to the image;
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>CSS全局样式_栅格系统</title> <link rel="stylesheet" href="bootstrap.min.css" type="text/css"></head><body><div class="container"> <p> <button type="button" class="btn btn-default">（默认样式）Default</button> <button type="button" class="btn btn-primary">（首选项）Primary</button> <button type="button" class="btn btn-success">（成功）Success</button> <button type="button" class="btn btn-info">（一般信息）Info</button> <button type="button" class="btn btn-warning">（警告）Warning</button> <button type="button" class="btn btn-danger">（危险）Danger</button> <button type="button" class="btn btn-link">（链接）Link</button> </p> <p> <button type="button" class="btn btn-success btn-lg" disabled>success</button> <button type="button" class="btn btn-success active">success</button> <button type="button" class="btn btn-success btn-sm">success</button> <button type="button" class="btn btn-success btn-xs">success</button> </p> <button type="button" class="btn btn-success btn-block">success</button> <a href="#" class="btn btn-primary btn-block">登录</a> <input class="btn btn-primary btn-block" value="提交"/> <img src="images/g.jpg" alt="girl" class="img-circle"/> <img src="images/g.jpg" alt="girl" class="img-rounded"/> <img src="images/g.jpg" alt="girl" class="img-thumbnail"/> <img src="images/937654.jpg" alt="girl" class="img-responsive"/></div></body></html>
Copyright statement: This article is an original article by the blogger, without the blogger's permission No reproduction allowed.