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将自己的静态项目免费部署到线上. 如果你只是做一些简单的静态项目做展示,付出这么大的时 ...
随机推荐
- ccc 设置图片位置
cc.Class({ extends: cc.Component, properties: { player:{ default:null, type:cc.Sprite } }, // use th ...
- 转：苹果应用商店DNS修改加快下载速度
苹果应用商店DNS修改加快下载速度 具体方法:依次点击进入[设置]→[无线局域网]→[WiFi网络右侧小i图标]→更改DNS地址,可以按照自身需求选择以下某个DNS进行更换. OpenDNS:208. ...
- Android -- 加载布局
如果在Activity中用到了别的Layout ,比如对话框等,你还要使用对话框中的组件,如TextView等,必须要先加载布局,然后才能使用里面的控件, 如 : View view = View.i ...
- BZOJ3653: 谈笑风生
Description 设T 为一棵有根树,我们做如下的定义:• 设a和b为T 中的两个不同节点.如果a是b的祖先,那么称“a比b不知道高明到哪里去了”.• 设a 和 b 为 T 中的两个不同节点.如 ...
- 7zip ubuntu使用
http://www.cnblogs.com/yiwd/p/3649094.html 安装: sudo apt-get install p7zip 解压: 7zr x file -r -o./path ...
- java list 交集 并集 差集 去重复并集
package com; import java.util.ArrayList;import java.util.Iterator;import java.util.List; public clas ...
- MongoDB用户权限基本操作
查看当前数据库的全部用户 > show users{ "_id" : ObjectId("4dedeeae26e7516d69948e33" ...
- 30．编写一个Shape类，具有属性：周长和面积； 定义其子类三角形和矩形，分别具有求周长的方法。 定义主类E，在其main方法中创建三角形和矩形类的对象， 并赋给Shape类的对象a、b，使用对象a、b来测试其特性。
package zuoye8; public abstract class Shape { private double zhouchang ; private double mianji ; pub ...
- super()和this()的区别
1)调用super()必须写在子类构造方法的第一行,否则编译不通过.每个子类构造方法的第一条语句,都是隐含地调用super(),如果父类没有这种形式的构造函数,那么在编译的时候就会报错. 2)supe ...
- 示例在同一台机器上使用RMAN克隆数据库
1.查看主库ZDJS并使用RMAM进行备份 [oracle@std ~]$ sqlplus '/as sysdba' SQL*Plus: Release - Production on Wed Jan ...