一、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. HRBUST 1326 循环找父节点神术

    题意 给出一个图 给出a点到每个点的路径 最后经过的除这个点本身以外的点 现在把a点改为b点 让求出按上面那种方式 把除b之外的点对应的点列出 ...算了我描述题意得能力好差...这个锅还是给出题的吧 ...

  2. WITCH CHAPTER 0 [cry] 绝密开发中的史克威尔艾尼克斯的DX12技术演示全貌

    西川善司的[WITCH CHAPTER 0  cry]讲座 ~绝密开发中的史克威尔艾尼克斯的DX12技术演示全貌   注:日文原文地址: http://pc.watch.impress.co.jp/d ...

  3. xampp默认mysql密码设置，修改mysql的默认空密码

    xampp默认mysql密码设置,修改mysql的默认空密码 分类: xampp2012-09-12 11:24 30264人阅读 评论(5) 收藏 举报 mysqlphpmyadminauthent ...

  4. osal_start_timerEx(Lock_TaskID,SBP_START_DEVICE_EVT,SBP_PERIODIC_EVT_PERIOD)的理解

    osal_start_timerEx(Lock_TaskID,SBP_START_DEVICE_EVT,SBP_PERIODIC_EVT_PERIOD)与osal_set_event(Music_Ta ...

  5. 20145317彭垚 《Java程序设计》第五次实验报告

    20145317彭垚实验五 Java网络编程及安全 北京电子科技学院(BESTI)实验报告 课程:Java程序设计 班级:1453 指导教师:娄嘉鹏 实验日期:2016.05.06 18:30-21: ...

  6. Centos Apache安装eAccelerator

    yum install php-eaccelerator

  7. BIgInteger类和BigDecimal类的理解

    第一部分: 这两个类位于java.math包内,要使用它们必须在类前面引用该包:import java.math.BigInteger;和import java.math.BigDecimal; Bi ...

  8. javaWeb总结——session

    一.session简单介绍 在web开发中,服务器为每个用户浏览器创建一个会话对象,即session对象.一个浏览器独占一个session对象.因此,在需要保护用户数据时,服务器程序可以把用户数据写到 ...

  9. Java Tool

    PS参数详解 http://blog.csdn.net/hanner_cheung/article/details/6081440 JVM 参数 JVM调优总结 -Xms -Xmx -Xmn –Xss ...

  10. PureBasic—数控编辑框与调节块和进度条

    三个有关上下限问题的控件,它们也是主要控件的组成部分,分别为:SpinGadget()        数控编辑框TrackBarGadget()    调节块控件ProgressBarGadget() ...