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

随机推荐

Python基础6- 流程控制之if条件语句
Python条件语句是通过判断一条或多条条件语句的执行结果来决定执行哪条代码块的.Python 中if 语句用于控制程序的执行,基本形式为:if 判断条件: 执行语句……else: 执行语句…… #c ...
daemontools管理fast-fail的zookeeper
daemontools项目:http://cr.yp.to/daemontools.html 1.安装daemontools mkdir /package /package cd /package w ...
使用 smartupload 上传图片
使用 smartupload 请参见 elleniou 的博客 : http://www.cnblogs.com/elleniou/archive/2012/09/24/2700583.html
ACM: I Hate It 解题报告 - 线段树
I Hate It Time Limit:3000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit Status Des ...
《深入理解Windows Phone 8.1 UI控件编程》基于最新的Runtime框架
<深入理解Windows Phone 8.1 UI控件编程>本书基于最新的Windows Phone 8.1 Runtime SDK编写,全面深入地论述了最酷的UI编程技术:实现复杂炫酷的 ...
BZOJ3343: 教主的魔法分块
2016-05-28 10:27:19 题目:http://www.lydsy.com/JudgeOnline/problem.php?id=3343 比较显然的分块题,分块后块内排序,维护整块的附 ...
数组的Clone方法
public void Test() { ,,}; var arr2 = arr1; var arr3 = (int[])arr1.Clone(); //浅拷贝 arr1[] = ; //arr2[0 ...
BZOJ4503: 两个串
Description 兔子们在玩两个串的游戏.给定两个字符串S和T,兔子们想知道T在S中出现了几次, 分别在哪些位置出现.注意T中可能有“?”字符,这个字符可以匹配任何字符. Input 两行两个字 ...
热烈庆祝华清远见成功自主研发Farsight TV 智能机顶盒
近日,华清远见研发中心再传喜讯:Farsight TV 智能机顶盒研发成功并投入教学!这是华清远见研发中心继开源平板电脑.智能医疗终端.智能家居终端后独立成功研发的又一智能硬件!至此,开创了华清远见自 ...
Java_关于App class loader的总结
Java本身是一种设计的非常简单,非常精巧的语言,所以Java背后的原理也很简单,归结起来就是两点: 1.JVM的内存管理理解了这一点,所有和对象相关的问题统统都能解决 2.JVM Class Lo ...

bootstrap加深

bootstrap加深的更多相关文章

随机推荐

热门专题