bootstrap1总结
bootstrap中的排版----标题:
标题(h1~h6/.h1~.h6)
副标题(small)
h1:36px
h2:30px
h3:24px
h4:18px
h5:14px
h6:12px
排版---文本:
p标签:默认14px,行高20px;段落的底部外边距设置了10px;
排版-----对齐
.text-left,.text-right,text-center
排版-----大小写
.text-loweercase:这个是让网页中的大写变成小写。
.text-uppercase :所有小写变大写
.text-capitalize: 首字母大写其余都小写。
代码的应用:
mark:是文本的后边的样式,它有一个颜色的底边。
del删除文本的样式
ins/u:是插入文本,就是下划线。
small:文本变小。
strong :加粗。
排版-------表格:
带边框的表格:.table-bordered
条纹状的表格:.table-striped
悬停变色:.table-hover
紧凑风格:table-condensed
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>标题一</th>
<th>标题一</th>
<th>标题一</th>
<th>标题一</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容1</td>
<td>内容1</td>
<td>内容1</td>
</tr>
<tr class="active">
<td>内容1</td>
<td>内容1</td>
<td>内容1</td>
<td>内容1</td>
</tr>
<tr class="success">
<td>内容1</td>
<td>内容1</td>
<td>内容1</td>
<td>内容1</td>
</tr>
<tr class="info">
<td>内容1</td>
<td>内容1</td>
<td>内容1</td>
<td>内容1</td>
</tr>
<tr class="waring">
<td>内容1</td>
<td>内容1</td>
<td>内容1</td>
<td>内容1</td>
</tr>
<tr class="danger">
<td>内容1</td>
<td>内容1</td>
<td>内容1</td>
<td>内容1</td>
</tr>
</tbody>
</table>
</tr>
排版-------表单:
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="">这是一个输入框</label>
<input type="text" class="form-control input-lg input-sm input-" placeholder="这是一个输入框"> </div>
<div class="form-group has-success" >
<label class="" for="">这是一个输入框</label>
<select name="" id="" class="form-control">
<option value="">北京</option>
<option value="">北京</option>
<option value="">北京</option>
<option value="">北京</option> </select>
</div>
<div class="form-group has-waring">
<label class="control-lable" for="">这是一个输入框</label>
<textarea class="form-control" name="" id="" cols="30" rows="10"></textarea>
</div>
</form>
排版-------表单(二):
<button class="btn btn-default btn-lg">按钮</button>
<button class="btn btn-success btn-sm">按钮</button>
<button class="btn btn-primary btn-block">按钮</button>
<button class="btn btn-info" disabled="disabled">按钮</button>
<button class="btn btn-warning">按钮</button>
<button class="btn btn-danger">按钮</button>
<button class="btn btn-link">按钮</button>
<a class="btn btn-danger" href="" >22222</a>
图片的-------形状
圆角:.img-rounded
圆角:.img-cricle
带有边框的圆角圆形:.img-thumbnail
辅助类:
文本颜色,背景颜色,状态设置,三角符号
viewport:
meta标签中的viewport:
1.width,height
2.user-scalsble,initial-scale
3.maximum-scale,minimun-scale
响应式开发:栅格
单位:
px:常用
em:适用于手机端
rem:会继承父元素的大小。
字体图标:
体积小便于加载:
无需重复设计:
方便引用:
bootstrap:同时也提供了一些图标库,Glyphicons,下面是图标的引用
下拉菜单:
bootstrap1总结的更多相关文章
- bootstrap1
让bootstarp3 支持ie的兼容模式: 支持浏览器的响应式布局: 是指网页既可以用在pc上,也可以用在手机上, 而且不需要修改源文件. bootstrap包括: css文件, 只需要加载: cs ...
- bootStrap-1
bootstrap是什么? 1.简单灵活可用于架构流行的用户界面和交互借口的Html.css/javascript工具集. 2.基于html5.css3的bootstrap,具有大量的诱人特性:友好的 ...
- bootstrap1相关学习文档
<em>Bootstrap 框架</em> //倾斜 4.对齐 //设置文 ...
- bootstrap1.3
<html> <head> <meta charset="UTF-8"> <title></title> ...
- bootstrap1.2
<html> <head> <meta charset="UTF-8"> <title></title> ...
- bootstrap1.1
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
- 三石推荐!把 Bootstrap 小清新带回家!
无敌传送门:http://fineui.com/demo_pro/default.aspx?theme=bootstrap1&menu=accordion 喜欢就来赞一个! 把麻烦留给三石 ...
- Web前端学习笔记:Bootstrap框架
很久之前就有很多人给我推荐twitter的Bootstrap框架,但是直到前几天我才真正学习了下Bootstrap,的确是相当棒的框架,至少从视觉体验上超越了很多以前碰到了前端UI框架.今天我要聊聊B ...
- Microsoft Orleans 之 入门指南
Microsoft Orleans 在.net用简单方法构建高并发.分布式的大型应用程序框架. 原文:http://dotnet.github.io/orleans/ 在线文档:http://dotn ...
随机推荐
- LINUX内核及应用程序移植工作
1. 添加工作用户 [root@localhost ~]#useradd -G root -g root -d/home/arm arm 2. 建立工作目录 [arm@localhost arm]$m ...
- Keil5-建立第一个STM32工程
此致:特别感谢作者Lomo-chen所写的文章给我的帮助,我尝试做了一下,成功了,今天整理一下. 一.建立文件夹: 1.在桌面或其他盘建立一个文件夹,此处名称为Test,用来存放工程程序. 2.在Te ...
- 【学术篇】SDOI2009 SuperGCD
特别说明: 为了避免以后搬家时的麻烦, 这里的文章继续沿用csdn的风格和分类好了~ Emmmm这个题是一道高精度的模板题啊~ 既然是高精度的裸题, 那我们这些懒人当然是选择:用python啦~ 懒癌 ...
- ajax-jq
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- python-面向对象-01课堂笔记
面向对象 ''''1.面向过程编程 核心是"过程"二字,过程指的是解决问题的步骤,即先干什么再干什么 基于该思想编写程序就好比在编写一条流水线,是一种机械式的思维方式 ...
- Q:微信小程序一次性订阅消息(前台收集)
说明:官方文档(https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message.ht ...
- vue-cli搭建vue开发环境
前置环境 npm install -g vue-cli vue list 已安装环境后: vue init webpack sell 建立项目名称sell----------------------- ...
- C/C++ 无法解析的外部符号解决方案
{ //0 类的成员函数没有实现就调用 //1 调用没有编译生成cpp 的函数 //2 没有加载lib //3 最重要的就是有声明无实现 }
- ZF、TP、CI等各种框架的区别
(原标题:面试常见问题之ZF.TP.CI等框架的区别 http://blog.163.com/m13341159039_1/blog/static/245953061201522092212820/) ...
- NX二次开发-UFUN创建倒圆UF_MODL_create_blend
NX9+VS2012 #include <uf.h> #include <uf_modl.h> UF_initialize(); //创建块 UF_FEATURE_SIGN S ...