<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <!-- 处理低版本IE 4.0不考虑IE8 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 移动端视口的设置 -->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 引入bootstrap.css -->

    <link rel="stylesheet" href="css/bootstrap.css">

    <style>

        #login{

            width:400px;

        }

    </style>

</head>

<body>

<div class="container">

    <br>

    <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">

    <br>

    <br>

    <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">连接2</a>

    <a href="#" class="text-danger">连接3</a>

    <br><br>

    <div class="alert alert-warning">我是警告框</div>

    <div class="alert alert-danger">我是危险信息</div>

    <br><br>

    <div class="panel panel-primary">

        <div class="panel-heading">

            <h4>我是面板的标题</h4>

        </div>

        <div class="panel-body">

            我是面板的主体内容！

        </div>

    </div>

</div>

<div class="container">

    <br>

       <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>

    /*

        预定义样式风格

            primary (首选项)

            success (成功)

            info (一般信息)

            warning (警告)

            danger (危险)

            实例 ：登录框

     */

</script>

bootstrap 预定义样式风格的更多相关文章

  1. boostrap预定义样式风格

    预定义样式分为五种:primary(首选项).success(成功).info(一般信息).warning(警告).danger(危险),demo如下,设置不同的class展示不同的样式 <!D ...

  2. Android预定义样式

    字体大小 对于能够显示文字的控件(如TextView EditText RadioButton Button CheckBox Chronometer等等),你有时需要控制字体的大小.Android平 ...

  3. bootstrap 全局 CSS 样式

    http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...

  4. bootstrap全局css样式

    以下从官网抄来的,感觉还是很实用的,运用得好,灵活运用,非常方便快捷,能大大提高开发效率,也为调整不同尺寸的屏幕节省了时间. hidden-xs @media (max-width: 767px){ ...

  5. 响应式布局和BootStrap 全局CSS样式

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  6. 14、响应式布局和BootStrap 全局CSS样式知识点总结-part1

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  7. Sass预定义一些常用的样式

    一.编写sass文件时, 目录不能有中文, 如: E:\\CPC手机, 会报错exception while processing events: incompatible character enc ...

  8. Flink Pre-defined Timestamp Extractors / Watermark Emitters（预定义的时间戳提取/水位线发射器）

    https://ci.apache.org/projects/flink/flink-docs-release-1.6/dev/event_timestamp_extractors.html 根据官网 ...

  9. Bootstrap基本CSS样式

    一.简介.使用 1.简介 Bootstrap 来源于 Twitter,是一款基于 Html.Css.JavaScript 的前端UI框架.可以方便.快速的开发web界面. 教程:https://www ...

随机推荐

  1. 【转】C\C++代码优化的27个建议

    1. 记住阿姆达尔定律: funccost是函数func运行时间百分比,funcspeedup是你优化函数的运行的系数. 所以,如果你优化了函数TriangleIntersect执行40%的运行时间, ...

  2. 微信小程序登录

    一. 小程序不支持cookie会话 1. 通过传递与检验3rd_session来保持会话 2. 3rd_session可以执行'`head -n 80 /dev/urandom | tr -dc A- ...

  3. dom4j生成和解析xml文件

    dom4j生成和解析xml文件 要生成和解析如下格式的xml文件: <?xml version="1.0" encoding="UTF-8"?> & ...

  4. WCF不用证书实现验证（messageheader）

    上文WCF进阶:将消息正文Base64编码中介绍了实现自定义MessageInspector来记录消息和实现自定义Formatter来改写消息,本文介绍一下在WCF中使用SoapHeader进行验证的 ...

  5. javascript---jquery (1事件)

    1.例子说明 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  6. sql2000数据库误删除后自行恢复二次覆盖成功恢复

    sql2000数据库误删除后自行恢复二次覆盖成功恢复 [数据恢复故障描述] 今天接到一个客户电话,他的速达sql2000数据库,数据库误删除了,关键之前还没有备份过.他就想自己尝试恢复,使用网上下载的 ...

  7. ora-12154

    64位oracle,32位pl/sql pl/sql配置完之后,一直报错: ora-12154 配置环境变量ORACLE_HOME:D:\softInstrall\oracle\product\11. ...

  8. 在php中使用jquery uploadify进行多图片上传

    jquery uploadify是一款Ajax风格的批量图片上传插件,在PHP中使用jquery uploadify很方便,请按照本文介绍的方法和步骤,为你的PHP程序增加jquery uploadi ...

  9. spark RDD编程，scala版本

    1.RDD介绍:     RDD,弹性分布式数据集,即分布式的元素集合.在spark中,对所有数据的操作不外乎是创建RDD.转化已有的RDD以及调用RDD操作进行求值.在这一切的背后,Spark会自动 ...

  10. iOS 错误 之 http请求

     Application Transport Security has blocked a cleartext HTTP (http://) resource load since it is ins ...