前序： 现在angular2已经除了集成的angular-cli，建议大家可以基于这个来快速开发ng2的项目，不用自己再搭建环境； 相关内容请前往：https://angular.cn/docs/ts/latest/cli-quickstart.html 正文： 以图片轮播组件carousel为例： 首先安装好ng2-bootstrap,bootstrap npm install ng2-bootstrap bootstrap --save在需要用到的模块中导入 import { CarouselModule } from ng2-bootstrap @NgModule({imports: [CarouselModule.forRoo...
本文实例为大家分享了Bootstrap选项卡的学习笔记，供大家参考，具体内容如下 tab选项卡<body><div class="container"><!-- tab选项卡 --><ul class="nav nav-tabs"><li class="active"><a href="#pan1" data-toggle="tab">发现</a></li><li><a href="#pan2" data-toggle="tab">搜索</a></li><li><a href="#pan3" data-toggle="tab">工具</a></li></ul><!-- 面板 --><div class="tab-content"><div class="tab-pane active" id="pan...
Bootstrap是一种web框架，是基于HTML,CSS和JS的一种目前较为流行的前端框架。 Bootstrap包含有丰富的组件，根据提供的组件，开发者可以更加快速、便捷地搭建自己心仪的网站。通常包括有以下常用组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、分页、排版、缩略图、警告对话框、进度条、媒体对象等。此外，bootstrap还包含有众多jQuery插件：莫泰局昂、标签页、滚动条、弹出框等。 有关bootstrap的下载和文档可到bootstrap中...
nav导航栏 <nav role="navigation" class="navbar navbar-default"><div class="container-fluid"></div><div class="navbar-header"><a href="#" class="navbar-brand"> 大大的logo </a></div><div ><ul class="nav navbar-nav"><li> <a href="#" > 分类 </a> </li><li> <a href="#" > 分类 </a> </li><li> <a href="#" > 分类 <span class="caret"/> </a> </li></ul></div> </nav>响应式的导航栏 <nav class="navbar navbar-defa...
基本样式 要实现进度条效果要使用两个容器，外容器使用“progress”样式，子容器使用“progress-bar”样式。例如： <div class="progress"><div class="progress-bar" style="width:40%"></div> </div>progress样式主要设置进度条容器的背景色，容器高度、间距等，progress-bar样式设置进度，主要是设置了进度条的背景颜色和过渡效果。实现源码如下： .progress {height: 20px;margin-bottom: 20px;overflow: hidden;background-co...
Bootstrap提供了对分页的良好支持。 0x01 默认的分页 <!DOCTYPE html> <html lang="zh-cn"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="../../css/bootstrap.min.css" rel="stylesheet"><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><script src="../../js/bootstrap.min.js"></script><title>默认的分页</title> </head> <bo...
Bootstrap 通过缩略图为网站布局提供了一种简洁的解决方案。 直接看例子： <!DOCTYPE html> <html lang="zh-cn"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="../../css/bootstrap.min.css" rel="stylesheet"><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><script src="../../js/bootstrap.min.js"></script><title>缩略图</ti...
直接看Bootstrap面板例子： <!DOCTYPE html> <html lang="zh-cn"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="../../css/bootstrap.min.css" rel="stylesheet"><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><script src="../../js/bootstrap.min.js"></script><title>面板</title> </head> <body> <div class="container"><di...
Bootstrap提供了各式各样的进度条。 看下面的例子： <!DOCTYPE html> <html lang="zh-cn"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="../../css/bootstrap.min.css" rel="stylesheet"><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><script src="../../js/bootstrap.min.js"></script><title>进度条</title> </head> <body> <...
Bootstrap自带了很多JQuery插件，给用户做前端开发提供了很大的方便。对于每一个插件，有2种引用方式：一是单独引用，即使用Bootstrap的单独*.js文件，这种方式需要注意的是一些插件和CSS组件可能依赖其他插件，所以单独引用的时候，需要弄清楚这种包含关系一并引用；二是直接引用完整的bootstrap.js或者压缩版的bootstrap.min.js，需要注意的是不能同时引用这2个文件。 Bootstrap自带了很多基本的插件，包括模态对话框、标签切换、...
Bootstrap实现了大量基本样式，包括表格、表单、按钮、图片等。基本的使用方法是通过添加特定的class来实现。 Bootstrap 提供了一个清晰的创建表格的布局。 0x01 表格样式 （1）基本样式：不带边框和分割线： <!DOCTYPE html> <html lang="zh-cn"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="../../css/bootstrap.min.css" rel="stylesheet"><script src="ht...
直接看Bootstrap标签例子： <!DOCTYPE html> <html lang="zh-cn"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="../../css/bootstrap.min.css" rel="stylesheet"><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><script src="../../js/bootstrap.min.js"></script><title>标签</title> </head> <body> <div class="container"><di...
Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。 0x01 样式1 一个登录界面： <!DOCTYPE html> <html lang="zh-cn"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="../../css/bootstrap.min.css" rel="stylesheet"><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><script src="../../js/bootstrap.min.js"...
前面已经介绍过Button的使用。通过button按钮，我们还能实现一些诸如按钮状态控制等形式的交互。 0x01 加载状态 添加data-loading-text=”Loading…”属性： <!DOCTYPE html> <html lang="zh-cn"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="../../css/bootstrap.min.css" rel="stylesheet"><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js...
直接看Bootstrap图片基本样式例子： <!DOCTYPE html> <html lang="zh-cn"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="../../css/bootstrap.min.css" rel="stylesheet"><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><script src="../../js/bootstrap.min.js"></script><title>图片</title> </head> <body> <div class="contai...