boostrap预定义样式风格
- 预定义样式分为五种:primary(首选项)、success(成功)、info(一般信息)、warning(警告)、danger(危险),demo如下,设置不同的class展示不同的样式
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<style>
.glyphicon-heart {font-size: 100px; color: red;}
</style>
</head>
<body> <div class="container">
<input type="button" value="默认样式" />
<input type="button" class="btn btn-primary" value="首选项" />
<input type="button" class="btn btn-success" value="成功" />
<input type="button" class="btn btn-info" value="一般信息" />
<input type="button" class="btn btn-warning" value="警告" />
<input type="button" class="btn btn-danger" value="危险" /> </div> </body>
<script src="js/jquery-2.1.3.js"></script>
<script src="js/bootstrap.js"></script>
</html>- 除了上述的btn-*外还有其他的一些class,比如(bg | text | alert)-(primary | success | info | warning | danger)等,可分别设置不同的样式
- 如下是一个面板控件
- 网址:http://v3.bootcss.com/components/#panels
- 一个面板的小demo代码以及效果图如下
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<style>
.glyphicon-heart {font-size: 100px; color: red;}
</style>
</head>
<body> <div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h3>我是面板的标题</h3>
</div>
<div class="panel-body">
我是面板的主体内容
</div>
</div>
</div> </body>
<script src="js/jquery-2.1.3.js"></script>
<script src="js/bootstrap.js"></script>
</html>
boostrap预定义样式风格的更多相关文章
- bootstrap 预定义样式风格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Android预定义样式
字体大小 对于能够显示文字的控件(如TextView EditText RadioButton Button CheckBox Chronometer等等),你有时需要控制字体的大小.Android平 ...
- Sass预定义一些常用的样式
一.编写sass文件时, 目录不能有中文, 如: E:\\CPC手机, 会报错exception while processing events: incompatible character enc ...
- Linux学习--第十天--bash脚本、用户自定义变量、环境变量、位置参数变量、预定义变量、标准输入输出、wc、history、dd、PS1
shell简介 分为两种c shell 和b shell b shell:sh.ksh.Bash.psh.zsh: (Bash和sh兼容,linux基本shell是Bash) c shell:csh. ...
- arcgis api for js共享干货系列之二自定义Navigation控件样式风格
arcgis api for js默认的Navigation控件样式风格如下图: 这样的风格不能说不好,各有各的爱好,审美观,这里也不是重点,这里的重点是如何自定义一套自己喜欢的样式风格呢:自己自定义 ...
- WebService -- Java 实现之 CXF ( 添加系统预定义的拦截器)
1. 概述 CXF允许我们在webservice的in/out位置添加拦截器.拦截器有两大分类,一类是系统预定义的:另一类是自定义拦截器. 2. 在server端添加拦截器. JaxWsServerF ...
- [Sass]不同样式风格的输出方法
[Sass]不同样式风格的输出方法 众所周知,每个人编写的 CSS 样式风格都不一样,有的喜欢将所有样式代码都写在同一行,而有的喜欢将样式分行书写.在 Sass 中编译出来的样式风格也可以按不同的样式 ...
- PHP预定义接口之 ArrayAccess
最近这段时间回家过年了,博客也没有更新,感觉少学习了好多东西,也错失了好多的学习机会,就像大家在春节抢红包时常说的一句话:一不留神错过了好几亿.废话少说,这篇博客给大家说说关于PHP预定义接口中常用到 ...
- .NET中那些所谓的新语法之三:系统预定义委托与Lambda表达式
开篇:在上一篇中,我们了解了匿名类.匿名方法与扩展方法等所谓的新语法,这一篇我们继续征程,看看系统预定义委托(Action/Func/Predicate)和超爱的Lambda表达式.为了方便码农们,. ...
随机推荐
- Shell test命令
Shell中的 test 命令用于检查某个条件是否成立,它可以进行数值.字符和文件三个方面的测试. 数值测试 参数 说明 -eq 等于则为真 -ne 不等于则为真 -gt 大于则为真 -ge 大于等于 ...
- jquery利用event.which方法获取键盘输入值的代码
jquery利用event.which方法获取键盘输入值的代码,需要的朋友可以参考下. 实例 显示按了哪个键: $("input").keydown(function(event) ...
- 12 Integer to Roman(int转罗马数字Medium)
题目意思:1-3999转罗马数字 思路:从大往小减 ps:这题有点蛋疼 class Solution { public: string intToRoman(int num) { string a[] ...
- thinkphp 内置函数详解
D() 加载Model类M() 加载Model类 A() 加载Action类L() 获取语言定义C() 获取配置值 用法就是 C("这里填写在配置文件里数组的下标")S( ...
- 看源码之Adapter和AdapterView之间的关系
总述 Android中"列表"的实现其实一个典型的MVC模式,其实中AdapterView相当于是View,负责视图的绘制以及视图的事件响应,Adapter相当于是Controll ...
- C#编写的序列化通用类代码
using System; using System.IO; using System.IO.Compression; using System.Runtime.Serialization.Forma ...
- Java获取ip地址的几种方法
以下内容介绍下java获取ip地址的几种思路. 1.直接利用java.net.InetAddress类获取,不过这种方法只在windows环境下有效,在linux环境下只能获取localhost地址( ...
- Topk引发的一些简单的思考
软件工程课程的一个题目:写一个程序,分析一个文本文件中各个词出现的频率,并且把频率最高的10个词打印出来.文本文件大约是30KB~300KB大小. 首先说一下这边的具体的实现都是在linux上实现的. ...
- Linux Weblogic 数据源 TimesTen配置
[wzh@localhost middleware]$ vi wlserver_10.3/common/bin/commEnv.sh [Linux] LD_LIBRARY_PATH=${PATCH_L ...
- JMS 问题java.lang.NoClassDefFoundError: weblogic/security/acl/UserInfo
run: Exception in thread "main" java.lang.NoClassDefFoundError: weblogic/security/acl/User ...