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">×</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组件的更多相关文章
- JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)
前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...
- bootstrap学习笔记--bootstrap组件
前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 B ...
- bootstrap 组件
bootstrap 组件 1下拉菜单(dropdown) 下拉菜单切换(dropdown-toggle) 下拉菜单对齐(dropdown-menu-right-右对齐) 下拉菜单分割线(di ...
- ASP.NET MVC使用Bootstrap系列(3)——使用Bootstrap 组件
阅读目录 Bootstrap 导航条 列表组 徽章 媒体对象 页头 路径导航 分页 输入框组 按钮式下拉菜单 警告框 进度条 小结 Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉 ...
- bootstrap组件 2
bootstrap组件2 <!DOCTYPE html> <html lang="zh-cn"> <head > <meta charse ...
- bootstrap组件学习
转自http://v3.bootcss.com/components/ bootstrap组件学习 矢量图标的用法<span class="glyphicon glyphicon-se ...
- UIBootatrap:是由AngularJS UI团队编写的纯AngularJS实现的Bootstrap组件
本文为翻译文档.原文是https://angular-ui.github.io/bootstrap/(需要FQ). 准备工作: 依赖关系:这个库中包含一组基于Bootstrap组件和CSS的原生Ang ...
- Angular -ui - BootStrap组件的解释以及使用
关于UI BootStrap UI BootStrap 是angularUI团队用纯粹angularJS语法编写的Bootstrap组件. 1. 关于ng-router(angular-router. ...
- python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)
一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...
随机推荐
- ASP.NET Misconfiguration: Request Validation Disabled
Abstract: Use the ASP.NET validation framework to prevent vulnerabilities that result from unchecked ...
- Nuget版本冲突的问题
有两个类库项目,一个引用了比如Newtonsoft.Json 6.0, 另一个引用了比如Newtonsoft.Json 8.0, 然后另一个exe项目同时引用了这两个类库项目. 那么在编译的时候会报w ...
- C++拼接字符串
例如: 在"/data/misc/media/out.yuv"后面添加序号操作,并输出在path char path[128] = {0}; int Num=this->mN ...
- PHP开发网站之微信登录、绑定
)))刷新access_token()); ); ); curl_setopt($curlobj, CURLOPT_SSL_VERIFYPEER, FALSE); curl_setopt($curlo ...
- php面向对象之final的应用
final从英文字面上很容易理解,翻译成中文就是“最终的”之意.在php面向对象编程中,final的应用主要有两个作用: 1.使用final修饰的类,该不能被继承 01 <?php 02 ...
- note->notice
登陆博客园,乍眼一看上一篇博客的日期还是2月底,如今已是5月份,期间好几次想要记录一些东西,总感觉现在一天二十四小时越来越短,有几次登陆博客园甚至连密码都要重置一下才能登陆...这两个月的时间里经理了 ...
- google垂直搜索结果
佰年金融 所谓“垂直”很干净地分离出来,而不是在谷歌算作有机列表的结果,但该行已开始模糊.例如,现在许多视频结果似乎是直接整合为有机(万SERP的例子).我治疗的新的“有深度的文章”作为一个垂直的结果 ...
- php基础上
建立站点 localhost /文件 www目录下 不能放 中文目录 php 支持的数据类型 int 整数 float 小数 string 字符 bool 布尔型 date 时间 ...
- 初学c# -- 学习笔记(七) RichTextBox支持GIF
园子里许明吉博客写的一篇,刚好用到这个,写的非常好.转过来了 不过在应用中也有一些问题,win10下不能中文输入,凑合着进行了修改, 下面是原来的代码: private void button2_Cl ...
- 利用Redis解决Url过长的问题
做网站,接手别人的代码,发现url有时候会过长导致页面直接翻掉. 后来想了一下可以利用redis将太长的地方暂存,加载页面时获取即可. 存Redis: /// <summary> /// ...