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表达式.为了方便码农们,. ...
随机推荐
- JavaScript设计模式之命令模式
一.命令模式概念 命令模式(Command)的定义是:用来对方法调用进行参数化处理和传送,经过这样处理过的方法调用可以在任何需要的时候执行.也就是说该模式旨在将函数的调用.请求和操作封装成一个单一的对 ...
- 第三方分页控件aspnetPager出现问题解决方法
问题描述: 今天在打开以前的项目使用vs2013打开后并且生成解决方案的时候发现报错了.经过检查发现是由于第三方分页控件aspnetPager在页面上不能引用到了. 解决方法: 1. 首先将AspNe ...
- 如何让IIS 8.0支持无后缀图片的访问
进入“MIME类型”模块后,我们点击右侧的“添加”,然后填好文件扩展名和类型值.对于无后缀的图片文件,扩展名只需填写“点”符号即可,类型值根据图片文件实际的扩展名填写.如果是jpeg格式的,那么就填写 ...
- 如何用angularjs制作一个完整的表格之一__创建简单表格
初步接手人生的第一个项目,需要用angularjs制作表格和实现各种功能,因此遇到了各种问题和以前不熟悉的知识点,在此记录下来,以供大家学习交流,解决方式可能并不完善或符合规范,如果大家有更好的方式欢 ...
- python文件处理
python中对文件处理需要涉及到os模块和shutil模块得到当前工作目录路径:os.getcwd()获取指定目录下的所有文件和目录名:os.listdir(dir)删除文件:os.remove(f ...
- SCJP_104——题目分析(1)
1.1) public class ReturnIt{2) returnType methodA(byte x, double y){3) return (short)x/y*2;4) }5) }wh ...
- 一分钟让你明白CSS中的盒模型
想必初学者对CSS盒模型总是很困惑吧.下面一分钟让你彻底明白盒模型: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" &q ...
- Altera quartus II遇到的问题
编译时提示: Warning (13024): Output pins are stuck at VCC or GND Warning (13410): Pin "SCLK" is ...
- 安卓使用Dialog创建普通对话框
Activity页面简单所以XML不再写出.下面给出核心代码: button1=(Button)findViewById(R.id.button1); //为按钮设置监听器 button1.setO ...
- COJ 0538 购物问题
购物问题 难度级别:C: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 由于换季,ACM商场推出优惠活动,以超低价格出售若干种商品.但是,商场 ...