1.Bootstrap组件——Glyphicons图标字体

图标字体:可以表示的文字不是abcd或1234,而是一个又一个图形符号,比直接使用图片好处:可以任意放大不会失真;所有能使用文字的地方都可以使用图标字体,且会随着文字颜色的改变而改变。

提示:Glyphicon图标字体提供了Web、移动开发常用的小图标,但一般的操作系统都默认没有安装该套字体,需要项目使用服务器端字体:

@font-face {

font-family: 'Glyphicons Halflings';

src: url('../fonts/glyphicons-halflings-regular.eot');

}

body {

font-family: 'Glyphicons Halflings';

}

2.Bootstrap组件——按钮组——了解

在一个.btn-group中出现多个.btn

<div class="btn-group">

<button class="btn ...">

<button class="btn ...">

<button class="btn ...">

</div>

3.Bootstrap组件——输入框组——一般掌握

<div class="input-group">

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

<input class="form-control">

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

</div>

4.Bootstrap组件——下拉菜单——重点

下拉组件的必需结构:

<div class="dropdown">

<a data-toggle="dropdown">触发元素</a>

<ul class="dropdown-menu">

隐藏菜单

</ul>

</div>

提示:data-toggle="dropdown"其实是Bootstrap提供的一个jQuery插件的选择器 $('[data-toggle="dropdown"]').on('click', fn);

5.自学:Bootstrap组件——面包屑(路径导航)、分页、标签、徽章、巨幕、水井(Well)

6.Bootstrap组件——导航(nav)

导航的分类:

(1)标签页式导航

<ul class="nav nav-tabs">

(2)胶囊式导航

<ul class="nav nav-pills">

<ul class="nav nav-pills nav-stacked">

7.Bootstrap组件——进度条

<div class="progress">

<div class="progress-bar" style="width:30%">30%</div>

</div>

提示:进度条的实际显示宽度必须手工来设置;可以使用定时器/根据实际异步加载进度来控制进度条宽度的增长

午间练习:使用定时器让进度条的宽度增加

7.Bootstrap组件——媒体对象

<div class="media">

<div class="media-left">

<img class="media-object">

</div>

<div class="media-body">

<h3 class="media-heading"></h3>

<p></p>

</div>

</div>

8.Bootstrap组件——警告框

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

<span class="close" data-dismiss="alert">&times;</span>

警告框内容

</div>

提示:data-dismiss="alert"底层是Bootstrap提供的一个jQuery插件函数

Bootstrap提供的jQuery插件:

data-toggle="dropdown"

data-dismiss="alert"

9.Bootstrap组件——导航条——重点&难点

Bootstrap提供的导航条中可能出现:LOGO(文字/图片)、导航条菜单、搜索框、登录/注册按钮、提示文字....

导航条按颜色可以两种:

浅色底深色文字: .navbar-default

深色底浅色文字: .navbar-inverse

导航条按位置可以为四种:

页面顶部(相对定位): 默认

页面顶部(固定定位): .navbar-fixed-top

页面底部(相对定位): 默认

页面底部(固定定位): .navbar-fixed-bottom

注意:Bootstrap提供的导航条是“响应式导航条”——在手机中显示为两部分:头部(logo+按钮)和折叠菜单,在平板和PC中下拉菜单会和logo显示在一行中,下拉菜单的触发按钮会自动隐藏!

<div class="navbar navbar-default/inverse">

<div class="container">

<!--导航条的头部-->

<div class="navbar-header">

<a class="navbar-brand"></a>

<button class="navbar-toggle"></button>

</div>

<!--导航条的折叠菜单-->

<div class="">

导航菜单、按钮、超链接、文字、表单....

</div>

</div>

</div>

练习:在页面下方的导航条中添加: 导航菜单、按钮、超链接、表单等内容

休息&练习:16:55~17:10

<div class="navbar navbar-default/inverse"

<div class="container">

<div class="navbar-header">

LOGO

BUTTON

<div class="collapse">

<ul class="nav navbar-nav">

<button class="navbar-button">

<a class="navbar-text">

<form class="navbar-form">

10.jQuery插件——折叠组件(Collapse)

<a data-toggle="collapse" href="#mybox">触发元素</a>

<button data-toggle="collapse" data-target="#mybox">触发元素</button>

<div class="collapse in" id="mybox">目标元素</div>

易悦(深圳)科技有限公司

让快乐更简单

微信:EJoyYOJOY

微博:http://weibo.com/EJoyYOJOY

官网:http://www.ejoytec.com/

Bootstrap组件的更多相关文章

  1. JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)

    前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...

  2. bootstrap学习笔记--bootstrap组件

    前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 B ...

  3. bootstrap 组件

      bootstrap  组件 1下拉菜单(dropdown)  下拉菜单切换(dropdown-toggle)  下拉菜单对齐(dropdown-menu-right-右对齐) 下拉菜单分割线(di ...

  4. ASP.NET MVC使用Bootstrap系列(3)——使用Bootstrap 组件

    阅读目录 Bootstrap 导航条 列表组 徽章 媒体对象 页头 路径导航 分页 输入框组 按钮式下拉菜单 警告框 进度条 小结 Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉 ...

  5. bootstrap组件 2

    bootstrap组件2 <!DOCTYPE html> <html lang="zh-cn"> <head > <meta charse ...

  6. bootstrap组件学习

    转自http://v3.bootcss.com/components/ bootstrap组件学习 矢量图标的用法<span class="glyphicon glyphicon-se ...

  7. UIBootatrap:是由AngularJS UI团队编写的纯AngularJS实现的Bootstrap组件

    本文为翻译文档.原文是https://angular-ui.github.io/bootstrap/(需要FQ). 准备工作: 依赖关系:这个库中包含一组基于Bootstrap组件和CSS的原生Ang ...

  8. Angular -ui - BootStrap组件的解释以及使用

    关于UI BootStrap UI BootStrap 是angularUI团队用纯粹angularJS语法编写的Bootstrap组件. 1. 关于ng-router(angular-router. ...

  9. python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

随机推荐

  1. Python安装mysql-python错误提示python setup.py egg_info

    做python项目,需要用到mysql,一般用python-mysql,安装时遇到错误提示如下: Command "python setup.py egg_info" failed ...

  2. MySql开始日期、结束日期查询

    str_to_date('2016-08-24', '%Y-%m-%d %H') validStartTime str_to_date('2016-09-16', '%Y-%m-%d %H') val ...

  3. 深入浅出讲解:php的socket通信

    对TCP/IP.UDP.Socket编程这些词你不会很陌生吧?随着网络技术的发展,这些词充斥着我们的耳朵.那么我想问:1.         什么是TCP/IP.UDP?2.         Socke ...

  4. Sql Server中不常用的表运算符之APPLY(1)

    写在这个系列的前面: 就像他们的名字一样,作为一个表运算,他们用来运算左表和右表.JOIN也是一个表运算符,不过他太常用了. APPLY: 将右表表达式应用在左表的每一行上. APPLY是Sql200 ...

  5. 安装ANDROID5.0 ,adb连接不上

    一.ADB PC端需要换成5.0 的版本 二.是4.3默认端口5555,但是现在没有连接上.即绑定端口. setprop service.adb.tcp.port 5555 stop adbd sta ...

  6. (转)UIWebView全部API学习

    网上找的收藏一下 http://www.myexception.cn/web/1888974.html 最生僻的API做了下划线以及粗体的标注.百度上查了全是拷贝的同一份代码,而且只有代码没有解释,很 ...

  7. struts2的国际化文件在jsp中的引用

    struts.xml中的配置 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts ...

  8. [python] python实现2048游戏,及代码解析。

    我初学python,有不对之处望大家指教.转载请征得同意. 我在网络上也找了一些2048游戏代码的讲解,但都不是特别详细.所以我希望能够尽量详细的讲解.同时,有的地方我也不懂,希望大家能帮助补充.我会 ...

  9. NSURLCache详解和使用

    使用缓存的目的是为了使应用程序能更快速的响应用户输入,是程序高效的运行.有时候我们需要将远程web服务器获取的数据缓存起来,以空间换取时间,减少对同一个url多次请求,减轻服务器的压力,优化客户端网络 ...

  10. linux命令(4):mkdir命令

    linux mkdir 命令 用来创建指定的名称的目录,要求创建目录的用户在当前目录中具有写权限,并且指定的目录名不能是当前目录中已有的目录. 1.命令格式: mkdir [选项] 目录... 2.命 ...