bootstrap的样式

一、字体图标

进入bootstrap官方文档的组件页面https://v3.bootcss.com/components/,最上面的组件就是字体图标“Glyphicons 字体图标”部分。在控件的class中声明字体图标,既加一个class样式“glyphicon”,然后把在这里找到图标后把图标对应的名字单词class样式放到相应的控件里:

<div class="container">
    <div class="row">
        <div class="glyphicon glyphicon-ok" style="color:red; font-size:40px;"></div>
        aaaaa   
    </div>
</div>

bootstrap的样式
由于字体图标看起了是个图片图标,担实际可以把它当成字体来对待,所以控制其大小颜色等样式就跟控制一般的字体一样。

二、颜色设置

最常用的颜色样式有如下几个:primary success info warning danger。不同的控件由相应的前缀加上这些单词即可控制控件的颜色。各控件对应的前缀如下:
文字设置:text-
背景设置:bg-
按钮设置:btn-
弹窗设置:alert-
面板设置:panel-

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <!---->
        <link rel="stylesheet" href="css/bootstrap.css" />
        <style>
        .tips1{
            width:30px;
            height:300px;
            background:black;
            right:0
        }
        .tips2{
            width:30px;
            height:100px;
            background:blue;
            right:0;
        }
        #div1{
          width:400px;
        }
        </style>
    </head>
    <body style="height:2000px;">
        <div class="container">
            <div class="row">
                <input type="button"  value="默认样式"/>
                <input type="button"  value="首选项" class="btn btn-primary"/>
                <input type="button"  value="成功" class="btn btn-success"/>
                <input type="button"  value="一般信息" class="btn btn-info"/>
                <input type="button"  value="警告" class="btn btn-warning"/>
                <input type="button"  value="危险" class="btn btn-danger"/>
                <p>默认段落</p>
                <p class="bg-primary">首选项</p>
                <p class="bg-success">成功</p>
                <p class="bg-info">一般信息</p>
                <p class="bg-warning">警告</p>
                <p class="bg-danger">危险</p>
                <br />
                <span>默认文字</span>
                <span class="text-primary">首选项</span>
                <span class="text-success">成功</span>
                <span class="text-info">一般信息</span>
                <span class="text-warning">警告</span>
                <span class="text-danger">危险</span>
                <br />
                <a href="#" class="btn btn-primary">链接1</a>
                <a href="#" class=" bg-success">链接1</a>
                <a href="#" class=" bg-danger">链接3</a>
                <br />
                <div class="alert alert-danger">我是警告框</div>
                <div  id="div1" class="panel panel-primary">
                    <div class="panel-heading">
                        <h4>我是面板的标题</h4>
                    </div>
                    <div class="panel-body">
                        我是面板的主体内容
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script src="js/jquery-1.11.1.js"></script>
    <script src="js/bootstrap.js"></script>
</html>

bootstrap的样式

三、登录面板

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <link rel="stylesheet" href="css/bootstrap.css" />
        <style>
        .tips1{
            width:30px;
            height:300px;
            background:black;
            right:0
        }
        .tips2{
            width:30px;
            height:100px;
            background:blue;
            right:0;
        }
        #login{
            width:400px;
        }
        </style>
    </head>
    <body style="height:2000px;">
        <!--
            form-group 定义表单控件 
            form-control 设置表单元素的样式
            也可以通过css文件 具体修改样式
        -->
        <div class="container">
            <div id="login" class="panel panel-primary">
                <div class="panel-heading">
                    Login
                </div>
                <div class="panel-body">
                    <div class="form-group">
                    <label>用户名:</label><input type="text" class="form-control" />
                    <div class="alert alert-warning">用户名不能为空</div>
                    <label>密码:</label><input type="password" class="form-control" />
                    </div>
                    <a href="#" class="text-info">忘记密码</a>
                    <input type="button" value="登陆" class="btn btn-primary pull-right" />
                </div>
            </div>
        </div>
    </body>
    <script src="js/jquery-1.11.1.js"></script>
    <script src="js/bootstrap.js"></script>
</html>

bootstrap的样式

四、其他

常用样式效果解析如下:
active:背景加深。
disabled:不可点,不可触发。
lg、md、sm、xs除了是栅格系统控制占用空间大小的关键字,也可以是控制控件大小的关键字。
col-**-n是栅格系统的用法;
btn-**用于控制按钮大小。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <!---->
        <link rel="stylesheet" href="css/bootstrap.css" />
        <style>
        .tips1{
            width:30px;
            height:300px;
            background:black;
            right:0
        }
        .tips2{
            width:30px;
            height:100px;
            background:blue;
            right:0;
        }
        #div1{
          width:400px;
        }
        </style>
    </head>
    <body style="height:2000px;">
        <div class="container">
            <div class="row">
                <input type="button"  value="首选项"  class="btn btn-primary"/>
                <input type="button"  value="首选项"  class="btn btn-primary active"/>
                <input type="button"  value="首选项"  class="btn btn-primary disabled"/>
                <br />
                <input type="button"  value="首选项"  class="btn btn-primary btn-lg"/>
                <input type="button"  value="首选项"  class="btn btn-primary btn-md"/>     
                <input type="button"  value="首选项"  class="btn btn-primary btn-sm"/>
                <input type="button"  value="首选项"  class="btn btn-primary btn-xs"/>
            </div>
        </div>
    </body>
    <script src="js/jquery-1.11.1.js"></script>
    <script src="js/bootstrap.js"></script>
</html>

bootstrap的样式

上一篇:Fabric.js 1.7.12 发布,简易 JavaScript Canvas 库


下一篇:dwz4j企业级Java Web快速开发框架(Mybatis + SpringMVC) + jUI整合应用