Bootstrap入门及其常用内置实现
BootStrap是一个专门做页面的
1.BS是基于HTML CSS JS 的一个前端框架(半成品)
2.预定义了一套CSS样式与JQurey实现
3.BS和Validation类似,都是JQ的插件,需要与与之配对的JQuery版本一起使用
4.BS内置了一些实现,也可以进行自定义实现,现在学习前者
BootStrap重要特点:
1.可以实现响应式布局(在不同大小的屏幕中显示处不同的状态)
BootStrap使用准备:
1.导入与之匹配的JQ
2.将dist目录下的三个文件夹复制进当前项目(这三个文件夹必须平级)(内置实现)
BootStrap模板:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
/*这三个标签必须这head标签之后,其它所有标签之前*/
<link href="../../css/bootstrap.css" rel="stylesheet">
<script src="../../js/jquery-1.11.3.min.js"></script>
<script src="../../js/bootstrap.js"></script>
/*引入BS内置的CSS,引入JQuery,引入BS的JS文件*/
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
/*浏览器兼容,在IE9以下浏览器使用这个框架时需要使用*/
BootStrap布局:
1.容器:
方式1:使用 class = "container"
效果:一般情况(pc机)左右有留白,移动设备左右无留白
方式2:使用class = "container-fluid"
左右无留白
2.栅格
A:行 :class="row"
B:列:class="col-xx-单元列数"
BS中默认将一行分成12个单元列,我们要指定自己的单元格时,必须要指定它所占的单元列数
注意:
A:一行中所有的单元格总列数相加可以小于12,剩余的部分是空白
B:一行中所有的单元格总列数相加大于12时,大于的部分换行排列
C:栅格化布局时,采用比已设置屏幕更小的屏幕所有列都占一行的原则(如果不设置的话)
3.BootStrap的布局都是通过class属性来定位div标签所在的位置来对页面进行布局
4.BS中的class实现
使用BS时,要实现某些功能,基本都是通过指定class实现的,BS中的class值都是固定的,类似于关键字可以被
BS识别,BS中的css文件有关于class的相关实现(.class{CSS样式实现})
响应式布局:
1.实现机制:
超小屏幕-------手机---------xs
小屏幕---------ipad mini-------sm
中等屏幕--------ipad----------md
大屏幕---------pc---------lg
2.代码体现
不同设备上显示不同效果,布局上通过class指定
class="col-屏幕代号-单元列数" (要设置多种中间加空格)
特点:小屏优先
大屏幕指定列数了,但是比其小的屏幕是换行实现
小屏幕指定列数了,比其大的屏幕没有指定时,按照小屏的划分显示
显示与隐藏设置:
显示:visible-屏幕代号
隐藏:hidden-屏幕代号
特点:默认的是全部显示,如果设置了特定屏幕显示或隐藏,其它没有设置的则取反
布局偏移:
1.设置空的div占位
2.偏移量:<div class="col-xs-8 col-xs-offset-4 text-center">
BS中的计时器:(轮播图)
js代码:
$(function(){
$('.carousel').carousel({
interval:时间值
});
});
轮播图开始标签中:
data-interval="时间值"
BS中的按钮:
<button type="button" class="btn btn-关键字">显示字样</button>
BS中设置悬浮在页面之上的元素(导航条):
<div class="container" data-spy="affix" data-offset-top="60" data-offset-bottom="200" id="daohang">
然后在css代码中定位该元素,将其置于页面之上:
#daohang {
/*显示在上面*/
z-index: 1;
top:0px;
left:0px;
right:0px;
}
BS中的胶囊条:
1.先查找导航实现,编写胶囊导航条
2.通过CSS设置它的位置
3.单击导航条定位到某个位置
A:href="#id值"
B:页面中的实现模块都有id值
href中的id值和页面模块的id值一一对应
4.body添加属性,定位添加css样式(因为是一直在页面中显示)
代码实现:<body data-spy="scroll" data-target="#jiaonang">
<div class="container" id="jiaonang">
<ul class="nav nav-pills nav-stacked" >
<li class="active"><a href="#top">顶部</a></li>
<li><a href="#lunbo">轮播图</a></li>
<li><a href="#remen">热门商品</a></li>
</ul>
</div>
...
<style>
#jiaonang{
z-index:1;
width:100px;
position:fixed;(定义其在页面中的绝对位置)
top:100px;
left:50px;
}
body {
position:relative;
}
</style>
Bootstrap入门及其常用内置实现的更多相关文章
- python进阶04 装饰器、描述器、常用内置装饰器
python进阶04 装饰器.描述器.常用内置装饰器 一.装饰器 作用:能够给现有的函数增加功能 如何给一个现有的函数增加执行计数的功能 首先用类来添加新功能 def fun(): #首先我们定义一个 ...
- Python入门之 Python内置函数
Python入门之 Python内置函数 函数就是以功能为导向,一个函数封装一个功能,那么Python将一些常用的功能(比如len)给我们封装成了一个一个的函数,供我们使用,他们不仅效率高(底层都是用 ...
- 《zw版·Halcon入门教程与内置demo》
<zw版·Halcon入门教程与内置demo> halcon系统的中文教程很不好找,而且大部分是v10以前的版本. 例如,QQ群: 247994767(Delphi与halcon), 共享 ...
- MYSQL常用内置函数详解说明
函数中可以将字段名当作变量来用,变量的值就是该列对应的所有值:在整理98在线字典数据时(http://zidian.98zw.com/),有这要一个需求,想从多音字duoyinzi字段值提取第一个拼音 ...
- request.setCharacterEncoding 和常用内置对象 跳转
1.直接转码 new String(name.getBytes("ISO8859_1"),"GBK") 2. request.setCharactorEncod ...
- JavaScript常用内置对象(window、document、form对象)
由于刚开始学习B/S编程,下面对各种脚本语言有一个宏观的简单认识. 脚本语言(JavaScript,Vbscript,JScript等)介于HTML和C,C++,Java,C#等编程语言之间.它的优势 ...
- ASP.NET常用内置对象
ASP.NET 常用内置对象:Response对象.Request对象.Session对象.Server对象.Application对象 1.Response对象: (1) 用于向浏览器输出信息 常用 ...
- Python常用模块中常用内置函数的具体介绍
Python作为计算机语言中常用的语言,它具有十分强大的功能,但是你知道Python常用模块I的内置模块中常用内置函数都包括哪些具体的函数吗?以下的文章就是对Python常用模块I的内置模块的常用内置 ...
- python字符串常用内置方法
python字符串常用内置方法 定义: 字符串是一个有序的字符的集合,用与存储和表示基本的文本信息. python中引号中间包含的就是字符串. # s1='hello world' # s2=&quo ...
随机推荐
- python中输入多个数字(代码实现)
不多说,直接上代码: list1 = [] #定义一个空列表 str1 = input("请输入数值,用空格隔开:") # list2 = str1.split(" &q ...
- vue input框type=number 保留两位小数自定义组件
第一步:自定义组件MyNumberInput.vue<template> <input class="numberInput" type="number ...
- UVA1595_Symmetry
给出平面上n个点,问你能不能找到一个竖线让他们对称 这道题后面发现真的不难,又不止一种方法 我当时写的很挫,死脑筋的就找一个点的对称点存不存在,用结构体存点信息,在排序用find找,,然后不知道一堆w ...
- Django 自定义模型管理器(Manager)及方法
转载自:https://www.cnblogs.com/sui776265233/p/11571418.html 1.自定义管理器(Manager) 在语句Book.objects.all()中,ob ...
- QT5.2 Assistant-设置应用程序图标
在Qt助手(assistant.exe)搜索关键字"Setting the Application Icon"就可以看到在各种平台设置Qt程序图标的方法,包括QT支持的Win ...
- redis的快速机制与数据类型
想一下 redis 的高并发和快速 单线程模型 - 避免了不必要的上下文切换和竞争条件(锁) Redis客户端对服务端的每次调用都经历了发送命令,执行命令,返回结果三个过程.其中执行命令阶段,由于Re ...
- [POI2010]OWC-Sheep
题目 不难猜到或者发现的性质,如果连了一条对角线划分出了奇数个点,那么这条对角线肯定不合法:因为划分成三角形就不可能有对角线相交,于是划分成奇数的那一边怎么样也不可能划分成全是偶数 于是我们需要对每一 ...
- springboot整合jsp 遇到的问题
1,在idea中新建jsp文件 首先需要在springboot项目 在src 中webapp /WEB-INF/JSP 当我右键想新建一个jsp文件时默认没有 File->Project Str ...
- mac vscode 实用快捷键
cmd+del:光标左边删到头 cmd+fn+del:光标右侧删到头
- stdin stdout stderr - 标准 I/O 流
Fd #include <stdio.h> Fd extern FILE *stdin; Fd extern FILE *stdout; Fd extern FILE *stderr; D ...