flash型的著名网站,做服装行业网站,广东东莞工厂,企业做网站方案资料:https://v3.bootcss.com/components/ BootStrap的概念#xff08;Web框架#xff09;
Bootstrap#xff0c;来自 Twitter#xff0c;是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的#xff0c;它简洁灵活#xff0c;使得 Web 开发更加快捷。… 资料:https://v3.bootcss.com/components/ BootStrap的概念Web框架
Bootstrap来自 Twitter是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的它简洁灵活使得 Web 开发更加快捷。 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎一直是GitHub上的热门开源项目包括NASA的MSNBC微软全国广播公司的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架如WeX5前端开源框架等也是基于Bootstrap源码进行性能优化而来。
特点 Bootstrap是基于HTML5和CSS3开发的它在jQuery的基础上进行了更为个性化的完善形成一套自己独有的网站风格并兼容大部分jQuery插件。集合了html/css/jquery为一家 作用创建响应式的页面响应式:响应式页面设计一套页面可以适配不同的设备.(PC,PAD,手机).下载BootStrap: 网站: http://www.bootcss.com/进入Bootstrap中文文档下载Bootstrap用于生产环境的 Bootstrap解压使用即可3.0优先使用移动端
项目导入BootStrap
在webcontent目录下新建bootstrap目录将解压后的三个文件夹复制进去在js文件夹中导入jquery-1.11.3.min.js资料类库\jquery 报错的话 右键项目–properties–javascript–include path–source–webcontent–excluded–选中edit–在exclusion中–add–browser–选中报错的js文件–添加–ok–ok jsp页面导入方式:
meta http-equivX-UA-Compatible contentIEedge !-- 在IE运行最新的渲染模式 --
meta nameviewport contentwidthdevice-width,initial-scale1 !-- 初始化显示设置宽度平移缩放 --link relstylesheet href${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css
link relstylesheet href${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css
script src${pageContext.request.contextPath}/bootstrap3/js/jquery-1.11.3.min.js/script !-- 这两个js文件有时放在body上--
script src${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js/scriptHTML页面导入方式:
!--导入网站上的免费的--!-- 最新版本的 Bootstrap 核心 CSS 文件 --link relstylesheet hrefhttps://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css integritysha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4VaPmSTsz/K68vbdEjh4u crossoriginanonymous
!-- 可选的 Bootstrap 主题文件一般不用引入 --link relstylesheet hrefhttps://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css integritysha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp crossoriginanonymous
!-- 最新的 Bootstrap 核心 JavaScript 文件 --script srchttps://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js integritysha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossoriginanonymous/script案例
% page languagejava contentTypetext/html; charsetUTF-8pageEncodingUTF-8%
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
html
head
meta http-equivContent-Type contenttext/html; charsetUTF-8
titleInsert title here/title
!-- 导入配置等 --
link relstylesheet href${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css
link relstylesheet href${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css
script src${pageContext.request.contextPath}/bootstrap3/js/jquery-1.11.3.min.js/script
script src${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js/script
/head
body stylepadding: 20px !-- 加上边距 使页面不会紧贴边框--
!-- 一个按钮 --
button typebutton classbtn btn-dangerBootstrap大爷你好/button
/body
/html支持移动设备
在head中添加标签
meta nameviewport contentwidthdevice-width, !--跟随设备宽度--initial-scale1 !--初始化是否缩放1不缩放--maximum-scale1, !--最大缩放--user-scalableno !--是否支持缩放手机双手缩放页面--将所有的内容放入到布局容器中.
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类
方式1:div classcontainer/div 左右两边有留白常用
方式2:div classcontainer-fluid/div 留白小近似100%若普通方式则是100%meta: width:可视区域的宽度值可为数字或关键词device-widthheight:同widthintial-scale:页面首次被显示是可视区域的缩放级别取值1.0则页面按实际尺寸显示无任何缩放maximum-scale1.0, minimum-scale1.0;可视区域的缩放级别maximum-scale用户可将页面放大的程序1.0将禁止用户放大到实际尺寸之上。user-scalable:是否可对页面进行缩放no 禁止缩放
!DOCTYPE html
htmlheadmeta charsetUTF-8
!--导入文件--meta nameviewport contentwidthdevice-width, initial-scale1
!--为了移动设备优先支持移动设备--title/title!-- 导入 css--link relstylesheet hrefcss/bootstrap.min.css /!--导入jquery.js--script typetext/javascript srcjs/jquery-1.11.0.js /script!--导入bootstrap.js--script typetext/javascript srcjs/bootstrap.min.js /script/headbody!-- 方法1有留白--div classcontainerdiv styleborder: 1px solid red;123/div/div!-- 方法2近似100%--div classcontainer-fluiddiv styleborder: 1px solid red;123/div/div/body
/html方法1样式:
方法2样式: 注意: bootstrap将每一行分成12份 屏幕媒体查询:自动调节
一行分成12份满12份直接换行
自动判断是什么上网设备:用像素判断
栅格系统: 大屏幕分辨率1200px 每行显示6个 使用:col-lg-2中992屏幕分辨率1200 每行显示4个 使用: col-md-3小768屏幕分辨率992每行显示2个 使用: col-sm-6超小屏幕分辨率768(手机) 每行显示1个 使用:col-xs-12
div styleborder: 1px solid red; classcol-lg-1 col-md-2 col-sm-4 col-xs-61/div
注意想要能自适用必须在div classcontainer /div中轮播图案例
!DOCTYPE html
html
headmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1 /title/title!-- 导入 css--link relstylesheet hrefcss/bootstrap.min.css /!--导入jquery.js--script typetext/javascript srcjs/jquery-1.11.0.js/script!--导入bootstrap.js--script typetext/javascript srcjs/bootstrap.min.js/scriptscript$(function(){ //控制每隔5s跳转一下$(.carousel).carousel({interval: 1000})})/script
/head
bodydiv classcontainerdiv idcarousel-example-generic classcarousel slide data-ridecarousel!-- Indicators --!--需要几张图片 就得添加几个 li 还需要在下面的div提供几个 classitem的div--ol classcarousel-indicatorsli data-target#carousel-example-generic data-slide-to0 classactive/lili data-target#carousel-example-generic data-slide-to1/lili data-target#carousel-example-generic data-slide-to2/li/ol!-- 显示的图片 --div classcarousel-inner rolelistboxdiv classitem active//激活的默认第一张图img srcimg/1.jpg alt /div classcarousel-caption我是第一张图片/div/divdiv classitemimg srcimg/2.jpg alt... /div classcarousel-captioniam second/div/divdiv classitemimg srcimg/3.jpg alt... /div classcarousel-captionthird/div/div/div!-- Controls --a classleft carousel-control href#carousel-example-generic rolebutton data-slideprev span classglyphicon glyphicon-chevron-left aria-hiddentrue/span span classsr-onlyPrevious/span /aa classright carousel-control href#carousel-example-generic rolebutton data-slidenext span classglyphicon glyphicon-chevron-right aria-hiddentrue/span span classsr-onlyNext/span /a/div/div
/body
/html隐藏 hidden-xxxx
位置 Bootstrap3.0–全局css样式–右响应式工具–可用的类
标签超小屏幕手机 (768px)小屏幕平板 (≥768px)中等屏幕桌面 (≥992px)大屏幕桌面 (≥1200px).visible-xs-*可见隐藏隐藏隐藏.visible-sm-*隐藏可见隐藏隐藏.visible-md-*隐藏隐藏可见隐藏.visible-lg-*隐藏隐藏隐藏可见.hidden-xs隐藏可见可见可见.hidden-sm可见隐藏可见可见.hidden-md可见可见隐藏可见.hidden-lg可见可见可见隐藏
将超链接伪装成按钮 classbtn btn-primary浮动到右边
classpull-right案例:网站首页
!DOCTYPE html
htmlheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1 /title/title!-- 导入 css--link relstylesheet href../css/bootstrap.min.css / script typetext/javascript src../js/jquery-1.11.0.js/scriptscript typetext/javascript src../js/bootstrap.min.js/script/headbodydiv classcontainer!--logo 小屏幕: 2个一行 超小屏幕:一个一行 --div classrow !--确保每个一行-- div classcol-md-4 col-sm-6 col-xs-12img src../img/logo2.png / /div div classcol-md-4 col-sm-6 col-xs-12 img src../img/header.jpg / /div div classcol-md-4 col-sm-6 col-xs-12 ul classlist-inline !--在一行-- li stylepadding-top: 15px;a href#登录/a/li !--设置距离顶端距离使居中-- lia href#注册/a/li lia href#购物车/a/li /ul /div /div !--导航条-- div classrow nav classnavbar navbar-inverse!--—设置背景色黑色--- div classcontainer-fluid !-- Brand and toggle get grouped for better mobile display -- div classnavbar-header button typebutton classnavbar-toggle collapsed data-togglecollapse data-target#bs-example-navbar-collapse-1 aria-expandedfalse span classsr-onlyToggle navigation/span span classicon-bar/span span classicon-bar/span span classicon-bar/span /button a classnavbar-brand href#传智播客/a /div !-- Collect the nav links, forms, and other content for toggling -- div classcollapse navbar-collapse idbs-example-navbar-collapse-1 ul classnav navbar-nav li classactivea href#JAVA学院 span classsr-only(current)/span/a/li lia href#UI学院/a/li lia href#C学院/a/li li classdropdown a href# classdropdown-toggle data-toggledropdown rolebutton aria-haspopuptrue aria-expandedfalse其他学院span classcaret/span/a ul classdropdown-menu lia href#IOS学院/a/li lia href#电子商务/a/li lia href#前端/a/li li roleseparator classdivider/li lia href#Separated link/a/li li roleseparator classdivider/li lia href#幼儿园/a/li /ul /li /ul form classnavbar-form navbar-left pull-right rolesearch div classform-group input typetext classform-control placeholderSearch / /div button typesubmit classbtn btn-defaultSubmit/button /form /div!-- /.navbar-collapse -- /div!-- /.container-fluid -- /nav /div !--轮播图-- div classrow div idcarousel-example-generic classcarousel slide data-ridecarousel !--默认5s跳转-- !-- Indicators -- !--需要几张图片 就得添加几个 li 还需要在下面的div提供几个 classitem的div-- ol classcarousel-indicators li data-target#carousel-example-generic data-slide-to0 classactive/li li data-target#carousel-example-generic data-slide-to1/li li data-target#carousel-example-generic data-slide-to2/li /ol !-- 显示的图片 -- div classcarousel-inner rolelistbox div classitem active img src../img/1.jpg alt / div classcarousel-caption我是第一张图片 /div /div div classitem img src../img/2.jpg alt... / div classcarousel-captioniam second /div /div div classitem img src../img/3.jpg alt... / div classcarousel-captionthird /div /div /div !-- Controls -- a classleft carousel-control href#carousel-example-generic rolebutton data-slideprev span classglyphicon glyphicon-chevron-left aria-hiddentrue/span span classsr-onlyPrevious/span /a a classright carousel-control href#carousel-example-generic rolebutton data-slidenext span classglyphicon glyphicon-chevron-right aria-hiddentrue/span span classsr-onlyNext/span /a /div /div !--最新商品-- div classrow div classrow span classh2最新商品/span !--—防止换行---- img src../img/title2.jpg / /div !-- 左边的div 放一张图片屏幕为小屏幕的时候和超小屏幕的时候 隐藏中等屏幕 占2份-- div classcol-md-2 hidden-sm hidden-xs styleheight: 400px; img src../img/big01.jpg styleheight: 100%; / /div !--中等屏幕 占10份已经2份被占屏幕为小屏幕的时候和超小屏幕的时候 占12份-- div classcol-md-10 col-sm-12 styleheight: 400px; !--middle中等屏幕 6份小屏幕 12份超小屏幕 隐藏-- div classcol-md-6 col-sm-12 hidden-xs styleheight: 200px; img src../img/middle01.jpg styleheight: 200px; / /div !--中等屏幕 2份, 小屏幕 4份,超小屏幕 12份 -- div classcol-md-2 col-sm-4 col-xs-12 styleheight: 200px; img src../img/small08.jpg / /div div classcol-md-2 col-sm-4 col-xs-12 styleheight: 200px; img src../img/small08.jpg / /div div classcol-md-2 col-sm-4 col-xs-12 styleheight: 200px; img src../img/small08.jpg / /div div classcol-md-2 col-sm-4 col-xs-12 styleheight: 200px; img src../img/small08.jpg / /div div classcol-md-2 col-sm-4 col-xs-12 styleheight: 200px; img src../img/small08.jpg / /div div classcol-md-2 col-sm-4 col-xs-12 styleheight: 200px; img src../img/small08.jpg / /div div classcol-md-2 col-sm-4 col-xs-12 styleheight: 200px; img src../img/small08.jpg / /div div classcol-md-2 col-sm-4 col-xs-12 styleheight: 200px; img src../img/small08.jpg / /div div classcol-md-2 col-sm-4 col-xs-12 styleheight: 200px; img src../img/small08.jpg / /div /div /div !--foot--div classrow/div/div/body
/html
