Bootstrap学习

下拉菜单

注意：需要先引入jQuery.js再引入bootstrap.js（依赖前者）

<div class="dropdown pull-right">  //默认就是dropdown可不写，dropup向上弹出，小三角也会自动变为向上

　　<button class="dropdown-toggle btn btn-default " type="button"  data-toggle="dropdown">

　　　　Dropdown<span class="caret"></span>

　　</button>

　　<ul class="dropdown-menu dropdown-menu-right"">

　　　　<li class="dropdown-header">Language</li>

　　　　<li><a role="menuitem">Python</a></li>

　　　　<li class="disabled"><a role="menuitem">Java</a></li>

　　　　<li><a role="menuitem">PHP</a></li>

　　　　<li class="divider"></li>

　　　　<li><a>JavaScript</a></li>

　　</ul>
</div>

按钮组

以CDN的方式引入Bootstrap：<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="btn-group">    //btn-group-vertical  垂直排列    // btn-group-justified 水平铺满容器

    <button type="button" class="btn btn-success">按钮1</button>

    <button type="button" class="btn btn-primary">按钮2</button>

    <button type="button" class="btn btn-danger">按钮3</button>

</div>

效果：          不加btn-group效果： 

可以利用这一功能做一些按钮工具栏，像这样的


还可以在btn-group中嵌套下拉菜单

<div class="btn-group">

　　 <button type="button" class="btn btn-default">1</button>

　　 <button type="button" class="btn btn-default">2</button>

　　 <div class="btn-group">

　　　　 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">3 <span class="caret"></span></button>

　　　 　<ul class="dropdown-menu">

　　　　　　<li><a>A</a></li>

　　　　　  <li><a>B</a></li>

　　　　 </ul>

　　　</div>
</div>

分裂式下拉菜单

<div class="container">

　　<div class="btn-group">

　　　　<button type="button" class="btn btn-info">分裂式</button>  //就是把普通的下拉菜单和前一个按钮放到一个btn-group里了

　　　　<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>

　　　　<ul class="dropdown-menu">

　　　　　　<li><a>A</a></li>

　　　　　　<li><a>B</a></li>

　　　　</ul>

　　　　<button type="button" class="btn btn-warning">按钮2</button>

　　　　<button type="button" class="btn btn-success">按钮3</button>

　　</div>

</div>

输入框组

<div class="input-group">

　　<span class="input-group-addon">❤</span>    //input-group-btn

　　<input type="text" class="form-control" placeholder="UserName"/>

</div>

可以在<span>中加入：字符、标签、单复选框、按钮、下拉菜单。。。。。。

<div class="row">

    <div class="col-lg-5">

        <div class="input-group">

            <input type="text" class="form-control" />

            <div class="input-group-btn">

                <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">Button<span class="caret"></span></button>

                <ul class="dropdown-menu">

                    <li>Hello</li>

                    <li>Hello</li>

                    <li>Hello</li>

                </ul>

            </div>

        </div>

    </div>

</div>

导航栏

实例：

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">   //固定在顶端，需要下面页面设置至少50px的padding，否则会挡住。底端也一样

    <div class="container-fluid">

        <div class="navbar-header">

            <a class="navbar-brand" href="#">❤</a>

        </div>

        <div class="collapse navbar-collapse">

            <ul id="mytab" class="nav navbar-nav">

                <li class="active"><a href="#">Home</a></li>

                <li ><a href="#">Blog</a></li>

                <li ><a href="#">Contact</a></li>

                <li ><a href="#">Learning</a></li>

                <li ><a href="#">Login</a></li>

            </ul>

            <ul class="nav navbar-nav navbar-right">

                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">

                        <span class="glyphicon glyphicon-menu-hamburger"></span>

                    </a>

                    <ul class="dropdown-menu" role="menu">

                        <li role="presentation"><a role="menuitem" href="#">A</a></li>

                        <li role="presentation"><a role="menuitem" href="#">B</a></li>

                        <li role="presentation"><a role="menuitem" href="#">C</a></li>

                        <li role="presentation"><a role="menuitem" href="#">D</a></li>

                    </ul>

                </li>

            </ul>

            <form class="navbar-form navbar-right" role="search">

                <div class="form-group">

                    <input type="text" class="form-control" placeholder="Search" />

                </div>

                <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>

            </form>

        </div>

    </div>

</nav>

面包屑导航

<ol class="breadcrumb">
    <li><a>Home</a></li>
    <li><a>Blog</a></li>
    <li><a>Page</a></li>
</ol>

Home / Blog / Page

分页和翻页

<ul class="pagination">     //  pagination-lg  pagination-sm 
    <li><a href="#">&laquo;</a></li>

    <li><a href="#">1</a></li>

    <li><a href="#">2</a></li>

    <li><a href="#">3</a></li>

    <li><a href="#" >&raquo;</a></li>

</ul>

<ul class="pager">

    <li><a href="#">Previous</a></li>                  //居中显示

    <li><a href="#">Next</a></li>

</ul>

<ul class="pager">

    <li class="previous"><a href="#">&larr;向前</a></li>      //位于两端   都可以添加.disabled禁止点击

    <li class="next"><a href="#">向后&rarr;</a></li>

</ul>

标识(标签)

<span class="label label-default">default</span>   -primary  -info  -success  -warning  -danger

徽章

<a href="#">Messages <span class="badge">3</span></a>

<button type="button" class="btn btn-success" >Messages <span class="badge">100</span></button>

巨幕

<div class="jumbotron">

    <h1>Hello world</h1>

    <p>hellohellohellohellohellohellohellohellohello</p>

    <p><a href="#" class="btn btn-success btn-sm">Go</a></p>

</div>

页头

<div class="page-header">

　　<h1>Here is the title<small> here is the subtitle</small></h1>

</div>

缩略图

<div class="col-xs-6 col-md-4">

    <div class="thumbnail">

        <img src="src/img/junjie.jpg" align="junjie" />

        <div class="caption"><h3>Junjie</h3></div>

        <p>You are so cute!</p>

        <a href="#" class="btn btn-info">分享</a>

        <a href="#" class="btn btn-success">下载</a>

    </div>

</div>

警告框

<div class="alert alert-danger" role="alert">

    <button type="button" class="close" data-dismiss="alert" ><span aria-disabled="true" >&times;</span></button>

    <strong>这是一个可以关闭的警告框</strong>

</div>

进度条

<div class="progress">

    <div class="progress-bar progress-bar-striped progress-bar-danger active" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:30%;">

        30%

    </div>

</div>

列表组

<ul class="list-group ">

    <li class="list-group-item list-group-item-danger">Python</li>

    <li class="list-group-item list-group-item-success">Python</li>

    <li class="list-group-item list-group-item-info">Python</li>

</ul>

<div class="list-group">

    <a href="#" class="list-group-item">

        <h4 class="list-group-item-heading">W3CSchool</h4>

        <p class="list-group-item-text">Python PHP HTML CSS JavaScript</p>

    </a>

    <a href="#" class="list-group-item list-group-item-danger">Python</a>

    <a href="#" class="list-group-item list-group-item-success">PHP</a>

    <a href="#" class="list-group-item list-group-item-info">JavaScript</a>

</div>

媒体对象

<div class="container">

　　<div class="media">

　　　　<a class="media-left" href="#">       //media-right media-middle media-bottom...

　　　　　　<img src="src/img/junjie.jpg" alt="junjie" height="64px" width="64px">

　　　　</a>

　　　　<div class="media-body">

　　　　　　<h4 class="media-heading">

　　　　　　　　Hello Junjie Jun

　　　　　　</h4>

　　　　　　<p>

　　　　　　　　HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHello

　　　　　　　　HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHello

　　　　　　</p>
　　　　</div>

　　</div>

</div>

还可以这样，只需要添加多个<li>就行

<div class="container">
　<ul class="media-list">

　　<li class="media">

　　　　<a class="media-left" href="#">       //media-right media-middle media-bottom...

　　　　　　<img src="src/img/junjie.jpg" alt="junjie" height="64px" width="64px">

　　　　</a>

　　　　<div class="media-body">

　　　　　　<h4 class="media-heading">

　　　　　　Hello Junjie Jun

　　　　　　</h4>

　　　　　　<p>

　　　　　　　　HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHello

　　　　　　　　HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHello

　　　　　　</p>
　　　　</div>

　　</li>

　　<li>...

　</ul>

</div>

面板

<div class="panel panel-success">

    <div class="panel-heading">

        Here is heading

    </div>

    <div class="panel-body">

        这里可以时普通文本、表格、列表等等

    </div>

    <div class="panel-footer">

        something footer

    </div>

</div>

嵌入

<div class="embed-responsive embed-responsive-16by9">

    <iframe class="embed-responsive-item" src="http://10.20.62.139"></iframe>    //不需要再为iframe设置padding等

</div>

<div class="well">

    Hello world

</div>

Bootstrap学习 - 组件的更多相关文章

Bootstrap 学习（1）
简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootst ...
前端框架——BootStrap学习
BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...
详解Bootstrap缩略图组件及警示框组件
缩略图组件缩略图在网站中最常用的就是产品列表页面,一行显示几张图片,有的在图片底下带有标题.描述内容.按钮等信息.bootstrap框架将这部分独立成一个模块组件,通过类名.thumbnail配合b ...
python 全栈开发，Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)
昨日内容回顾 ajax //get post 两种方式做请求 get 主要是获取数据 post 提交数据同一个路由地址既可以是get请求也可以是post请求一个路由对应一个函数 get请求 ...
【转载】BootStrap表格组件bootstrap table详解
(转载,来源“脚本之家”,作者不详) 一.Bootstrap Table的引入关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来.由于Bootstr ...
bootstrap学习大纲
bootstrap 学习分三部分,分别是 css样式,css组件,js插件. 下面介绍三部分分别要学习的内容: 1.css样式:栅格系统,排版,代码,表格,表单,按钮,图片,辅助类,响应式工具. 2. ...
bootstrap 学习笔记（1）---介绍bootstrap和栅格系统
学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得 ...
前端学习之Bootstrap学习
一,Bootstrap简介在前端世界,有个叫Bootstrap的家伙,,是twitter 开源出来的一套前端框架,利用Ta可以快速开发网站界面,它的特点就是比自己从头写简单,直观,方便,快捷,省劲. ...
bootstrap 学习笔记(部分)
这个课程中的boostrap是3.0+版本的.(2.0与3.0有区别) bootstrap中的JS是依赖于jquery的,所以需要事先引用jquery(1.9.0版本以上). <!DOCTYPE ...

随机推荐

洛谷-生活大爆炸版石头剪刀布-NOIP2014提高组复赛
题目描述 Description 石头剪刀布是常见的猜拳游戏:石头胜剪刀,剪刀胜布,布胜石头.如果两个人出拳一样,则不分胜负.在<生活大爆炸>第二季第8 集中出现了一种石头剪刀布的升级版 ...
1bpp像素遍历(找了半天，感谢github)
/// <summary> /// 获取比例 /// </summary> /// <param name="rect"></param& ...
log4j2日志
log4j2.xmllog4j-api-2.5.jarlog4j-core-2.5.jar <?xml version="1.0" encoding="UTF-8& ...
单片机上使用TEA加密通信（转）
源:单片机上使用TEA加密通信本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 环境: 主机:WIN7 开发环境:MDK4.72 单片机:STM32 说 ...
2.4 chrome 开发者工具
开发者工具顶部有Elements.Console.Network等八个栏目.常用的有三个:Elements,用来查看需爬取字段的HTML标签信息:Console,可以检测你的JS代码:Network, ...
JavaScript（9）——call与apply
call与apply call和apply方法可以通过函数名称来调用函数.有两个参数 call()方法与apply()方法的作用相同,他们的区别仅在于接收参数的方式不同. [call] 调用一个对象的 ...
转：jmeter之线程组
虽然有三个添加线程组的选项,名字不一样, 创建之后,其界面是完全一样的.之前的版本只有一个线程组的名字.现在多一个setUp theread Group 与terDown Thread Group 1 ...
PHP常用函数之数组篇
分类:数组分为索引数组和关联数组.索引数组既是指的我们的数组下表为阿拉伯数字,关联数组则是非阿拉伯数字. 定义: 5.4版本之前 $arr = array('name' => '张三', 'ag ...
[转载]C#控制台应用程序里调用自己写的函数的方法
(2011-08-15 15:52:13) 转载▼ 标签: 转载分类: 技术类原文地址:C#控制台应用程序里调用自己写的函数的方法作者:萧儿最近写程序,遇到了一个很白痴的问题,记录下来,免得下次 ...
《JS权威指南学习总结--3.1数字》
3.1数字内容要点: 一.数字直接量:当一个数字直接出现在JS程序中,我们称之为数字直接量. 二.JS中的算术运算 Math.pow(2,53) // => 900719925474 ...

Bootstrap学习 - 组件

Bootstrap学习 - 组件的更多相关文章

随机推荐

热门专题