首页 > bootstrap浏览图片

vvyao海报轮播模板教程,bootstrap浏览图片

互联网 2021-01-16 20:17:20
在线算命,八字测算命理

一、响应式网页1、响应式网页概述:一个页面,可以在各种不同的设备下浏览,都有不错的浏览体验。

三个特征:(1)流式布局(2)可伸缩的图片和字体(3)CSS3 Media Query

2、编写响应式网页

(1)设置viewport元标签

(2)避免使用绝对单位(px),用相对单位代替(%,auto,em等)

(3)使用流式定位:float

(4)图片大小实现自适应:img(max-width:100%)会随着容器的改变而改变,且不会超过图片自身原始大小,防止失真

(5)根据浏览器屏幕的特征,有选择性的执行某些css样式——css3媒体查询技术(Media Query)

3、测试响应式网页

(1)使用真实物理设备——效果可靠但任务量太大(只要手机/平板/PC在同一个局域网即可测试)

(2)使用第三方测试/模拟软件——效果有待进一步的验证

(3)使用Chrome自带的浏览器模拟器测试

优势:可以模拟常见的设备、网速、经纬度、加速度…;不足:效果有待进一步的验证。

4、WebStorm的常用操作:

常用快捷键(Eclipse):

复制当前行:Ctrl+Alt+↓向上/下移动当前行:Alt+↑/↓删除当前行:Ctrl+D注释当前行:Ctrl+/ZenCoding(代码补全):

div+TAB+enterdiv.box+TAB+enterdiv#mybox+TAB+enterdiv3+TAB+enterul>li3>a+TAB+enter假文生成:

lorem+TAB+enter多行编辑:

Alt+左键点击开始多行同时编辑ESC 退出多行编辑模式5、CSS3提供的Media Query技术

作用:根据客户端浏览设备的特性,有选择性的执行部分CSS

Media:指浏览网页的设备,如screen(pc/pad/phone)、print、tv、projection、屏幕阅读器…

Query:查询出当前浏览设备的特性,如类型、宽度、高度、分辨率、色深位深、方向,根据这些特性,执行特定的CSS样式。

CSS3MediaQuery有两种用法:

(1)根据媒体的特征,加载不同的外部CSS:

不足:客户端会不管媒体特性,请求所有的CSS文件。

(2)根据媒体的特性,执行某段CSS中的 部分内容:

@media “screen and (min-width:768px) and (max-width:990px)”{h1{…}.box{…}}6、Twitter Bootstrap

Bootstrap(bootcss.com)是一个框架HTML/CSS/JS框架,适用于移动设备优先的响应式网页。

Bootstrap分为五部分:

(1)起步(Startup);(2)全局CSS样式(Global CSS);(3)组件(Component);(4)插件(plugin);(5)定制(Customize)

二、Bootstrap起步1、下载Bootstrap

2、安装Bootstrap

3、网页基本模板

(1)lang属性的两个作用:A、告诉浏览器翻译时如何确定当前网页的基础语言B、告诉读屏软件当前页面的基础发音

(2)IE浏览器的兼容性问题:X-UA-Compitable:Cross-UserAgent-Compitable,该元标签只有IE浏览器支持

设置IE的兼容模式为edge——最新版,尽可能向行业标准看齐。

(3)Bootlint工具:是一个js,由Bootstrap官方提供,用于检测使用Bootstrap的页面中常见的HTML错误、class使用方面的错误——默认情况下浏览器是检查不出来的。

三、Bootstrap全局CSS样式1、CSS Reset

*{box-sizing:border-box;}

box-sizing:content-box;/默认值/=margin+border+padding+width

box-sizing:border-box;/推荐使用/=margin+width

2、按钮

.btn{padding: ;border: ;}

.btn-default{color: ;background: ;border-color: ;}

(1)五种带有预定义样式的按钮:

.btn-danger(危险).btn-success(成功).btn-warning(警告).btn-info(一般信息).btn-primary(首选项)

(2)四种常用尺寸的按钮:

.btn-lg(大按钮).btn-default(默认尺寸).btn-sm(小按钮).btn-xs(超小尺寸)

(3)按钮可变为块级(block)元素:

.btn-block(块级元素)

(4)调整按钮的位置:

.pull-left{float:left;}

.pull-right{float:right;}

3、图片

.img-rounded(圆角图片)

.img-circle(圆形图片)

.img-thumbnail(缩略图片)

.img-responsive(响应式图片)

4、排版和代码

.text-danger.text-success.text-warning.text-info.text-primary

.bg-danger.bg-success.bg-warning.bg-info.bg-primary

.text-left.text-right.text-center.text-justify

.text-lowercase.text-uppercase.text-capitalize

.list-unstyled.list-inline

5、表格.table

.table-bordered 带边框的表格

.table-responsive 响应式表格(注意:使用在table的父元素上,而不是table上)

.table-striped 隔行变色的表格

.table-hover 带悬停效果的表格

6、栅格布局系统

(1)Web开发中页面布局可以采用的方式:

a、使用TABLE做布局

优势:简单不易出错 不足:加载效率

b、使用DIV+CSS做布局

优势:加载速度快、灵活 不足:不易控制

c、使用Bootstrap提供的栅格布局系统

优势:加载速度快、灵活、支持响应式功能、容易控制(有行/列的概念,但使用DIV+CSS实现)

(2)栅格布局系统的特点:

a、所有的行必须放在容器中:.container或.container-fluid

b、分为多行(row),一行中平均分为12列(col)

c、网页内容只能放在列(col)中,不能直接放在行(row)

d、可以在col中再嵌套row

e、col分为四大类:col-xscol-smcol-mdcol-lg

f、col-md-*值可为1~12,值就为某个列的宽度(/12)

g、可以为一个列指定不同屏幕下的不同宽度

h、col-lg-*只对大PC屏幕有效;

col-md-*对普通PC和大PC屏幕都有效;

col-sm-*对平板、PC、大PC屏幕都有效;

col-xs-*对手机、平板、PC、大PC屏幕都有效;

i、hidden-lg当前列只在大PC屏幕下隐藏

hidden-md当前列只在PC屏幕下隐藏

hidden-sm当前列只在平板屏幕下隐藏

hidden-xs当前列只在手机屏幕下隐藏

j、列偏移(offset)

col-xs-offset-1~col-xs-offset-12在lg/md/sm/xs屏幕下偏移

col-sm-offset-1~col-sm-offset-12在lg/md/sm屏幕下偏移

col-md-offset-1~col-md-offset-12在lg/md屏幕下偏移

col-lg-offset-1~col-lg-offset-12在lg屏幕下偏移

k、列排序 (pull/push)

用途:在一行中调整某列的位置,且不影响其他列

col-xs/sm/md/lg-pull/push-*

(3).container的 宽度问题:

当屏幕宽度>1200px(超大PC显示器-lg):容器宽1170px

当屏幕宽度>992px(普通PC显示器-md):容器宽970px

当屏幕宽度>768px(平板显示器-sm):容器宽750px

当屏幕宽度

免责声明:非本网注明原创的信息,皆为程序自动获取自互联网,目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责;如此页面有侵犯到您的权益,请给站长发送邮件,并提供相关证明(版权证明、身份证正反面、侵权链接),站长将在收到邮件24小时内删除。