Heim > Artikel > Web-Frontend > boostrap预定义样式风格_html/css_WEB-ITnose
boostrap预定义样式风格_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:34:321607Durchsuche
- 预定义样式分为五种：primary（首选项）、success（成功）、info（一般信息）、warning（警告）、danger（危险），demo如下，设置不同的class展示不同的样式
-
<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.css"> <style> .glyphicon-heart {font-size: 100px; color: red;} </style> </head><body><div class="container"> <input type="button" value="默认样式" /> <input type="button" class="btn btn-primary" value="首选项" /> <input type="button" class="btn btn-success" value="成功" /> <input type="button" class="btn btn-info" value="一般信息" /> <input type="button" class="btn btn-warning" value="警告" /> <input type="button" class="btn btn-danger" value="危险" /></div></body> <script src="js/jquery-2.1.3.js"></script> <script src="js/bootstrap.js"></script></html> - 除了上述的btn-*外还有其他的一些class，比如（bg | text | alert)-(primary | success | info | warning | danger)等，可分别设置不同的样式
- 如下是一个面板控件
- 网址：http://v3.bootcss.com/components/#panels
- 一个面板的小demo代码以及效果图如下
<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.css"> <style> .glyphicon-heart {font-size: 100px; color: red;} </style> </head><body><div class="container"> <div class="panel panel-primary"> <div class="panel-heading"> <h3>我是面板的标题</h3> </div> <div class="panel-body"> 我是面板的主体内容 </div> </div></div></body> <script src="js/jquery-2.1.3.js"></script> <script src="js/bootstrap.js"></script></html>
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：HTML标签之<q> <blockquote>_html/css_WEB-ITnoseNächster Artikel：html上的div和表格位置不同浏览器错位怎么办_html/css_WEB-ITnose