<!DOCTYPE html><htmllang="zh-CN"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap 全局样式</title><!-- Bootstrap --><linkhref="css/bootstrap.min.css"rel="stylesheet"><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --><scriptsrc="js/jquery-3.2.1.min.js"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><scriptsrc="js/bootstrap.min.js"></script><style>.inner{border: 1px solid red;}</style></head><body><aclass="btn btn-default"href="#"role="button">Link</a><buttonclass="btn btn-default"type="submit">Button</button><inputclass="btn btn-default"type="button"value="Input"><inputclass="btn btn-default"type="submit"value="Submit"><br><!-- Standard button --><buttontype="button"class="btn btn-default">（默认样式）Default</button><!-- Provides extra visual weight and identifies the primary action in a set of buttons --><buttontype="button"class="btn btn-primary">（首选项）Primary</button><!-- Indicates a successful or positive action --><buttontype="button"class="btn btn-success">（成功）Success</button><!-- Contextual button for informational alert messages --><buttontype="button"class="btn btn-info">（一般信息）Info</button><!-- Indicates caution should be taken with this action --><buttontype="button"class="btn btn-warning">（警告）Warning</button><!-- Indicates a dangerous or potentially negative action --><buttontype="button"class="btn btn-danger">（危险）Danger</button><!-- Deemphasize a button by making it look like a link while maintaining button behavior --><buttontype="button"class="btn btn-link">（链接）Link</button><hr><imgsrc="../Day06JavaScriptAdvance/img/banner_1.jpg"alt="兵马俑"class="img-responsive img-circle"><imgsrc="../Day06JavaScriptAdvance/img/banner_1.jpg"alt="兵马俑"class="img-responsive img-rounded"><imgsrc="../Day06JavaScriptAdvance/img/banner_1.jpg"alt="兵马俑"class="img-responsive img-thumbnail"><hr><tableclass="table table-bordered table-responsive"><tr><th>编号</th><th>姓名</th><th>年龄</th></tr><tr><td>1</td><td>Jim</td><td>18</td></tr><tr><td>1</td><td>Jim</td><td>18</td></tr></table><hr><form><divclass="form-group"><labelfor="exampleInputEmail1">Email address</label><inputtype="email"class="form-control"id="exampleInputEmail1"placeholder="Email"></div><divclass="form-group"><labelfor="exampleInputPassword1">Password</label><inputtype="password"class="form-control"id="exampleInputPassword1"placeholder="Password"></div><divclass="form-group"><labelfor="exampleInputFile">File input</label><inputtype="file"id="exampleInputFile"><pclass="help-block">Example block-level help text here.</p></div><divclass="checkbox"><label><inputtype="checkbox"> Check me out
</label></div><buttontype="submit"class="btn btn-default">Submit</button></form></body></html>
4、 Bootstrap 导航条
<!DOCTYPE html><htmllang="zh-CN"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap 导航条</title><!-- Bootstrap --><linkhref="css/bootstrap.min.css"rel="stylesheet"><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --><scriptsrc="js/jquery-3.2.1.min.js"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><scriptsrc="js/bootstrap.min.js"></script></head><body><navclass="navbar navbar-inverse"><divclass="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><divclass="navbar-header"><buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1"aria-expanded="false"><spanclass="sr-only">Toggle navigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="#">Brand</a></div><!-- Collect the nav links, forms, and other content for toggling --><divclass="collapse navbar-collapse"id="bs-example-navbar-collapse-1"><ulclass="nav navbar-nav"><liclass="active"><ahref="#">Link <spanclass="sr-only">(current)</span></a></li><li><ahref="#">Link</a></li><liclass="dropdown"><ahref="#"class="dropdown-toggle"data-toggle="dropdown"role="button"aria-haspopup="true"aria-expanded="false">Dropdown <spanclass="caret"></span></a><ulclass="dropdown-menu"><li><ahref="#">Action</a></li><li><ahref="#">Another action</a></li><li><ahref="#">Something else here</a></li><lirole="separator"class="divider"></li><li><ahref="#">Separated link</a></li><lirole="separator"class="divider"></li><li><ahref="#">One more separated link</a></li></ul></li></ul><formclass="navbar-form navbar-left"role="search"><divclass="form-group"><inputtype="text"class="form-control"placeholder="Search"></div><buttontype="submit"class="btn btn-default">Submit</button></form><ulclass="nav navbar-nav navbar-right"><li><ahref="#">Link</a></li><liclass="dropdown"><ahref="#"class="dropdown-toggle"data-toggle="dropdown"role="button"aria-haspopup="true"aria-expanded="false">Dropdown <spanclass="caret"></span></a><ulclass="dropdown-menu"><li><ahref="#">Action</a></li><li><ahref="#">Another action</a></li><li><ahref="#">Something else here</a></li><lirole="separator"class="divider"></li><li><ahref="#">Separated link</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav></body></html>
699
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
