一、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. backtrack5渗透 笔记

    目录        1.信息收集        2.扫描工具        3.漏洞发现        4.社会工程学工具        5.运用层攻击msf        6.局域网攻击       ...

  2. [办公应用]我的WORD文档表格操作不灵活 无法调整列宽

    最近同事的一个word文档中的表格操作非常不灵活,用鼠标直接调整列宽时总觉得很不灵活.她的操作系统为XP,office 为微软office 2003. 我首先检查了木马,检查了输入法等,结果都没有问题 ...

  3. centos时间同步方法

    centos时间同步方法 电脑软硬件应用网 45IT.COM 时间:2012-12-08 18:09 作者:李本清 新装的服务器可能设置了错误的,需要调整时区并调整时间.如下是使用NTP来从一个时间服 ...

  4. ICON文件保存

    这两天想做一下windows系统下图标的修改,让程序有更新的时候能够更新图标的外观,达到提醒的作用,360,QQ经常采用这种方式进行更新的提示,也有采用弹框的方式来提示,用新版QVOD的同事可能见到过 ...

  5. Xamarin迁移到 Unified API 注意事项

    参考官方文档: Migrating to Unified API for Components #if __UNIFIED__ ... // Mappings Unified CoreGraphic ...

  6. Bootstrap页面布局8 - BS常用标签与样式

    常用的Css文字标签 一. <p>文字段落Start,<strong>重要的文字</strong>,<em>倾斜的文字用来提示</em>,& ...

  7. shell的if else 以及大于,小于等逻辑表达式

    if ....; then .... elif ....; then .... else .... fi 大多数情况下,可以使用测试命令来对条件进行测试.比如可以比较字符串.判断文件是否存在及是否可读 ...

  8. laravel authorize(授权)

    1.方法一  直接在AuthServiceProvider 中定义闭包,比较灵活 namespace App\Providers; ... class AuthServiceProvider exte ...

  9. writing concurrent programs

    Computer Systems A Programmer's Perspective Second Edition To this point in our study of computer sy ...

  10. word size

    Computer Systems A Programmer's Perspective Second Edition Running throughout the system is a collec ...