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">&times;</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将自己的静态项目免费部署到线上. 如果你只是做一些简单的静态项目做展示,付出这么大的时 ...

随机推荐

Experimental Educational Round: VolBIT Formulas Blitz
cf的一次数学场... 递推 C 题意:长度<=n的数只含有7或8的个数分析:每一位都有2种可能,累加不同长度的方案数就是总方案数组合 G 题意:将5个苹果和3个梨放进n个不同的盒子里的方案 ...
RColorBrewer包---R语言的配色方案
// RColorBrewer包介绍 RColorBrewer包提供了3套很好的配色方案.用户只需要指定配色方案的名称,就可以用包中的brewer.pal()函数生成颜色.这3套配色方案包括: 连续型 ...
hive0.12 rcfile gzip 测试
创建test_rc; 让后从老数据中插入test_rc中, select test_rc 中插入的数据,报如下错误: Failed with exception java.io.IOException ...
ACM 奋斗的小蜗牛
奋斗的小蜗牛时间限制:1000 ms | 内存限制:65535 KB 难度:1 描述传说中能站在金字塔顶的只有两种动物,一种是鹰,一种是蜗牛.一只小蜗牛听了这个传说后,大受鼓舞,立志要爬上 ...
ACM: 限时训练题解- Travelling Salesman-最小生成树
Travelling Salesman After leaving Yemen, Bahosain now works as a salesman in Jordan. He spends mos ...
转自虫师：性能测试的 Check List
原文地址:http://www.cnblogs.com/jackei/archive/2006/03/24/357372.html 1. 开发人员是否提交了测试申请? 2. 测试对象是否已经明确? 3 ...
jquery delay（）介绍及使用指南
.delay()是用来在jQuery动画效果和类似队列中是最好的.但是,由于其本身的限制,比如无法取消延时——.delay(),它不是JavaScript的原生 setTimeout函数的替代品,这可 ...
Hadoop、Zookeeper、Hbase分布式安装教程
参考: Hadoop安装教程_伪分布式配置_CentOS6.4/Hadoop2.6.0 Hadoop集群安装配置教程_Hadoop2.6.0_Ubuntu/CentOS ZooKeeper-3.3 ...
GO语言练习：不定参数函数
1.代码 2.运行 1.代码 package main import "fmt" func MyPrintf(args ...interface{}){ for _, arg := ...
如何在Linux中使用rz/sz工具进行文件传输
在Linux中,使用rz/sz工具能够进行Linux和windows之间的文件传输,那么要如何使用rz/sz工具工具呢?下面小编就给大家介绍下Linux下如何使用rz/sz工具进行文件传输,一起来学习 ...

bootstrap加深

bootstrap加深的更多相关文章

随机推荐

热门专题