Bootstrap组件

 

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/

 

转载于:https://www.cnblogs.com/Ejoy/p/5753919.html