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将自己的静态项目免费部署到线上. 如果你只是做一些简单的静态项目做展示,付出这么大的时 ...
随机推荐
- ACM ICPC 2015 Moscow Subregional Russia, Moscow, Dolgoprudny, October, 18, 2015 I. Illegal or Not?
I. Illegal or Not? time limit per test 1 second memory limit per test 512 megabytes input standard i ...
- Twitter Storm源代码分析之ZooKeeper中的目录结构
徐明明博客:Twitter Storm源代码分析之ZooKeeper中的目录结构 我们知道Twitter Storm的所有的状态信息都是保存在Zookeeper里面,nimbus通过在zookeepe ...
- 相遇点对 & 数点问题
题意: 一个长为l的环,环上有n个点,每个点以一定的速度顺时针或逆时针运动,两个点相遇即某一时刻内两个点位置相同. 求有多少点对相遇----相同点对出现多次仅统计一次. SOL: 考试的时候想到用线段 ...
- 简单图解设置MYSQL可以通过其他机器远程访问,开启远程访问权限
开始,运行---cmd,然后cd到mysql.exe目录,然后照着下图红色框中输入 注意: 1.MySQL 5.7查询时候应该输入select host,user,authentication_str ...
- BZOJ 1798 题解
1798: [Ahoi2009]Seq 维护序列seq Time Limit: 30 Sec Memory Limit: 64 MBSubmit: 5531 Solved: 1946[Submit ...
- 状压dp题目总结
这块比较薄弱.. 来几道水题: BZOJ1231: [Usaco2008 Nov]mixup2 混乱的奶牛 f[i][j]状态i结尾j的个数 ;i<=tot;i++) ;j<=n;j++) ...
- PHP IDE phpstorm 快捷键
这篇文章主要介绍了PHP IDE phpstorm 常用快捷键,本文分别列出了mac系统和Windows系统下的phpstorm快捷键,需要的朋友可以参考下 一.mac电脑phpstorm快捷键 co ...
- Android---表格布局
最简单的表格布局
- 项目管理gitflow的用法(转)
在这里主要讲一下我在项目中用到的关于gitflow的用法. 公司的项目中,专门有一台用来存放版本库的服务器,路径是在默认的安装目录/opt/git/,那么在使用的时候,如果你是一个功能模块或者是一 ...
- JS相关环境搭建：Nodejs、karma测试框架、jsDuck、Express
第一章:压缩js(nodejs,uglify) 第一步:安装nodejs环境 直接下载http://www.nodejs.org/download/ 下载完成后直接下一步下一步即可,完了我们就具有no ...