【指导手册】Demo2-4 Bootstrap的应用实例.pdfVIP

ASP.NET动态网站设计与开发沙洲职业工学院

【指导手册】

Demo2-4Bootstrap的应用实例

☞DEMO

Bootstrap的一个表格类实例。（页面名称：DemoBootstrapXYY-1.html）

调用Bootstrap的表格类，实现如图的效果。

使用Bootstrap表格类的的用户注册界面

主要步骤

（1）用记事本（或SubLime、VisualStudioCode等编辑工具）编辑

DemoBootstrapXYY-1.html的HTML文件。参考代码如下：

!DOCTYPEhtml

html

head

metacharset=utf-8

titleBootstrap的应用实例（联合使用所有表格类）/title

metaname=viewportcontent=width=device-width,initial-scale=1

linkrel=stylesheet

href=/twitter-bootstrap/3.3.7/css/bootstrap.min.css

scriptsrc=/jquery/2.1.1/jquery.min.js/script

script

src=/twitter-bootstrap/3.3.7/js/bootstrap.min.js/script

/head

body

1

ASP.NET动态网站设计与开发沙洲职业工学院

divclass=container

h2表格/h2

p联合使用所有表格类:/p

tableclass=tabletable-stripedtable-borderedtable-hovertable-condensed

thead

tr

th#/th

thFirstname/th

/tr

/thead

tbody

tr

td1/td

tdAnna/td

/tr

tr

td2/td

tdDebbie/td

/tr

tr

td3/td

tdJohn/td

/tr

/tbody

/table

/div

/body

/html

（2）浏览页面

在浏览器中打开该页面，验证实际显示的效果。

2

ASP.NET动态网站设计与开发沙洲职业工学院

提示：

更详细的Bootstrap教程，请参考：/bootstrap

（3）浏览页面

在以上CSS代码中做相应补充，实现效果图中第一行和最后一行的效果。

3