<!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. BLE 安卓APP控制LED灯的实现（转）

    源:BLE 安卓APP控制LED灯的实现 //注:参考AmoMcu源代码修改. 打开APP,检查蓝牙是否打开 BluetoothAdapter mBluetoothAdapter; final Blu ...

  2. 概率dp初探

    论文链接:  http://wenku.baidu.com/link?url=vEcfxpqAvGRf6JL9IL2R6v8plBgPnaP3tKp5niOBmoajk0y4CcpwFzL4SkfGS ...

  3. UVa 543 - Goldbach's Conjecture

    题目大意:给一个偶数,判断是否是两个素数的和. 先用sieve方法生成一个素数表,然后再进行判断即可. #include <cstdio> #include <vector> ...

  4. IOS开发之按钮控件Button详解

    reference:http://mxcvns.lofter.com/post/1d23b1a3_685d59d 首先是继承问题,UIButton继承于UIControl,而UIControl继承于U ...

  5. UVa 11450 - Wedding shopping

    题目大意:我们的朋友Bob要结婚了,所以要为他买一些衣服.有m的资金预算,要买c种类型的衣服(衬衫.裤子等),而每种类型的衣服有k个选择(只能做出一个选择),每个选择的衣服都有一个价格,问如何选择才能 ...

  6. c++初学（电梯实验）

    模拟电梯载人实验 Elevator.h class Elevator{public:    Elevator();    ~Elevator();    void getNowNum();       ...

  7. Swift 动态创建提示框

    var alert = UIAlertController(title: "", message: "", prefferedStyle: UIAlertCon ...

  8. linux环境下Vim的配置

    原文链接:http://blog.chinaunix.net/uid-26826958-id-3272375.html  (本文转自此链接中的部分内容,但做了适当修改) 安装vim命令:sudo ap ...

  9. spark中数据的读取与保存

    1.文本文件 (1)读取文本文件 JavaRDD<String> input =sc.textFile(dir) (2)保存文本文件 result.saveAsTextFile(dir)) ...

  10. 用mui框架开发手机app项目实践中的那些事儿

    http://www.yilingsj.com/xwzj/2015-04-29/260.html 最近在玩mui框架,坑的我是:西湖的水,全都是眼泪!!! 公司的手机app要进行改版,我率先想到的是j ...