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 ...
随机推荐
- NYOJ 47:过河问题(思维)
47-过河问题 内存限制:64MB 时间限制:1000ms 特判: No 通过数:6 提交数:10 难度:5 题目描述: 在漆黑的夜里,N位旅行者来到了一座狭窄而且没有护栏的桥边.如果不借助手电筒的话 ...
- Nginx访问日志、 Nginx日志切割、静态文件不记录日志和过期时间
1.Nginx访问日志 配制访问日志:默认定义格式: log_format combined_realip '$remote_addr $http_x_forwarded_for [$time_loc ...
- MyBatis sql语句使用总结
MyBatis中Like语句使用总结 oracle数据库: SELECT * FROM user WHERE name like CONCAT('%',#{name},'%') 或 : SELECT ...
- EasyUI datagrid 查询、设置、提交 三
查询 $(“#grid”).datagrid(“load”,{ a: $('#id').val(),b :$('#text').val() }); {} 里面可以 是序列化参数 $(“#grid ...
- 《DSP using MATLAB》Problem 6.23
代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...
- hashCode()方法 和 hash()方法
String str = "abc"; String str1 = "abc"; System.out.println(str == str1); //true ...
- JQuery中serialize()方法的使用
- centos7 部署elasticsearch
环境: 系统:centos7.3 版本:elasticsearch6.2.3 head版本:https://codeload.github.com/mobz/elasticsearch-head/zi ...
- expect脚本实例
#!/usr/bin/expect //必须写这句,表明使用expect,有些系统可能没有自带,使用yum install expect -y 安装 spawn ssh 192.168.2.128 / ...
- Cassandra--JAVA访问Cassandra数据
JAVA创建Cluster对象 cluster = Cluster.builder() .addContactPoints(contactPoints) .withRetryPolicy(new Lo ...