关于提升机器学习算法做预测回归任务精度的方法分享
2026/7/23 13:24:23
[历史归档]本文原发布于 cstriker1407.info 个人博客，内容为历史存档，仅供参考。
发布时间：2019-05-20｜ 标题：bootstrap简单使用实例｜分类：编程 / web / Bootstrap ｜标签：html·css·bootstrap
bootstrap简单使用实例
- 官方简单实例
- 导航条
- 固定在顶部
- 栅格系统
- 对button进行布局
- 面板
- 表单
bootstrap提供了很多组件和全局CSS样式表，我们可以找到喜欢的样式，直接复制粘贴，来快速达到我们希望的效果。
官方简单实例
【 https://v3.bootcss.com/getting-started/#examples 】
这里简单的笔记下几个实例：
导航条
格式参考：【 https://v3.bootcss.com/components/#navbar 】
官方简单实例：【 https://v3.bootcss.com/examples/navbar/ 】
固定在顶部
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><title>Bootstrap 101 Template</title><linkhref="bootstrap-3.3.7-dist/css/bootstrap.min.css"rel="stylesheet"><linkhref="custom_css/ie10-viewport-bug-workaround.css"rel="stylesheet"><linkhref="custom_css/navbar-fixed-top.css"rel="stylesheet"></head><body><navclass="navbar navbar-default navbar-fixed-top"><divclass="container"><ulclass="nav navbar-nav"><liclass="active"><ahref="/menu1">menu1</a></li><li><ahref="/menu2">menu2</a></li><li></ul></div></nav><scriptsrc="jquery/1.12.4/jquery.min.js"></script><scriptsrc="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script></body></html>custom_css文件夹内容：
ie10-viewport-bug-workaround.css
/*! * IE10 viewport hack for Surface/desktop Windows 8 bug * Copyright 2014-2015 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) *//* * See the Getting Started docs for more information: * http://getbootstrap.com/getting-started/#support-ie10-width */@-ms-viewport{width:device-width;}@-o-viewport{width:device-width;}@viewport{width:device-width;}navbar-fixed-top.css
body{min-height:2000px;padding-top:70px;}栅格系统
格式参考：【 https://v3.bootcss.com/css/#grid 】
官方简单实例：【 https://v3.bootcss.com/examples/grid/ 】
从作者个人实践来看，bootstrap的栅格系统非常好用，可以快速设置比较漂亮的布局。
栅格系统最多为12列，从官方文档来看，栅格系统可以实现非常复杂的布局，这里作者只是简单笔记几个实例：
对button进行布局
<divclass="container"><inputclass="btn btn-default btn-lg btn-block"type="submit"value="btn1"></form><p></p><divclass="row"><divclass="col-md-6"><inputclass="btn btn-primary btn-block"type="submit"value="btn2"></div><divclass="col-md-6"><inputclass="btn btn-success btn-block"type="submit"value="btn3"></div></div><divclass="row"><divclass="col-md-4"><inputclass="btn btn-danger btn-lg btn-block"type="submit"value="btn4"></div><divclass="col-md-4"><inputclass="btn"type="submit"value="btn5"></div><divclass="col-md-4"><inputclass="btn btn-info btn-small btn-block"type="submit"value="btn6"></div></div></div>显示如下：
面板
格式参考：【 https://v3.bootcss.com/components/#panels 】
官方简单实例：【 https://v3.bootcss.com/examples/grid/ 】
我们可以使用面板来对功能区进行划分，这样对于满屏幕按钮和输入来讲可能会友好一点。
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><title>Bootstrap 101 Template</title><linkhref="bootstrap-3.3.7-dist/css/bootstrap.min.css"rel="stylesheet"><linkhref="custom_css/ie10-viewport-bug-workaround.css"rel="stylesheet"><linkhref="custom_css/navbar-fixed-top.css"rel="stylesheet"><style>.content_auto_return{white-space:pre-wrap;}</style></head><body><divclass="container"><divclass="panel panel-default"><divclass="panel-heading">panel1</div><divclass="panel-body"><divclass="content_auto_return">1 hello world 2 hello world</div></div></div><p></p><divclass="panel panel-primary"><divclass="panel-heading">panel2</div><ulclass="list-group"><liclass="list-group-item">hello world</li><liclass="list-group-item">hello world</li></ul></div><p></p><divclass="row"><divclass="col-md-6"><divclass="panel panel-success"><divclass="panel-heading">panel3:<spanclass="label label-success">Success</span></div><divclass="panel-body">hello world</div></div></div><divclass="col-md-6"><divclass="panel panel-info"><divclass="panel-heading">panel4:<spanclass="label label-danger">Failure</span></div><divclass="panel-body">hello world</div></div></div></div><p></p><divclass="panel panel-warning"><divclass="panel-heading">panel5</div><tableclass="table table-bordered"><tbody><tr><th>title1</th><th>title2</th></tr><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></tbody></table></div></div><scriptsrc="jquery/1.12.4/jquery.min.js"></script><scriptsrc="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script></body></html>显示如下：
表单
格式参考：【 https://v3.bootcss.com/css/#forms 】
我们可以使用各种class属性，来做出比较友好的表单交互。
<formclass="form-inline"method="post"action="/post_text"><divclass="form-group"><inputtype="text"name="text1"class="form-control"placeholder="this is text1 hint"><inputtype="text"name="text2"class="form-control"placeholder="this is text2 hint"></div><buttontype="submit"class="btn btn-default">modify</button></form><p></p><formmethod="post"action="/post_radio"><labelclass="radio-inline"><inputtype="radio"name="xx_switch"value="enable">enable</label><labelclass="radio-inline"><inputtype="radio"name="xx_switch"value="disable">disable</label><buttontype="submit"class="btn btn-default">change</button></form>显示如下：