boostrap预定义样式风格

时间：2015-10-31 23:05:57 阅读：368 评论：0 收藏：0 [点我收藏+]

标签：

预定义样式分为五种：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>

View Code

技术分享

除了上述的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>

View Code

技术分享

boostrap预定义样式风格

标签：

原文地址：http://www.cnblogs.com/donghualei/p/4926363.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行