bootstrap 预定义样式风格
<!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 预定义样式风格的更多相关文章
- boostrap预定义样式风格
预定义样式分为五种:primary(首选项).success(成功).info(一般信息).warning(警告).danger(危险),demo如下,设置不同的class展示不同的样式 <!D ...
- Android预定义样式
字体大小 对于能够显示文字的控件(如TextView EditText RadioButton Button CheckBox Chronometer等等),你有时需要控制字体的大小.Android平 ...
- bootstrap 全局 CSS 样式
http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...
- bootstrap全局css样式
以下从官网抄来的,感觉还是很实用的,运用得好,灵活运用,非常方便快捷,能大大提高开发效率,也为调整不同尺寸的屏幕节省了时间. hidden-xs @media (max-width: 767px){ ...
- 响应式布局和BootStrap 全局CSS样式
1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...
- 14、响应式布局和BootStrap 全局CSS样式知识点总结-part1
1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...
- Sass预定义一些常用的样式
一.编写sass文件时, 目录不能有中文, 如: E:\\CPC手机, 会报错exception while processing events: incompatible character enc ...
- Flink Pre-defined Timestamp Extractors / Watermark Emitters(预定义的时间戳提取/水位线发射器)
https://ci.apache.org/projects/flink/flink-docs-release-1.6/dev/event_timestamp_extractors.html 根据官网 ...
- Bootstrap基本CSS样式
一.简介.使用 1.简介 Bootstrap 来源于 Twitter,是一款基于 Html.Css.JavaScript 的前端UI框架.可以方便.快速的开发web界面. 教程:https://www ...
随机推荐
- ServerSocketChannel
Java NIO 中的 ServerSocketChannel 是一个可以监听新进来的 TCP 连接的通道, 就像标准 IO 中的 ServerSocket 一样.ServerSocketChanne ...
- iOS开发之圆角指定 分类: ios技术 2015-05-25 16:26 191人阅读 评论(0) 收藏
如果需要将UIView的4个角全部都为圆角,做法相当简单,只需设置其Layer的cornerRadius属性即可(项目需要使用QuartzCore框架).而若要指定某几个角(小于4)为圆角而别的不变时 ...
- css清除浮动float的三种方法总结
原文地址: http://my.oschina.net/leipeng/blog/221125 张大神的解析: http://www.zhangxinxu.com/wordpress/2010/01/ ...
- 使用SSH搭建用户注册登录系统
[转]http://blog.sina.com.cn/s/blog_a6a6b3cd01017c57.html 什么是SSH? SSH对应 struts spring hibernatestruts ...
- 安卓 canvas
[转]http://blog.sina.com.cn/s/blog_61ef49250100qw9x.html(easy) [转]http://blog.csdn.net/rhljiayou/arti ...
- sql语句的截取字符串下标是从1开始
这里的指的sqliter数据库 substr函数 substr(date,1,10)
- Python爬虫框架Scrapy安装使用步骤
一.爬虫框架Scarpy简介Scrapy 是一个快速的高层次的屏幕抓取和网页爬虫框架,爬取网站,从网站页面得到结构化的数据,它有着广泛的用途,从数据挖掘到监测和自动测试,Scrapy完全用Python ...
- 如何解决Ajax跨域问题-1
如何解决Ajax跨域问题 最近在做AJAX调用C的问题,出现跨域问题,学习总结如下: 在做ajax读取数据的时候,经常会遇到ajax需要跨域的问题,但由于浏览器安全方面的限制,XMLHttpReque ...
- ReactiveCocoa 设置绑定注意事项
要在ViewLoad里面进行绑定,因为在init中还没有初始化界面,所有绑定会无效
- 1.TCP/IP基本概念
为什么会有TCP/IP协议 在世界上各地,各种各样的电脑运行着各自不同的操作系统为大家服务,这些电脑在表达同一种信息的时候所使用的方法是千差万别.就好像圣经中上帝打乱了各地人的口音,让他们无法合作一样 ...