<!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. ajax原理图解

    Ajax 原理图解 摘自: http://www.nowamagic.net/ajax/ajax_PicForAjaxPrinciple.php Ajax其实已经使用很久了,但一直也没有时间正经的找本 ...

  2. Java Web EL JSTL的用法

    1.导入包 fastjson-1.2.2.jar 2.JSP文件加入 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" p ...

  3. 「LINUX资料」简单实用命令less和vi（三）

  4. ubuntu14.04安装配置jdk1.8.0_25

    Reference: http://jingyan.baidu.com/article/eb9f7b6d8f82a6869364e8a7.html 今天尝试在ubuntu14.04 LTS上安装jdk ...

  5. bzoj3809

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=3809 题目大意: Autumn和Bakser又在研究Gty的妹子序列了!但他们遇到了一个难题 ...

  6. arcgis 瓦片图加载规则（转载）

    arcgis 瓦片图加载规则 最近需要做地图离线的功能,要能下载指定区域的瓦片图,我们都知道如何加载谷歌和天地图的加载规则,但是网上貌似没有找到如何加载arcgis自己发布的瓦片图规则,好不容易找到一 ...

  7. centos command中 * . 的重要性

    錯誤    cp /home/test1/* /home/test2/ –a          用參數*將不可以複製linux中.開頭的隱藏文件 正確    cp /home/test1/. home ...

  8. MySQL要导出成excel的方法

    MySQL 要导出成 excel 文件很简单,执行类似这样的命令:   select * from 某个表 into outfile  'd:/文件名.xls';   上述命令你在服务器上执行,就导在 ...

  9. 简述Hibernate三种开发方式

    1.由domain object->mapping->db(官方推荐) 2.由db开始,用工具生成mapping和domain object(使用较多) 3.由映射文件开始

  10. 纯代码实现CSS圆角

    我这里说的是纯代码,是指的不使用图片实现圆角,图片实现圆角,这里就不说了. 纯代码实现圆角主要有3种方法: 第一种:CSS3圆角   #chaomao{     border-radius:2px 2 ...