<!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. 《玩转Bootstrap（JS插件篇）》笔记

    导入JavaScript插件 不论是单独导入还一次性导入之前必须先导入jQuery库. 一次性导入 <script src="js/bootstrap.min.js"> ...

  2. CSS排序工具csscomb

    一. css写久了以后感觉需要按照某种规则或者说顺序来,便于开发和维护.O(∩_∩)O哈哈~ 找到一个 http://csscomb.com/ CSS排序总结: 1. 对css样式排序; 2. 按样式 ...

  3. phpcms的网页替换

    //替换首页header:loge里面的首页不用替换<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  4. 重拾python

    前一段碰到几次关于日期计算的题:给出一个日期,计算下一天的日期.虽然不限语言,可是我就C/C++还算熟悉,别的都是刚了解皮毛,根本不会用现成的库啊,无奈啊...只好用c语言一点点实现了,当时真是无比怀 ...

  5. java基础——1.内部类

    内部类创建 从外部类的非静态方法之外(?=静态方法)的任意位置创建某个内部类的对象,要加入外部类的名字,OuterClassName.InnerClassName public class Parce ...

  6. sql server mdf碎片级数据库修复,数据库碎片级提取

    sql server mdf碎片级数据库修复,数据库碎片级提取   大家都知道MDF数据库文件一般都比较大,在磁盘中往往被存放到不连续的逻辑簇中,久而久之就形成了文件碎片,当文件被误删除或者格式化后, ...

  7. poj 3641 ——2016——3——15

    传送门:http://poj.org/problem?id=3461 题目大意:给你两个字符串p和s,求出p在s中出现的次数. 题解:这一眼看过去就知道是KMP,作为模板来写是最好不过了.... 这道 ...

  8. python3中bytes与string的互相转换

    首先来设置一个原始的字符串, Python 3.2.3 (default, Apr 11 2012, 07:15:24) [MSC v.1500 32 bit (Intel)] on win32 Ty ...

  9. 华硕A450c详细清灰拆机教程

    很久都想写点东西,但又无从下笔. 上次把自己的笔记本清了灰,这次有时间就整理一下,随便作为我的第一次随笔. 准备:笔记本(我的是华硕A450c),拆机工具(螺丝刀等) 温馨提示:要慢点 1,先翻开笔记 ...

  10. ceentos5.5 配置samba服务&用户&组

    准备 Change Root Password passwd root 在提示下建立新密码 静态IP vi /etc/sysconfig/network-scripts/ifcfg-eth0  #网络 ...