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将自己的静态项目免费部署到线上. 如果你只是做一些简单的静态项目做展示,付出这么大的时 ...
随机推荐
- HBase Shell 常见操作
1.一般操作 status 查看状态 version 查看HBase版本 2.DDL操作 create 'member','member_id','address','info' 创建了一个membe ...
- UVA 11754 (暴力+中国剩余定理)
题目链接: http://www.bnuoj.com/v3/problem_show.php?pid=20172 题目大意:有C个模方程,每个方程可能有k余数,求最小的S个解. 解题思路: 看见模方程 ...
- 20145308刘昊阳 《Java程序设计》实验五报告
20145308刘昊阳 <Java程序设计>实验五 Java网络编程及安全 实验报告 实验名称 Java网络编程及安全 实验内容 1．掌握Socket程序的编写: 2．掌握密码技术的使用: ...
- Codeforces Round #250 (Div. 2) A. The Child and Homework
注意题目长度不能考虑前缀,而且如果即存在一个选项的长度的两倍小于其他所有选项的长度,也存在一个选项的长度大于其他选项长度的两倍,则答案不是一个好的选择,只能选择C. #include <iost ...
- ACM 字母统计
字母统计 时间限制:3000 ms | 内存限制:65535 KB 难度:1 描述 现在给你一个由小写字母组成字符串,要你找出字符串中出现次数最多的字母,如果出现次数最多字母有多个那么输出最小 ...
- linux 远程桌面的配置
root根用户登录在/root目录下#rpm -q vnc vnc-server查询已安装vnc的客户端和服务器端vnc-4.1.1-36vnc-server-4.1.1-36 #vi /etc/sy ...
- C语言（4）
C语言(4)--数据类型 C语言在用“/”是,注意左右两边都是整数时,商也是只有整数部分. 下面介绍一下C语言常用的数据类型: 注意: 1.char类型数据范围:256中字符. 2.float和do ...
- JS实现设为首页与加入收藏
<script type="text/javascript"> // 设置为主页 function SetHome(obj, vrl) { try { obj.styl ...
- 递归merge排序
package sort; import java.io.BufferedReader; import java.io.InputStreamReader; import java.util.Scan ...
- [LintCode] Length of Last Word 求末尾单词的长度
Given a string s consists of upper/lower-case alphabets and empty space characters ' ', return the l ...