Bootstrap网站开发实战全套电子整本书电子教案教学教程.pptx

,教,学,课,件,Bootstrap,网站开发,实战,延迟符,延迟符,教学内容,延迟符,博客网站,使用纯的,bootstrap,框架建站,专题网站,基于,bootstrap,框架定制前台网站,后台管理网站,基于,bootstrap,框架高级定制网站,(,含,javascript,插件,),1,2,3,延迟符,教学,内容,内容分析,05,03,01,02,04,全局,CSS,样式,组件,JS,插件,个性化定制,网站实例,学习文档：,example-fluid,，查看。如,图所,示,。,代码如下,左侧,中间,右侧,请大家,自己,实现,-,分,3,栏,3.,左侧,列表,的实现,步骤,1,：登录到,bootstrap,官方网站,https,：,/,，选择组件,-,列表组，或者直接在浏览器中输入,https,：,/Cras justo odio,Dapibus ac facilisis in,Morbi leo risus,Porta ac consectetur ac,Vestibulum at eros,中间,右侧,步骤,2,：根据效果图，修改代码内容，去掉第一项的,active,类。,热门博文,资源下载,文档翻译,请大家,自己,实现,-,左侧栏,4.,中间日志,列表,的实现,步骤,1,：登录到,bootstrap,官方网站,https,：,/,，选择组件,-,面版，或者直接在浏览器中输入,https,：,/Basic panel example,步骤,2,：登录到,bootstrap,官方网站,https,：,/,，选择组件,-,媒体对象，或者直接在浏览器中输入,https,：,/Python,数据挖掘与分析,在实际应用中，待分析数据的来源类型可能是非常繁杂的,步骤,3,：登录到,bootstrap,官方网站,https,：,/,，选择全局,CSS,样式,-,栅格系统，或者直接在浏览器中输入,https,：,/1,天前,0,步骤,4,：,登录到,bootstrap,官方网站,https,：,/,，选择组件,-Glyphicons,字体图标，或者直接在浏览器中输入,https,：,/1,天前,5 0,用到的字体图标类名,glyphicon-user,glyphicon-eye-open,glyphicon-pencil,分页的实现,步骤,6,：登录到,bootstrap,官方网站,https,：,/,，选择组件,-,分页，或者直接在浏览器中输入,https,：,/(current),2,3,4,5,5.,右侧内容,步骤,1,：公告的实现。登录到,bootstrap,官方网站,https,：,/,，选择组件,-,面版，带有标题的面版，或者直接在浏览器中输入,https,：,/title,Panel content,步骤,2,：登录到,bootstrap,官方网站,https,：,/,，选择组件,-,列表组，带有标题的面版，或者直接在浏览器中输入,https,：,/Panel content,发表文章现金奖励,步骤,3,：去掉,.panel-body,，面版标题会和表格连接起来，没有空隙。具体代码如,下：,公告,发表文章现金奖励,步骤,4,：名片和友情链接的实现步骤，与公告类似。这里就不详细介绍。分析如,图所,示,6.,尾部采用定制样式,步骤,1,：尾部的,HTML,结构代码如,下：,Copyright SHINE,博客,|ICP,备,111,号,-2,步骤,2,：新建一个,index.css,样式，引入样,式。,步骤,3,：自定义的,index.css,样式。代码如,下：,.footer,background:#111;,font-size:13px;,text-align:center;,color:#555555;,padding-top:28px;,padding-bottom:28px;,border-top:1px solid#303030;,7.,响应式的实现,步骤,1,：登录到,bootstrap,官方网站,https,：,/,，选择全局,CSS,样,式,-,响,应式工具，或者直接在浏览器中输入,https,：,/,，选择,javascript,插件,-,标签页，或者直接在浏览器中输入,https,：,/javascript/#tabs,，,复制图所示的示例代码。根据效果图内容，修改代,码。,具体代码片断如下：请大家按照所给出的代码片断，根据效果图完成“最新推荐”、“本周热门”、“本月热门”、“所有热门”完整的代码编,写,。,如何建立个人博客,想必很多人都想建立一个,SHINE,发布于,2017,年,3,月,18 19,时,24,分 阅读,1980,对网站域名的选择,SHINE,发布于,2017,年,3,月,18 19,时,24,分 阅读,1980,策划和设计网站效果图,SHINE,发布于,2017,年,3,月,18 19,时,24,分 阅读,1980,步骤,3,：内容右侧效果如,图所,示。登录到,bootstrap,官方网站,https,：,/,，,选择组件,-,列表组,-,徽章,，或者直接在浏览器中输入,https,：,/badges,，如,图所,示,。,代码如下,博客模板分类,个人博客,14,企业网站,14,门户咨询,14,商城网站,14,品牌设计,14,微信小程序,14,分销系统,14,微店小站,14,下载中心页面的实现,注意观察手机端和桌面端,下载中心页面的导航条、尾部、右侧的列表、标签页、响应式制作与其它页面一样。,1.,本站热门下载资源,步骤,1,：新建,download.html,页面。下载中心页面的整体结构如,图所,示,。,本站热门下载资源的整体结构如图所示,。,标题“本站热门下载资源”的内容结构如图所示,。,图文内容的结构如图所,示。,步骤,2,：登录到,bootstrap,官方网站,https,：,/,，选择,javascript,组件,-,缩略图，或者直接在浏览器中输入,https,：,/,Action,Another action,Something else here,Separated link,步骤,2,：根据导航条效果图修改代码中导航条内容。,这里需要修改的导航条代码部分使用粗体标记标出。将粗体标记的地方修改为效果图中对应的内容,。,需要修改的代码,效果图中对应的内容代码,Brand,Link(current),Link,首页,(current),公司简介,解决方案,成功案例,步骤,3,：需要设置的样式是导航条颜色和固定到顶部，导航条内容居中。这里需要修改的导航条代码部分使用粗体标记标出。将粗体标记的地方修改为效果图中对应的内容（修改之后的代码部分使用粗体标记标出）。,需要修改的代码,效果图中对应的内容代码,步骤,4,：定制样式,index.css,。解决显示效果出现的问题,1,：,logo,图片比较靠下。这里需要新建一个,index.css,文件。在样式文件中编写代码，具体代码如,下：,.navbar-brand,padding:10px 15px;,步骤,5,：修改导航条搜索模块。这里需要修改的导航条代码部分使用粗体标记标出。将黄色标记的地方修改为效果图中对应的内容（修改之后的代码部分使用粗体标记标出）,Submit,需要修改的代码,效果图中对应的内容代码,Submit,go,go,公司,介绍主要使用的,bootstrap,框架是巨,幕。,公司,介绍,的实现,步骤,1,：登录到,bootstrap,官方网站,https,：,/,，选择组件,-,巨幕，或者直接在浏览器中输入：,https,：,/.,步骤,2,：定制样式,index.css,。解决显示效果问题：去掉巨幕和导航条之间的边距。具体样式代码如,下：,.navbar,margin-bottom:0px;,步骤,3,：定制样式,index.css,。,设置巨幕,Banner,背景图片。,具体样式代码如,下：,.jumbotron,background:url(./images/bg.jpg)center center no-repeat;,步骤,4,：制作巨幕的内容，使用全局,CSS3,样式,-,栅格系统。具体代码如,下：,公司简介,GEMINITECH,有限公司，我们作为创新型科技企业，拥有一个充满朝气，高素质、年轻化、专业化的开发团队，为公司蓬勃发展提供源源不断的活力与动力。我们致力于为企业提供中高端专属定制开发服务，集策划，设计，开发，营销服务于一体的新型互联网企业。,步骤,5,：解决显示效果问题：公司简介内容需要靠右边一点，使用,bootstrap,框架中的偏移。这里需要修改的代码部分使用黄色标记标出。将粗体标记的地方修改为效果图中对应的内容（修改之后的代码部分使用粗体标记标出）。,需要修改的代码,效果图中对应的内容代码,步骤,6,：定制样式,index.css,。解决效果显示问题：图片底部对齐。具体样式代码如,下：,.jumbotron,background:url(./images/bg.jpg)center center no-repeat;,padding:10px 0 0 0;,步骤,7,：定制样式,index.css,。定制标题和文字内容的样式。具体样式代码如,下：,标题样式代,码：,.banner-title,font-size:24px;,color:#ddfa52;,line-height:1;,margin-top:90px;,文字内容样式代,码：,.banner-detail,font-size:14px;,color:#fff;,line-height:28px;,margin-top:20px;,步骤,8,：制作巨幕的响应式。大屏幕的巨幕效果已经完成。现在需要制作中等屏幕、平板、手机端的效,果。,中等屏幕,(,要考虑：排版响应式,+,图片响应式,),，这里需要修改的代码部分使用粗体标记标出。具体代码如,下：,公司简介,GEMINITECH,有限公司，我们作为创新型科技企业，拥有一个充满朝气，高素质、年轻化、专业化的开发团队，为公司蓬勃发展提供源源不断的活力与动力。我们致力于为企业提供中高端专属定制开发服务，集策划，设计，开发，营销服务于一体的新型互联网企业。,平板和手机,(,图片不显示,),，这里需要修改的代码部分使用黄色标记标出。具体代码如,下：,公司简介,GEMINITECH,有限公司，我们作为创新型科技企业，拥有一个充满朝气，高素质、年轻化、专业化的开发团队，为公司蓬勃发展提供源源不断的活力与动力。我们致力于为企业提供中高端专属定制开发服务，集策划，设计，开发，营销服务于一体的新型互联网企业。,解决方案主要使用的,bootstrap,框架是栅格系统、响应式，大部分效果需要定制样式。,解决,方案,的实现,步骤,1,：解决方案内容。使用栅格系统制作。具体代码如,下：,解决方案,主要从事互联网品牌建设与网络营销，专业领域包括网站建设，微信开发，网络营销，电子商务服务外包相关类别，并积极开拓,IT,技术在各个行业应用的咨询服务。致力于为用户提 供适合的解决方案。,步骤,2,：定制样式,index.css,。解决效果显示问题：灰色背景。具体样式代码如,下：,.gray-bg,background-color:#f2f2f2;,步骤,3,：定制样式,index.css,。解决效果显示问题：巨幕,banner,下边距。粗体标识的代码是按照效果图修改后的代码。具体样式代码如,下：,.jumbotron,background:url(./images/bg.jpg)center center no-repeat;,padding:10px 0 0 0;,margin-bottom:0px;,步骤,4,：定制样式,index.css,。解决效果显示问题：定义标题和文字内容的样式。具体样式代码如,下：,.common-title,font-size:30px;,color:#b5cd42;,line-height:1;,margin-top:45px;,.common-detail,font-size:14px;,color:#7a7a7a;,line-height:28px;,margin-top:18px;,步骤,5,：解决效果显示问题：文字居中，需要在结构中使用栅格系统和偏移。粗体标识的代码是按照效果图修改后的代码。具体代码如,下：,解决方案,主要从事互联网品牌建设与网络营销，专业领域包括网站建设，微信开发，网络营销，电子商务服务外包相关类别，并积极开拓,IT,技术在各个行业应用的咨询服务。致力于为用户提 供适合的解决方案。,步骤,6,：网站建设这一区域效果如,图所,示。粗体标识的代码是按照效果图修改后的代,码。,具体代码如,下：,网站建设,品牌展示网站、官方门户网站、营销网站建设、电商平台开发,为了方便定制样式，给每个,div,自定义一个类。粗体标识的代码是按照效果图修改后的代码。具体代码如,下：,网站建设,品牌展示网站、官方门户网站、营销网站建设、电商平台开发,将上一步骤的内容复制,6,份，并按照效果图修改里面的文字内容。,步骤,7,：定制样式,index.css,。解决效果显示问,题。,解决效果显示问题,1,：定义上边距。具体样式代码如,下：,.list-con,margin-top:96px;,解决效果显示问题,2,：定义图标。具体样式代码如下：,.list-item,height:112px;,padding-left:138px;,background:url(./images/icons.png)left top no-repeat;,margin-bottom:39px;,解决效果显示问题,3,：定义标题和文字内容。具体样式代码如,下：,.list-item h3,font-size:16px;,color:#4e4e4e;,font-weight:bold;,.list-item p,font-size:14px;,color:#7a7a7a;,line-height:28px;,步骤,8,：解决大屏幕、中屏幕、平板、小屏幕效果显示问题：响应式。使用响应式工具,。,步骤,9,：修改图标，自定义样式。需要为每一个,div,定义一个类名。然后定制,index.css,。,定制,index.css,。具体样式代码如,下：,.list02,background-position:left-112px;,.list03,background-position:left-224px;,.list04,background-position:left-336px;,.list05,background-position:left-448px;,.list06,background-position:left-560px;,步骤,1,：成功案例的标题区域部分的效果与解决方案的效果样式,一致,。,所以这部分代码可以复制解决方案的代码。只需要按照效果图修改代码的文字内容即可,成功案例的实现,步骤,2,：成功案例的图片列表部分，采用栅格系统制作。具体代码如,下：,步骤,3,：定制,index.css,。解决效果显示问,题。,解决效果显示问题,1,：设置上边距。具体代码如,下：,.case-list,margin-top:75px;,解决效果显示问题,2,：图片缩放。具体代码如,下：,.case-list img,width:100%;,步骤,4,：解决成功案例大屏幕、中屏幕、平板、小屏幕效果显示问题。使用全局,CSS3,样式,-,响应式工具。具体代码如,下：,步骤,5,：定制,index.css,。解决效果显示问,题。,解决效果显示问题,1,：去掉图片的边距。具体样式代码如,下：,.case-list.col-lg-3,padding:0px;,解决效果显示问题,2,：添加左右边距。粗体标识的代码是按照效果图修改后的代码。具体样式代码如,下：,.case-list,margin-top:75px;,padding-left:15px;,padding-right:15px;,步骤,6,：定制,index.css,。自定义超小屏幕响应式样式。具体样式代码如,下：,media(max-width:500px),.case-list.col-xs-6,width:100%;,步骤,7,：解决效果显示问题：制作遮罩文字。粗体标识的代码是按照效果图修改后的代码。具体代码如,下：,网站建设,品牌展示网站、官方门户网站、营销网站建设、电商平台开发,步骤,8,：定制,index.css,。使用定位，解决效果显示问题。粗体标识的代码是按照效果图修改后的代码。具体样式代码如,下：,.case-list.col-lg-3,padding:0px;,position:relative;,.case-list.col-lg-3.mask,position:absolute;,left:0px;,top:0px;,width:100%;,height:100%;,background-color:#b5cd42;,color:#fff;,padding:10px;,display:none;,.case-list.col-lg-3:hover.mask,display:block;,步骤,1,：合作伙伴标题这部分效果和成功案例效果的基本结构,一样。,只需要按照效果图修改代码的文字内容即可。注意这部分的背景是蓝色，所以需要定制,样式,合作伙伴的实现,步骤,2,：定制,index.css,。解决效果显示问,题。,解决效果显示问题,1,：定义背景。具体样式代码如,下：,.blue-bg,background-color:#2c8fba;,解决效果显示问题,2,：定义文字。具体样式代码如下：,.blue-mon-title,color:#fff;,.blue-mon-detail,color:#fff;,步骤,3,：解决效果显示问题：图片排列。采用栅格系统。具体代码如,下：,步骤,4,：定制,index.css,。使用定位，解决效果显示问,题。,解决效果显示问题,1,：引入图片样式。具体样式代码如,下：,.logo-list a,display:block;,width:200px;,height:180px;,background:url(./images/logos.png)left top no-repeat;,margin:0 auto;,解决效果显示问题,2,：图片排列居中。具体样式代码如,下：,.logo-list.col-lg-2,width:20%;,解决效果显示问题,3,：图片定位。具体样式代码如,下：,.logo-list.logo02,background-position:left-180px;,.logo-list.logo03,background-position:left-360px;,.logo-list.logo04,background-position:left-540px;,.logo-list.logo05,background-position:left-720px;,步骤,5,：定制,index.css,。解决大屏幕、中屏幕、平板、小屏幕效果显示问题。采用全局,CSS3,样式,-,响应式工具。具体样式代码如,下：,media(max-width:1200px),.logo-list.col-lg-2,width:33%;,float:left;,media(max-width:992px),.logo-list.col-lg-2,width:50%;,float:left;,media(max-width:768px),.logo-list.col-lg-2,width:100%;,步骤,6,：定制,index.css,。使用定位，解决效果显示问题：下边距。粗体标识的代码是按照效果图修改后的代码。具体样式代码如,下：,.logo-list,margin-bottom:40px;,步骤,1,：内容结构的搭建，主要采用栅格系统。从项目效果图可以看出这部分内容分为,4,栏，每一栏的内容和结构完全一样，此处省略号处省去的是第,2,、,3,、,4,栏的内容和结构，因为此,3,部分的结构与粗体标识的结构一样，所以,请大家自行,复制三份,，修改文字内容即可。具体代码结构如,下：,公司,关于我们,公司招聘,公司团队,版权,使用条款,隐私政策,联系我们,友情链接的实现,步骤,2,：定制,index.css,。解决效果显示问,题。,解决效果显示问题,1,：内容的上下边距离。具体样式代码如,下：,.links-list,margin-top:72px;,margin-bottom:72px;,解决效果显示问题,2,：定义文字样式。具体样式代码如,下：,.links-list dt,font-size:20px;,color:#191919;,line-height:1;,margin-bottom:10px;,.links-list dd,line-height:30px;,.links-list dd a,color:#a0a0a0;,步骤,3,：解决大屏幕、中等屏幕、平板、小屏幕效果显示问题。从项目效果图可以看出大屏幕分为,4,栏，中等屏幕、平板和小屏幕分为,2,栏。技术实现采用栅格系统,col-lg-3 col-md-6 col-sm-6 col-xs-6,来实现结构,尾部版权部分，主要采用定制,index.css,样式。结构采用栅格系统。,尾部,版权,的实现,步骤,1,：采用栅格系统和全局,CSS3,样式中的响应式工具，来布局结构。具体代码如,下：,2017 Comlogo.All Rights Reserved.,HOME,ABOUT US,FAP,CONTACT US,/,步骤,2,：定制,index.css,。解决显示效果问题。具体样式代码如,下：,.dark-bg,background-color:#2e2e2e;,border-top:5px solid#2994bf;,.footer,min-height:82px;,.footer.text-left,color:#fff;,line-height:82px;,.footer.text-right,line-height:82px;,.footer.text-right a,color:#fff;,padding-left:10px;,步骤,3,：定制,index.css,。解决小屏幕显示效果问题。具体样式代码如,下：,media(max-width:768px),.footer.text-left,line-height:60px;,.footer.text-right,text-align:left;,line-height:20px;,margin-bottom:15px;,.footer.text-right a,padding-left:0px;,padding-right:10px;,延时符,谢,谢,聆,听,！,敬请批评指正,延迟符,延迟符,项目三,后台管理页面,延迟符,延迟符,页面效果展示,请打开项目三的源代码，演示。请同学们注意观察手机端和桌面端,延迟符,后台首页的实现,后台首页主要分为,导航条、警告框、网站统计、网站热贴、今日访客统计、服务器状态、团队留言板、发表留言、团队联系方式以及尾部,1.,导航条,步骤,1,：建立后台首页,index.html,。导航条基本内容搭建。选择官方文档,-,组件,-,导航条，复制导航条代码，并根据效果图修改相关代码内容。这里只列出修要修改的代码部分。如,表所,示。,序号,根据效果图修改好的代码部分,1,COMO Admin,2,后台首页,(current),用户管理,内容管理,标签管理,3,admin,前台首页,个人主页,个人设置,账户中心,我的收藏,退出,步骤,2,：导航条图标样式的设置。选择官方文档,-,组件,-Glyphicons,字体图标（查找对应字体图标）。根据效果图修改相关代码内容。这里只列出修要修改的代码部分,。,序号,根据效果图修改好的代码部分,1,后台首页,(current),用户管理,内容管理,标签管理,2,前台首页,个人主页,个人设置,账户中心,我的收藏,3,退出,步骤,3,：搭建其他页面。在导航条中设置其它三个页面的超链接。新建三个页面，分别为：用户管理页面,user_list.html,，内容管理页面,content.html,，标签管理页面,tag.html,。根据效果图修改相关代码内容。这里只列出修要修改的代码部分。,序号,根据效果图修改好的代码部分,1,后台首页,2,用户管理,3,内容管理,4,标签管理,2.,后台界面警告框制作,步骤,1,：利用栅格系统制作一个一行一列的容器。具体代码如,下：,步骤,2,：登录到,bootstrap,官方网站,https,：,/,，选择,javascript,插件,-,警告框，或者直接在浏览器中输入,https,：,/snap!You got an error!,Change this and that and try again.Duis mollis,est non commodo luctus,nisi erat porttitor ligula,eget lacinia odio sem nec elit.Cras mattis consectetur purus sit amet fermentum.,Take this action,Or do this,步骤,3,：根据效果图修改代码的文字内容。具体代码如,下：,网站存在漏洞，急需修复！,当前版本程序版本太低,存在严重安全问题，容易造成攻击，请即可修复！,立即修复,稍后处理,步骤,4,：制作事件处理动作，鼠标点击“稍后处理”，关闭警告,框。,为关闭按钮添加,data-dismiss=alert,属性就可以使其自动为警告框赋予关闭功能。关闭警告框也就是将其从,DOM,中删除。具体代码如,下：,稍后处理,3.,后台界面网站统计数据和热帖制作,步骤,1,：网站统计数据和网站热帖这两部分内容，需要采用栅格系统分,2,栏。具体代码结构如,下：,步骤,2,：为网站统计数据和网站热帖这两部分内容，添加面版。选择官方文档,-,组件,-,面版，选取带标题面版，复制代码。代码结构如,下：,Panel heading without title Panel content,步骤,3,：根据网站统计数据和网站热帖这两部分内容的效果图，修改代码内容。需要修改的代码如,下：,Panel heading without title Panel content ,Panel heading without title Panel content ,步骤,4,：后台界面网站统计数据。登录到,bootstrap,官方网站,https,：,/,，选择全局,CSS,样式,表格，或者直接在浏览器中输入,https,：,/,统计项目,今日,昨日,注册会员,200 400,登录会员,41005112,今日发帖,15404511,转载次数,150110,步骤,6,：网站热帖制作。选择官方文档,组件,列表组。复制代码。具体代码如,下：,Cras justo odio,Dapibus ac facilisis in,Morbi leo risus,Porta ac consectetur ac,Vestibulum at eros,步骤,7,：根据网站热帖的效果样式，修改样式。如果没有,.panel-body,，面版标题会和表格连接起来，没有空隙。去掉代,码：,Panel content ,步骤,8,：根据网站热帖效果图的内容，修改代码内容。省略部分的代码和粗体标识代码一样，复制代码即可。修改后的部分代码结构如,下：,网站热帖,发挥特长 迅速反应 多语种输出助力国际战“疫”,2015/08/08,4.,后台界面今日访客统计图表制作,今日访客统计图表制作需要用到图标插件,chart.js,。图表插件的使用方法如,下：,请登陆到网站：,http,：,/64px;,height:64px;,border-radius:50%;,步骤,6,：在媒体对象中，使用,well,类，设置对齐方式，使用,.wh,类。具体代码如,下：,李哥,阿文，今晚需要加班,升级网站程序，网站发现漏洞！,7.,留言表单的制作,步骤,1,：选择官网,-,全局,CSS,样式,-,表单。选取一种合适的表单效果样式。复制代码，并根据留言表单效果修改内容。具体代码如,下：,输入留言内容,留言,步骤,2,：定制,index.css,。定义样式,mar,，解决效果显示问题：上边距。样式代码如,下：,.mar,margin-top:15px;,8.,团队联系方式的制作,步骤,1,：根据团队联系方式的效果图和文字内容，采用组件,-,面版和列表组。这里还需要组件,-,图标。具体代码如,下：,团队联系方式,站长,(,李大哥,),：,13435797092,技术,(,阿文哥,),：,13435797092,推广,(,阿强哥,),：,13435797092,客服,(,阿敏姐,),：,0760-888888,9.,尾部的制作步骤,尾部效果和样式制作比较,简单,。,具体,代码如,下：,Copyright ICP,备,1300,号,-4,定制,index.css,。自定义样式代码如下：,footer,font-weight:400;,text-align:center;,padding:20px;,步骤,1,：新建,user_list.html,页面。根据用户列表页面效果图，采用栅格系统分,2,栏。具体代码如,下：,用户列表,页,的实现,步骤,2,：根据左侧导航效果图，采用组件,-,列表,链接效果样式。复制链接效果样式代码，并根据左侧导航效果图文字内容，修改代码。具体代码如,下：,用户管理,用户搜索,添加用户,步骤,3,：,右侧内容部分标题“用户管理”的实现。根据效果图，标题使用,bootstrap,组件页头来实现。页头的代码可以参看,bootstrap,官方网站登陆地址：,https,：,/具体代码如,下：,用户管理,定制标题样式代码如下：,.page-header,margin-top:0;,.page-header h1,margin:0;,font-size:16px;,步骤,5,：,用户列表项的实现。,从项目效果图可以看出，用户列表内容是标签页的内容，,标签页的内容为表格。登录到,bootstrap,官方,网站,https,：,/,，选择全局,CSS3,样式,-,表格，或者直接在浏览器中输入,https,：,/table caption.,ID,用户名,邮箱,操作,1,张三,123456789,操作,步骤,6,：,用户列表项操作功能的实现。,从项目效果图可以看出，,采用组件,-,下拉菜单来实现。登录到,bootstrap,官方网站,http,s,：,/,，选择组件,-,下拉菜单，或者直接在浏览器中输入,https,：,/components/#dropdowns,，选择合适的表格效果样式代码。根据标签的内容修改代码，具体代码如,下：,ID,用户名,邮箱,操作,1,张三,123456789,操作,编辑,删除,锁定,修改密码,步骤,6,：,用户列表项操作功能的实现。,从项目效果图可以看出，,采用组件,-,下拉菜单来实现。登录到,bootstrap,官方网站,http,s,：,/,，选择组件,-,下拉菜单，或者直接在浏览器中输入,https,：,/components/#dropdowns,，选择合适的表格效果样式代码。根据标签的内容修改代码，具体代码如,下：,ID,用户名,邮箱,操作,1,张三,123456789,操作,编辑,删除,锁定,修改密码,步骤,8,：左侧导航页面链接修改。具体代码如,下：,用户列表,用户搜索,添加用户,步骤,1,：新建,user-search.html,页面。登录到,bootstrap,官方网站,https,：,/,，选择局,CSS,样式,表单，或者直接在浏览器中输入,https,：,/,新手上路,注册,会员,中级会员,高级会员,提交,用户,搜索,的实现,步骤,2,：添加提示内容：“技巧提示”。登录到,bootstrap,官方网站,https,：,/,，选择组件,警告框，或者直接在浏览器中输入,https,：,/#alerts,，选择合适的效果样式代码。根据内容修改代码，具体代码如,下：,技巧提示：,支持模糊搜索和匹配搜索，匹配搜索使用,*,代替！,步骤,3,：定制,index.css,样式。解决显示效果问题。定义类,user-searc,h,。,.user-search,padding:10px;,border:1px solid#ddd;,border-top:none;,添加,用户,页的实现,步骤,1,：根据添加用户的效果，采用,js,插件,模态框,动态模态框。登录到,bootstrap,官方网站,https,：,/,，选择,js,插件,模态框,动态模态框，或者直接在浏览器中输入,https,：,/,添加用户,用户名,关闭,提交,内容管理,页,的实现,内容管理页面效果和用户管理页面的效果类似。效果相同的部分这里就不再详细介绍。对于结构相同的代码，复制即可。这里只介绍主要的代码部,分。,步骤,1,：,左侧导航,的实现,，,代码如,下：,内容管理,添加内容,步骤,2,：新建,content_post.html,页面。添加内容页面。具体代码如,下：,标题,文章内容,全局置顶,发布文章,步骤,1,：制作搜索表单。具体代码如,下：,添加,标签,管理,页的实现,步骤,2,：根据添加用户的效果，采用,js,插件,警告框。登录到,bootstrap,官方网站,https,：,/,，选择,js,插件,警告框，或者直接在浏览器中输入,https,：,/0;,.taglist,padding-top:15px;,.taglist.alert,margin:0 15px 15px 0;,延时符,谢,谢,聆,听,！,敬请批评指正,延迟符,