Bootstrap&bxslider
Bootstrap
规则
一、响应式布局
@media
二、图标、字体
@font-face
三、基本使用
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.css"> </head>
<body> <div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div> <script src="jquery-1.12.4.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script> </body>
</html>
bxslider(轮播图)
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="jquery.bxslider/jquery.bxslider.css">
</head>
<body>
<ul class="bxslider">
<li><img src="data:images/pic1.jpg" /></li>
<li><img src="data:images/pic2.jpg" /></li>
<li><img src="data:images/pic3.jpg" /></li>
<li><img src="data:images/pic4.jpg" /></li>
</ul> <script src="jquery-1.12.4.js"></script>
<script src="jquery.bxslider/jquery.bxslider.js"></script> <script>
$(document).ready(function(){
$('.bxslider').bxSlider();
}); </script> </body>
</html>
Bootstrap&bxslider的更多相关文章
- jquery使用案例
表单验证 Dom实现表单验证 通过在form标签的submit上绑定一个onclick事件,用户点击事,触发这个事件,执行Checkvalid()函数进行对表单中的元素值验证,验证通过之后,继续让su ...
- HTML、CSS和JS
一.html 1.web流程中的HTML HTML---->赤裸裸的人 CSS ---->穿华丽的衣服 JS ---->让人动起来 浏览器和server端之间的通信本质上是字 ...
- 第五篇、css补充二
一.内容概要 1.图标 2.目录规划 3.a标签中的img标签在浏览器中的适应性 4.后台管理系统设置 5.边缘提示框 6.登录页面图标 7.静态对话框 8.加减框 补充知识: line-height ...
- web 前端2 html css一些小问题技巧
html css一些小问题技巧 1 对于儿子块float后,父亲块如果没内容就不见了,如何让父亲块依然跟随飘起了的儿子块撑起来呢?? 用到的属性after方法 公共方法作为继承即可. 1.1 方法 ...
- 【html、CSS、javascript-5】css应用场景补充
一.CSS全局应用 父标签div下包含两个子标签div,当子标签dvi全部向左float,此时父标签设置的背景色是不显示的 <!DOCTYPE html> <html lang=&q ...
- python_way day17 html-day3 前端插件(fontawsome,easyui,bootstrap,jqueryui,bxslider,jquerylazyload),web框架
python_way day17 一.模板插件 图标的插件 fontawsome: 后台管理: easyui jqueryui 很多网站都会用: bootstrap :引入jQuery:(2.x,1. ...
- BootStrap、jQuery UI、bxSlider组件使用
组件的使用 首先需要将组件下载下来放在统同级目录下 导入组件 使用组件 BootStrap 示例: <!DOCTYPE html> <html lang="en" ...
- 【html、CSS、javascript-13】前端框架Bootstrap
1.Bootstrap前端框架:包含css样式.js插件.图标等 http://www.bootcss.com/ 2.Font Awesome:非常全的图标大全 https://fontawesome ...
- 旺财速啃H5框架之Bootstrap(五)
在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...
随机推荐
- tomcat部署成https协议
1 生成密匙:进入jdk的bin目录后输入: keytool -genkeypair -alias "tomcat" -keyalg "RSA" -keysto ...
- php基础-4
require和include require和include都是导入外部php文件的方法,使用方法为require和include关键字后接导入包(php_file)的名字的字符串形式. 当导入的包 ...
- hdu4407 Sum 容斥原理
XXX is puzzled with the question below: 1, 2, 3, ..., n (1<=n<=400000) are placed in a line. T ...
- vue全家桶+Koa2开发笔记(5)--nuxt
1. nuxt项目初始化报错 下面是使用 koa 模板方法初始化一个项目,使用该方法需要将 nuxt 的版本降至1.4.2: 官方 https://zh.nuxtjs.org/guide/instal ...
- makefile——小试牛刀
//a.h,包含头文件stdio.h,并且定义一个函数print #include<stdio.h> void print(); //b.c,包含头文件a.h,然后就可以写print函数的 ...
- 续drone 1.0 新界面调整
接以前的内容,drone 最新发布的版本又有界面信息的调整了,更方便了. 环境准备 docker-compose 文件 version: '3' services: drone-server: ima ...
- Linux或树莓派3——挂载U盘、移动硬盘并设置rwx权限
话说最近在树莓派上搭建了一个owncloud,因为树莓派的存储空间有限,就插了个16G的U盘,然后设置成开机自动挂载.这里稍微注意一下的是U盘的格式最好不要NTFS,因为一般情况下NTFS格式的文件系 ...
- java数据类型取值范围
1个字节:boolean, byte 2个字节:short, char 4个字节:int, float 8个字节:long, double 按照我们初学者的理解1byte=8bit,也就是说1个字节可 ...
- Day36 数据库的操作
视图操作: 1.左连接查询 select * from person left join dept on person.dept_id = dept.did 2. 右连接 3. 内连接 inner ...
- 我发起并创立了一个 VMBC 的 子项目 D#
大家好, 我发起并创立了一个 VMBC 的 子项目 D# . 有关 VMBC , 请参考 <我发起了一个 用 C 语言 作为 中间语言 的 编译器 项目 VMBC> https ...