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加深的更多相关文章

  1. [后端人员耍前端系列]Bootstrap篇：30分钟快速掌握Bootstrap

    一.引言 很久没有写过博客了,但是最近这段时间都没有闲着,接触了很多方面.比如一些前端框架和组件.还有移动开发React-Native.以及对.NET框架设计的一些重新认识.这些内容在接下来的时间都会 ...

  2. web 前端常用组件【03】Bootstrap Multiselect

    实际的项目网站中或多或少的或用到多选框,我选用的一款是 Bootstrap Multiselect. 官方文档:http://www.kuitao8.com/demo/20140224/1/boots ...

  3. 《深入理解bootstrap》读书笔记：第4章 CSS组件（下）

    十. 标签(.label类,label-xxx) 高亮一些标题部分. 1 2 3 4 5 6 <h1>HELLO<span class="label label-defau ...

  4. 《深入理解bootstrap》读书笔记：第三章 CSS布局

    一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img- ...

  5. bootstrap 入门

    bootstrap 入门 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&q ...

  6. bootstrap全局CSS样式学习

    参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...

  7. 《玩转Bootstrap（基础）》笔记

    基本的HTML模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  8. Bootstrap警告框

    前面的话 在网站中,网页总是需要和用户一起做沟通与交流.特别是当用户操作上下文为用户提供一些有效的警示框,比如说告诉用户操作成功.操作错误.提示或者警告等.在Bootstrap框架有一个独立的组件,实 ...

  9. Bootstrap 实战之响应式个人博客 （一）

    一.示例 1.主页 2.博客详情页 3.在线地址 在线地址:入口 Addition:这里使用github-page将自己的静态项目免费部署到线上. 如果你只是做一些简单的静态项目做展示,付出这么大的时 ...

随机推荐

  1. iOS Cocoapods的pod install出现的某个错误 but they required a higher minimum deployment target.

    关于cocoapods的安装和使用的基本教程: http://my.oschina.net/vimfung/blog/182427?fromerr=j7l3DvCG   出现以下错误提示: Specs ...

  2. 寻找房间中心zz

    Finding the Centroid of a Room Boundary It's been a while since my last post and I'm sure most of yo ...

  3. CF# Educational Codeforces Round 3 C. Load Balancing

    C. Load Balancing time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...

  4. 树形DP水题杂记

    BZOJ1131: [POI2008]Sta 题意:给出一个N个点的树,找出一个点来,以这个点为根的树时,所有点的深度之和最大. 题解:记录每个点的深度,再根据根节点的深度和逐层推导出其他点的深度和. ...

  5. ubifs核心对象 -- TNC和LPT

              文件系统的核心问题是存储.这里面隐含2个问题:1)存储什么?2)存储到哪里?文件系统中的各种技术手段都是如何高效的解决这2个问题.ubifs用node标准化每一个存储对象,用lpr ...

  6. ACM: Gym 100935B Weird Cryptography - 简单的字符串处理

    Weird Cryptography Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u ...

  7. HDU - 人见人爱A^B

    Description 求A^B的最后三位数表示的整数. 说明:A^B的含义是“A的B次方”  Input 输入数据包含多个测试实例,每个实例占一行,由两个正整数A和B组成(1<=A,B< ...

  8. dom事件不求甚解，色解事件捕获和冒泡

    以前对事件只会用jq的bind绑定一下,脑海里留着书中的事件循环,一直认为事件就是这儿循环的,最近看园子里的文章,对事件的了解更模糊了 所以我做了个小实验,总结一下看的这些零零碎碎的文章,如果总结错了 ...

  9. URAL 1057. Amount of Degrees(数位DP)

    题目链接 我看错题了...都是泪啊,不存在3*4^2这种情况...系数必须为1... #include <cstdio> #include <cstring> #include ...

  10. BZOJ4176: Lucas的数论

    Description 去年的Lucas非常喜欢数论题,但是一年以后的Lucas却不那么喜欢了. 在整理以前的试题时,发现了这样一道题目“求Sigma(f(i)),其中1<=i<=N”,其 ...