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

随机推荐

注册事件处理程序onclick和addEventListener、attachEvent
一.设置HTML标签属性为事件处理程序(注意和下面的设置javascript对象属性为事件处理程序是不同的) 用于设置文档元素事件处理程序属性也能化成对应的HTML标签的属性.如果这样做,属性值应该是 ...
Codeforces 629C Famil Door and Brackets（DP）
题目大概说给一个长m的括号序列s,要在其前面和后面添加括号使其变为合法的长度n的括号序列,p+s+q,问有几种方式.(合法的括号序列当且仅当左括号总数等于右括号总数且任何一个前缀左括号数大于等于右括号 ...
Linux添加Terminal快捷键和文件系统的总结
一:Fedora 怎样设置终端快捷键百度连接:http://jingyan.baidu.com/article/cb5d61053598ed005d2fe05c.html ubuntu里面不用设置就 ...
Codeforces Round #363 Div.2[111110]
好久没做手生了,不然前四道都是能A的,当然,正常发挥也是菜. A:Launch of Collider 题意:20万个点排在一条直线上,其坐标均为偶数.从某一时刻开始向左或向右运动,速度为每秒1个单位 ...
CentOS6.4 安装MongoDB
1.下载MongoDB(64位) http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-2.4.9.tgz 或 http://pan.baidu.c ...
topcoder SRM 618 DIV2 WritingWords
只需要对word遍历一遍即可 int write(string word) { ; ; i < word.length(); ++ i){ cnt+=word[i]-; } return cnt ...
UVA 558 判定负环，spfa模板题
1.UVA 558 Wormholes 2.总结:第一个spfa,好气的是用next[]数组判定Compilation error,改成nexte[]就过了..难道next还是特殊词吗题意:科学家, ...
spring Thymeleaf 中文乱码
前言: 项目用springmvc+Thymeleaf ,但是发现html中的所有中文都乱码. 但是自己的html的编码确定已经是UTF-8,在web.xml文件里面也添加了CharacterEncod ...
java 深入浅出工厂模式
一.引子话说十年前,有一个暴发户,他家有三辆汽车——Benz奔驰.Bmw宝马.Audi奥迪,还雇了司机为他开车.不过,暴发户坐车时总是怪怪的:上Benz车后跟司机说“开奔驰车!”,坐上Bmw后他说“ ...
怎么控制表单placeholder属性的样式兼容各大浏览器？
当我们使用placeholder的时候会遇到样式的控制和版本的兼容问题(但是还是只有css3支持),以至于达不到我们想要的效果,下面来看一种: 下面是css: .invalid:-moz-placeh ...

bootstrap加深

bootstrap加深的更多相关文章

随机推荐

热门专题