bootstrap加深
1.安装:
bootstrap中文网:http://www.bootcss.com/ bootstrap.css样式：http://v3.bootcss.com/css/#tables
class='container'定义最外层容器;row为行
2.删格占用百分比示意图：ocean为自定义
3.表格:
4.图片和视频的修改和响应式
5.导航(组件)：Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="www/bootstrap/dist/js/jquery-1.11.2.min.js"></script>
<script src="www/bootstrap/dist/js/bootstrap.min.js"></script>
<title>无标题文档</title>
<link href="www/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--default相当于颜色,浅色的导航;inverse为深色导航-->
<nav class="navbar navbar-default"><!--给一个导航栏-->
<div class="container-fluid"><!--以百分比的形式响应-->
<!--logo-->
<div class="navbar-header">
<a href="#" class="navbar-brand">Start BootStrap</a>
</div>
<!--menu-->
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li><!--active是被选中-->
<li><a href="#">Abote</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
</body>
6.下拉菜单:
<body>
<!--default相当于颜色,浅色的导航;inverse为深色导航-->
<nav class="navbar navbar-default"><!--给一个导航栏-->
<div class="container-fluid"><!--以百分比的形式响应-->
<!--logo-->
<div class="navbar-header">
<a href="#" class="navbar-brand">Start BootStrap</a>
</div>
<!--menu-->
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li><!--active是被选中-->
<li><a href="#">Abote</a></li>
<li><a href="#">Contact</a></li>
<!--下拉菜单-->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">More<span class="caret"></span></a>
<!--data-toggle是<a>标签通过li里的dropdown把li里面的菜单ul展示激活出来-->
<!--dropdown-toggle是给<a>标签的样式，data-toggle="dropdown"是激活当前按钮,来显示里面的内容-->
<!--下拉菜单中具体按钮-->
<ul class="dropdown-menu">
<li><a href="#">Cui</a></li>
<li><a href="#">Zhen</a></li>
<li><a href="#">Yu</a></li>
</ul>
</li>
</ul>
<!--右侧注销按钮-->
<ul>
<nav class="nav navbar-nav navbar-right"><!--在菜单右侧添加按钮-->
<li><a href="#">LogoOut</a></li>
</nav>
</ul>
</div>
</div>
</nav>
</body>
7.菜单合并:菜单缩小后自动出现一个botton,点击booton菜单显示或隐藏
<body>
<!--default相当于颜色,浅色的导航;inverse为深色导航-->
<nav class="navbar navbar-default"><!--给一个导航栏-->
<div class="container-fluid"><!--以百分比的形式响应-->
<!--logo-->
<div class="navbar-header">
<a href="#" class="navbar-brand">Start BootStrap</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#maininNavBar">
<!--collapse当达到一定宽度的时候，激活collapse,data-target意指当点击botton的时候,要展示出来哪个元素里面的内容-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--menu-->
<div class="collapse navbar-collapse" id="maininNavBar"><!--class、id与button联系起来-->
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li><!--active是被选中-->
<li><a href="#">Abote</a></li>
<li><a href="#">Contact</a></li>
<!--下拉菜单-->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">More<span class="caret"></span></a><!--data-toggle是<a>标签通过li里的dropdown把li里面的菜单ul展示激活出来-->
<!--dropdown-toggle是给<a>标签的样式，data-toggle="dropdown"是激活当前按钮,来显示里面的内容-->
<!--下拉菜单中具体按钮-->
<ul class="dropdown-menu">
<li><a href="#">Cui</a></li>
<li><a href="#">Zhen</a></li>
<li><a href="#">Yu</a></li>
</ul>
</li>
</ul>
<!--右侧注销按钮-->
<ul>
<nav class="nav navbar-nav navbar-right"><!--在菜单右侧添加按钮-->
<li><a href="#">LogoOut</a></li>
</nav>
</ul>
</div>
</div>
</nav>
</body>
8.well样式 & alert警告框
WELL样式:
警告框:
警告框的四种类型:
可关闭的警告框：
9.模态框：modal
<div class="container">
<h2>login</h2>
<button type="button" class=" btn btn-success" data-toggle="modal" data-target="#popup">Click me!</button>
<!--modal-->
<div class="modal fade" id="popup"><!--和按钮关联起来-->
<div class="modal-dialog">
<div class="modal-content">
<!--header-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button> <!--关闭小按钮的效果-->
<!--设置类为close关闭,关闭class名为modal的类,规定关闭按钮组件必须写在容器里的最上层,样式才能出现想要的效果-->
<h3 class="modal-title">login</h3>
</div>
<!--body-->
<div class="modal-body">
<form role="form">
<!--Email-->
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" /><!--placeholder是指占位-->
</div>
<!--password-->
<div class="form-group">
<input type="password" class="form-control" placeholder="password" /><!--placeholder是指占位,在input里输入信息前占位-->
</div>
</form>
</div>
<!--footer-->
<div class="modal-footer">
<button class="btn btn-primary">
Log In
</button>
</div>
</div>
</div>
</div>
</div>
bootstrap加深的更多相关文章
- [后端人员耍前端系列]Bootstrap篇：30分钟快速掌握Bootstrap
一.引言 很久没有写过博客了,但是最近这段时间都没有闲着,接触了很多方面.比如一些前端框架和组件.还有移动开发React-Native.以及对.NET框架设计的一些重新认识.这些内容在接下来的时间都会 ...
- web 前端常用组件【03】Bootstrap Multiselect
实际的项目网站中或多或少的或用到多选框,我选用的一款是 Bootstrap Multiselect. 官方文档:http://www.kuitao8.com/demo/20140224/1/boots ...
- 《深入理解bootstrap》读书笔记：第4章 CSS组件（下）
十. 标签(.label类,label-xxx) 高亮一些标题部分. 1 2 3 4 5 6 <h1>HELLO<span class="label label-defau ...
- 《深入理解bootstrap》读书笔记：第三章 CSS布局
一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img- ...
- bootstrap 入门
bootstrap 入门 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&q ...
- bootstrap全局CSS样式学习
参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...
- 《玩转Bootstrap（基础）》笔记
基本的HTML模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- Bootstrap警告框
前面的话 在网站中,网页总是需要和用户一起做沟通与交流.特别是当用户操作上下文为用户提供一些有效的警示框,比如说告诉用户操作成功.操作错误.提示或者警告等.在Bootstrap框架有一个独立的组件,实 ...
- Bootstrap 实战之响应式个人博客 （一）
一.示例 1.主页 2.博客详情页 3.在线地址 在线地址:入口 Addition:这里使用github-page将自己的静态项目免费部署到线上. 如果你只是做一些简单的静态项目做展示,付出这么大的时 ...
随机推荐
- Trie + DP LA 3942 Remember the Word
题目传送门 题意:(训练指南P209) 问长字符串S能由短单词组成的方案数有多少个 分析:书上的做法.递推法,从后往前,保存后缀S[i, len-1]的方案数,那么dp[i] = sum (dp[i+ ...
- webvnc利器-noVNC集成实战
我们在做一个虚拟机管理平台,底层虚拟化使用KVM,我们希望在网页上操作虚拟机. 一开始用applet嵌在网页内实现webvnc,不过由于applet的在浏览器上运行安全性限制,我们需要一个新的方案.此 ...
- JavaScript 全局对象
全局属性和函数可用于所有内建的 JavaScript 对象. 顶层函数(全局函数) 函数 描述 decodeURI() 解码某个编码的 URI. decodeURIComponent() 解码一个编码 ...
- address元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- poj2109
刚开始看着道题时,感觉不用高精度好像就没法做,想了半天然后果断去看依然博客(这样确实不好),发现又用到了double(这个可以放“+” “-” 300多位的家伙!!!) #include <io ...
- BZOJ4379 : [POI2015]Modernizacja autostrady
两遍树形DP求出每个点开始往上往下走的前3长路以及每个点上下部分的直径. 枚举每条边断开,设两边直径分别为$A,B$,则: 对于第一问,连接两边直径的中点可得直径为$\max(A,B,\lfloor\ ...
- MyIsam和InnoDB的区别
个人见解: 1.最主要的差别就是Innodb 支持事务处理与外键和行级锁.而MyISAM不支持 所以有用到事务处理和外键的,要用Innodb 2. InnoDB 中不保存表的具体行数,也就是说,执行s ...
- Zepto Code Rush 2014 A. Feed with Candy
此题用贪心求解, 首先将caramel drop类别的糖果按照高度从小到大排序,如果高度相同,按照重量从小到大排序 将fruit drop类别的糖果按照高度从小到大排序,如果高度相同,按照重量从小到大 ...
- 《从陷阱中学习C/C++》读书笔记
1.运算符优先级很容易引起问题,如a = 4<<1+1,由于<<的优先级低于+,故其执行过程为 a = 4<<(1+1); 常见的运算符优先关系:(具体参照博客) ...
- [深入浅出Windows 10]分屏控件（SplitView）
4.18 分屏控件(SplitView) 分屏控件(SplitView)是Windows 10新增的控件类型,也是Windows 10通用应用程序主推的交互控件,通常和一个汉堡按钮搭配作为一种抽屉式菜 ...