引导实现表格样式、表单布局的实例代码

1.表格的一些样式

举例：

！DOCTYPE html html health eta http-equiv=' Content-TYPe ' Content=' text/html；charset=utf-8 '/title my Test bootstrap/title link rel='样式表href=' ./CSS/bootstrap。量滴CSS ' script type=' text/JavaScript ' src=' http :/js/bootstrap量滴js '/script/head body table class=' table table-striped '标题这是一个测试表格/标题和tr th姓名/th年龄/th地区/th /tr /thead tbody tr td小胡子TD/td26/TD陕西TD/tr/tr大胡子TD/td26/TD北京/td /tr /tbody/table/body/html

页面效果：

2.表格行或单元格的样式

举例：

！DOCTYPE html html health eta http-equiv=' Content-TYPe ' Content=' text/html；charset=utf-8 '/title my Test bootstrap/title link rel='样式表href=' ./CSS/bootstrap。量滴CSS ' script type=' text/JavaScript ' src=' http :/js/bootstrap量滴js '/script/head body table class=' table table-striped '标题这是一个测试表格/标题和tr th姓名/th年龄/th地区/th/tr/ad t正文tr class=' info ' TD小胡子TD/td26/TD陕西/TD/tr/tr class='警告' TD大胡子TD/td26/TD北京/td /tr /tbody/table/body/html

页面效果：

3.表单布局

(1)垂直表单：

！DOCTYPE html html health eta http-equiv=' Content-TYPe ' Content=' text/html；charset=utf-8 '/title my Test bootstrap/title link rel='样式表href=' ./CSS/bootstrap。量滴CSS ' script type=' text/JavaScript ' src=' http :/js/bootstrap量滴js/姓名/标签输入类型=' text ' class=' form-control ' id=' name '占位符='请输入姓名/div class=' form-group '标签为='inputfile '选择文件/标签输入类型='file' id='inputfile' /div按钮类型='submit' class='btn btn-default '提交/按钮/表单/正文/html

效果：

(2)内联表单：它的所有元素是内联的，向左对齐的，标签是并排的

！DOCTYPE html html health eta http-equiv=' Content-TYPe ' Content=' text/html；charset=utf-8 '/title my Test bootstrap/title link rel='样式表href=' ./CSS/bootstrap。量滴CSS ' script type=' text/JavaScript ' src=' http :/js/bootstrap量滴js/姓名/标签输入类型=' text ' class=' form-control ' id=' name '占位符='请输入姓名/div class=' form-group '标签为='inputfile '选择文件/标签输入类型='file' id='inputfile' /div按钮类型='submit' class='btn btn-default '提交/按钮/表单/正文/html

效果：

(3)水平表单：水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同

！DOCTYPE html html health eta http-equiv=' Content-TYPe ' Content=' text/html；charset=utf-8 '/title my Test bootstrap/title link rel='样式表href=' ./CSS/bootstrap。量滴CSS ' script type=' text/JavaScript ' src=' http :/js/bootstrap量滴js '/script/head dyform角色=' form ' class=' form-horizontal ' div class=' form-group '标签为=' name ' class=' col-sm-2 control-label '姓名/label div class='col-sm-10 '输入类型=' text ' class=' form-control ' id=' name '占位符='请输入姓名/div/div class=' form-group '标签为='输入文件' class=' col-sm-2 control-label '选择文件/label div class='col-sm-10 '输入类型=' file ' id=' input file ' div/div class=' form-group ' div class=' col-sm-12 '按钮类型='submit' class='btn btn-default '提交/button /div /div/form/body/html

效果：

总结

以上所述是小编给大家介绍的引导程序实现表格样式、表单布局的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！