Bootstrap前端开发案例一Word格式.docx
- 文档编号:14371036
- 上传时间:2022-10-22
- 格式:DOCX
- 页数:5
- 大小:16.83KB
Bootstrap前端开发案例一Word格式.docx
《Bootstrap前端开发案例一Word格式.docx》由会员分享,可在线阅读,更多相关《Bootstrap前端开发案例一Word格式.docx(5页珍藏版)》请在冰豆网上搜索。
metahttp-equiv="
X-UA-Compatible"
content="
IE=edge"
metaname="
viewport"
width=device-width,initial-scale=1"
!
--上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后!
--&
title&
Bootstrap101Template&
/title&
--Bootstrap--&
linkhref="
css/bootstrap.min.css"
rel="
stylesheet"
--HTML5shimandRespond.jsforIE8supportofHTML5elementsandmediaqueries--&
--WARNING:
Respond.jsdoesn'
tworkifyouviewthepageviafile:
//--&
--[ifltIE9]&
scriptsrc="
//
[endif]--&
/head&
body&
h1&
你好,世界!
/h1&
--jQuery(necessaryforBootstrap'
sJavaScriptplugins)--&
--Includeallcompiledplugins(below),orincludeindividualfilesasneeded--&
js/bootstrap.min.js"
/script&
/body&
/html&
1)、注意:
jquery.js的引用一定要在bootstrap.min.js的前面,并且最好手动下载一个jquery.js,放在js路径下,&
js/jquery.min.js"
因为后来我在仿真的时候发现下拉和carousel的动画效果都没有了,发现基本模板的jquery文件是下载的,可能没有联网,所以没有下载下来,最好自己引用本地。
2)、注意:
css引用放页面上方,js引用放页面下方,因为css需要先加载渲染页面,而js需要在页面渲染完毕后加载执行;
并且适应移动设备的meta语句:
第三步、导航条
1)居中效果:
container-fluent需要改成container
2)白色改成反差效果的黑色:
navclass="
navbarnavbar-defaultnavbar-inverse"
3)导航条固定到顶部,增加时类属性:
navbar-fixed-top&
navbarnavbar-defaultnavbar-fixed-topnavbar-inverse"
divclass="
container"
--Brandandtogglegetgroupedforbettermobiledisplay--&
navbar-header"
buttontype="
button"
class="
navbar-togglecollapsed"
data-toggle="
collapse"
data-target="
#bs-example-navbar-collapse-1"
aria-expanded="
false"
spanclass="
sr-only"
Togglenavigation&
/span&
icon-bar"
/button&
aclass="
navbar-brand"
href="
#"
疯狂动物城&
/a&
/div&
--Collectthenavlinks,forms,andothercontentfortoggling--&
collapsenavbar-collapse"
id="
bs-example-navbar-collapse-1"
ulclass="
navnavbar-nav"
liclass="
active"
ahref="
首页&
(current)&
/li&
li&
简述&
特点&
关于&
--/.navbar-collapse--&
--/.container-fluid--&
/nav&
4)导航条会遮盖body的顶部,所以增加样式&
styletype="
text/css"
body{
padding-top:
50px;
}
/style&
5)特点的导航项目增加下拉菜单
dropdown"
dropdown-toggle"
dropdown-menu"
动物1&
动物2&
动物3&
动物4&
/ul&
注意,子菜单的内容均嵌套在最外层的li标签里,并且li标签有类dropdown,子菜单也是一个ul标签,类为dropdown-menu,具体映射关系见上面。
第四步、增加轮转效果,复制修改bootstrap组件的carousel模块:
divid="
carousel-example-generic"
carouselslide"
data-ride="
carousel"
--Indicators--&
olclass="
carousel-indicators"
lidata-target="
#carousel-example-generic"
data-slide-to="
0"
1"
2"
/ol&
--Wrapperforslides--&
carousel-inner"
role="
listbox"
itemactive"
imgsrc="
image/1.jpg"
alt="
..."
carousel-caption"
疯狂动物城1&
p&
来扩大感受到的女生看房名卡位的访问怒法师开门了国家发生的两个号&
/p&
item"
image/2.jpg"
&
image/3.jpg"
a
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Bootstrap 前端 开发 案例
![提示](https://static.bdocx.com/images/bang_tan.gif)