一、bootstrap字体图标

以span的形式出现，通常可以用于一个button或者其他元素的内文本，

 <span class="glyphicon glyphicon-sort-by-attributes"></span>

二、bootstrap下拉菜单

1.折叠后的菜单一般是个button（或li等其他块元素），为其添加class="btn dropdown-toggle",data属性 data-toggle="dropdown"；为提示下拉效果，一般结合结合<span class="caret"></span>

2,菜单项使用一个ul，li来呈现，为ul添加clss="dropdown-menu";对于li,如果为li添加class="divider"则呈现一条分割线；如果为其添加class=""dropdown-header"则样式为下拉菜单的标题。

3，用一个div包括上述button和ul，并为其添加class .dropdown或者.btn-group。不过如果创建的是分割式样的按钮，就只能添加.btn-group

4,如果想要创建一个上拉菜单，给父.btn-group容器添加.drop-up即可。

下拉菜单

三、bootstrap按钮组

给包围一组按钮的div包括类.btn-group;.btn-toolbar,.btn-group-vertical可以将一组按钮组织起来。并且可以嵌套组。

四、bootstrap导航元素

一般用一组ul来实现（如果有下拉菜单就用嵌套的两个ul）

1.为ul添加基本类.nav;如果是标签式的导航，就再添加.nav_tabs;如果是胶囊式的，就添加.nav_pills

2,在上述基础上如果同时使用.nav_stacked,.nav_justified可以使得导航元素垂直或者和父元素等宽。

五、bootstrap导航栏

1.为nav标签添加class:.navbar ,.navbar-default/.navbar-inverse;并添加role="navigation"

2.添加导航标题（用一个div嵌套a来实现），外层的div添加类 navbar-header;内层的a添加类 navbar-brand

3,导航的条目，使用ul和li来实现，为ul添加类nav navbar-nav

其他：

1，如果创建响应式的链接，需要更改两处

（1）修改导航栏标题的样式，增加小屏幕上显示的折叠按钮（一组span），并为导航栏标题所在的div添加类:navbar-toggle.以及两个data属性，data-toggle="dollapse"，data-target="目标id"

（2）为要折叠的导航元素ul的外围div（如果没有则增加一个），添加类：collapse navbar-collapse,以及和第一步对应的id

对应的代码如下：

<!doctype html>

<html lang="zh-hans">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" href="css/style.css">

    <title>宁浩网_模拟2</title>

</head>

<body>

<header>

    <nav class="nav-bar navbar-inverse navbar-fixed-top" role="navigation">

        <div class="container">

            <div class="navbar-header">

                <button class="navbar-toggle" data-toggle="collapse" data-target="#nav_collapse">

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>

                <a href="#" class="navbar-brand">ninghao.net</a>

            </div>

            <ul id="main_menu" class="nav navbar-nav navbar-left">

                <li class="active"><a href="#">课程</a></li>

                <li><a href="#">博客</a></li>

                <li><a href="#">社区</a></li>

            </ul>

            <div  class="collapse navbar-collapse" id="nav_collapse">

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

                    <li><a href="#">登陆</a></li>

                    <li><a href="#">注册</a></li>

                    <li><button class="btn btn-primary btn-xs navbar-btn" href="#">订阅课程</button></li>

                </ul>

            </div>

        </div>

    </nav>

</header>

    <script src="lib/jquery-2.1.4.min.js"></script>

    <script src="lib/bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

可响应式导航栏实现

2，导航栏中的表单，添加类：navbar-form

3, 导航栏中的按钮(非表单中的按钮)，添加类:navbar-btn

4，导航栏中的文本（<p>),添加类navbar-text

5,导航栏中的组件对齐（如ul，form），左对齐采用navbar-left,右对齐采用navbar-right.

6,将导航栏固定到顶部(.navbar-fixed-top),固定到底部(.navbar-fixed-bottom)

六、bootstrap面包屑导航

面包屑导航的实现很简单，为一个ul添加.breadcrumb即可

七、bootstrap分页和前后页

分页的实现，为一个ul添加.pagination

前后页的实现，为一个ul添加.pager

八、bootstrap标签和徽章

标签的是实现，为一个span赋予基本类.label 以及.label-default/.label-primary/.label-sucess 等来实现

标签的是实现，为一个span赋予类.badge。

九、bootstrap页面标题和缩略图

如果想要在标题下方有条横线，并且获得合适的间距，可以使用一个赋予.page-header类的div包围对应的h元素

缩略图的实现，为img的外围a标签添加.thumbnail;这样可以为图片获得一个边框和内边距

十、bootstrap警告

1.该组件通常需要结合jquery插件alerts使用；为一个div赋予.alert基本类以及.alert-success、.alert-info、.alert-warning、.alert-danger）之一

2.想要给警告框加一个关闭按钮，需要1）为外层div添加一个alert-dismissable类，2）html代码如下

<div class="alert alert-success alert-dismissable">

   <button type="button" class="close" data-dismiss="alert"

      aria-hidden="true">

      &times;

   </button>

   成功！很好地完成了提交。

</div>

带有关闭按钮的div

十一、bootstrap进度条

1)利用两个嵌套的div（如果想形成堆叠的效果，可以在外层div中套多个）来实现，外围div添加类.progress;

2）内层div添加类基本类.progress-bar， 和 class progress-bar-* 的空的 <div>。其中，* 可以是success、info、warning、danger。并利用css为内层div设置宽度。

3）如果想要增加进度条的动画效果，需要在外围div同时增加类.progress-striped和.active

十二、bootstrap媒体对象，bootstrap列表组，bootstrap面板,bootstrap wells的实现都相对简单，可以参见对应的文档

http://www.w3cschool.cc/bootstrap/bootstrap-panels.html

 

bootstrap学习之二-组件的更多相关文章

  1. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  2. bootstrap学习（二）页面

    响应式图片: //当图片大的时候,逐渐缩小浏览器大小,图片会显示为自适应大小 ,img-responsive <div class="container"> <d ...

  3. bootstrap学习总结-js组件(四)

    这次我们来看下js组件的使用,本篇文章会有点长,希望大家可以耐心看,相信收获会有不少.不少园友加我好友,表示喜欢我写文字的风格,简单明了,这里,再次谢谢你们的支持.一方面,博主自身技术有限,写的东西都 ...

  4. bootstrap学习总结-css组件(三)

    今天我们来看看css组件效果以及其中比较重要的类,这些类都不难,关键要熟练掌握,搭配使用,灵活运用.关于前两篇中,css样式和布局的文章,大家可以在首页进行阅读.http://www.cnblogs. ...

  5. bootstrap学习笔记<二>（标题，段落样式）

    标题.样式:class="h1"~class="h6" bootstrap中重新定义了h1~h6标签,具体差别如下: 在bootstrap中其他任何标签使用cl ...

  6. 慕课网上的Bootstrap学习（二）

    表单 首先<form role="form" class="form-horizontal"></form> ,创建一个水平显示的表单. ...

  7. React学习笔记(二) 组件状态

    组件的状态(this.state): 组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI getIni ...

  8. Vue学习系列(二)——组件详解

    前言 在上一篇初识Vue核心中,我们已经熟悉了vue的两大核心,理解了Vue的构建方式,通过基本的指令控制DOM,实现提高应用开发效率和可维护性.而这一篇呢,将对Vue视图组件的核心概念进行详细说明. ...

  9. Vue.js官方文档学习笔记(二)组件化应用的构建

    组件化应用的构建 组件化应用允许我们使用小型.独立和通常可复用的组件构建大型应用. Vue注册组件 Vue.component('todo-item',{template:'<li>这是个 ...

随机推荐

  1. js 获取checkbox选中项目

    # //获取选中项 $('#submit').click(function () { var check_list = [] $("input[name='ck']:checked" ...

  2. python 使用多线程进行压力测试

    #coding=utf-8 import urllib2 import threading import time TOTAL = 0 #总数 SUCC = 0 #响应成功数 FAIL = 0 #响应 ...

  3. Machine Learning in Action -- Logistic regression

    这个系列,重点关注如何实现,至于算法基础,参考Andrew的公开课 相较于线性回归,logistic回归更适合用于分类 因为他使用Sigmoid函数,因为分类的取值是0,1 对于分类,最完美和自然的函 ...

  4. OpenGL 完全教程(写给Delphi的开发者) 前言

    前言 在开发了许多2D图形程序之后,许多人开始对3D图形编程产生了兴趣.学习一套3D API,是进行3D图形编程的基础.在有趣的3D图形编程中,3D API只不过充当着一种低级的工具而已.因此,在这里 ...

  5. ecshop支付时减库存方法

    ecshop后台减少库存的时机默认只有下订单时和发货时,不能满足各种客户需求啊,要增加一个商家付款后就能减少库存,先解决方法如下 1. includes/inc_constant.php 文件 大约2 ...

  6. ubuntu下交叉编译windows c程序

    简介 采用mingw32可以在linux下直接编译c程序输出为windows下的exe程序或dll链接库. 个人编译的纯c程序(不含winapi),主要是c99程序,通常采用gcc/cc编译调试后,再 ...

  7. Windows 一键安装OpenSSL

    原理:OpenSSL在github上有开源项目,我们只需要把代码克隆到本地,在本地编译一下就好了 注意事项: 1->在github上获取源码,必须要安装git for windows,网址 ht ...

  8. 通过定位position="fixed"实现网页内容的固定层效果

    在网页的顶部或者底部导航栏中经常需要使用到固定层的效果,即紧挨浏览器窗口的顶部或底部而网页其他内容的影响. 一.实现 主要通过设置导航栏元素的位置属性position="fixed" ...

  9. Block作为property属性实现页面之间传值（代替Delegate代理与协议结合的方法）

    需求:在ViewController中,点击Button,push到下一个页面NextViewController,在NextViewController的输入框TextField中输入一串字符,返回 ...

  10. Selenium2学习-029-WebUI自动化实战实例-027-判断元素是否存在

    非常简单的源码,敬请各位小主参阅.若有不足之处,敬请大神指正,不胜感激! /** * Verify the element exist or not * * @author Aaron.ffp * @ ...