首页 > 代码库 > bootstrap 新手学习笔记 代码整理
bootstrap 新手学习笔记 代码整理
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Bootstrap 实例 - 滚动监听（Scrollspy）插件方法</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery-1.11.1.js"></script> <script src="js/bootstrap.min.js"></script></head><body>全局CSS 栅格系统 <div class="container"> <div class="row"> <div class="con-xs-11 col-xs-offset-1"> <!-- 列偏移 --> </div> </div> </div> <div class="container-fluid"> <!-- 宽度100% --> <div class="row"> <div class="con-xs-"> </div> </div> </div> 排版 <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> <small></small> <p></p> <p class="lead"></p> You can use the mark tag to <mark>highlight</mark> text. <del>This line of text is meant to be treated as deleted text.</del> <s>This line of text is meant to be treated as no longer accurate.</s> <ins>This line of text is meant to be treated as an addition to the document.</ins> <u>This line of text will render as underlined</u> <strong>rendered as bold text</strong> <em>rendered as italicized text</em> <abbr title=""></abbr> <address></address> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> 列表 <ul class="list-inline|list-unstyled"><li></li></ul> <ol><li></li></ol> <dl><dt><dd></dd></dt></dl> 代码 <code></code> <pre></pre> 表格 <div class="table-responsive"> <table class="table|table-striped|table-hover|table-bordered|table-condensed"> <thead> <tr><th></th></tr> </thead> <tbody> <tr class="active|success|info|warning|danger"><td></td></tr> </tbody> </table> </div> 表单 <form action="" class="form|form-inline|form-horizontal"> <div class="form-group"> <label for=""></label> <input type="text" name="" id="" class="form-control" placeholder="请输入"> <textarea class="form-control" rows="3"></textarea> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <select multiple class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <p class="form-control-static">email@example.com</p> </div> <div class="checkbox"> <input type="checkbox" value=""> </div> <div class="checkbox disabled"> <input type="checkbox" value="" disabled> </div> <div class="radio disabled"> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> </div> <div class="radio"> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> </div> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 </label> </form> :focus disabled readonly .has-warning .has-error .has-success .help-block 按钮 <button type="button" class="btn btn-default|btn-primary|btn-success|btn-info|btn-warning|btn-danger btn-lg|btn-sm|btn-xs active|disabled"></button> 图片 <img src="" alt="" class="img-rounded|img-circle|img-thumbnail"> 辅助类 <p class="text-muted">...</p> <p class="text-primary">...</p> <p class="text-success">...</p> <p class="text-info">...</p> <p class="text-warning">...</p> <p class="text-danger">...</p> 背景 <p class="bg-primary">...</p> <p class="bg-success">...</p> <p class="bg-info">...</p> <p class="bg-warning">...</p> <p class="bg-danger">...</p> 关闭按钮 <button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> 三角符号 <span class="caret"></span> 浮动 <div class="pull-left">...</div> <div class="pull-right">...</div> 居中 <div class="center-block">...</div> 清除浮动 <div class="clearfix">...</div> 响应式工具 .visible-*-block .visible-*-inline .visible-*-inline-block .hidden-* .visible-print-block组件 图标 <span class="glyphicon glyphicon-*"></span> 下拉菜单 <div class="dropdown"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Dropdown<span class="caret"></span></button> <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="dropdown-header">Dropdown header</li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </div> 按钮组 <div class="btn-group|btn-group-vertical btn-group-justified btn-group-lg|btn-group-sm|btn-group-xs"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> <div class="btn-toolbar" role="toolbar"> <div class="btn-group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> <div class="btn-group">...</div> <div class="btn-group">...</div> </div> 按钮下拉菜单 <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> 分裂式下拉菜单 <div class="btn-group"> <button type="button" class="btn btn-danger">Action</button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> 向上的菜单 <div class="btn-group dropup"> <button type="button" class="btn btn-default">Dropup</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button> <ul class="dropdown-menu" role="menu"> <!-- Dropdown menu links --> </ul> </div> 输入框组 <div class="input-group input-group-lg|input-group-sm|input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="Username"> </div> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-addon">.00</span> </div> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control"> <span class="input-group-addon">.00</span> </div> 复选框 <div class="input-group"> <span class="input-group-addon"> <input type="checkbox"> </span> <input type="text" class="form-control"> </div> 按钮 <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> <input type="text" class="form-control"> </div> 按钮下拉菜单 <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> 导航 <ul class="nav nav-tabs|pills nav-stacked nav-justified" role="tablist"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul> 导航下拉菜单 <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> ... </ul> </li> </ul> 导航条 <nav class="navbar navbar-default|navbar-inverse navbar-fixed-top|navbar-fixed-bottom|navbar-static-top" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> brandimage <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"><img alt="Brand" src="..."></a> </div> </div> </nav> 面包屑导航 <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li class="active">Data</li> </ol> 分页 <ul class="pagination pagination-lg|pagination-sm"> <li class="active"><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li class="disabled"><a href="#">»</a></li> </ul> 翻页 <ul class="pager"> <li><a href="#">上一页</a></li> <li><a href="#">下一页</a></li> </ul> 标签 <span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> <span class="label label-info">Info</span> <span class="label label-warning">Warning</span> <span class="label label-danger">Danger</span> 徽章 <a href="#">Inbox <span class="badge">42</span></a> 巨幕 <div class="jumbotron"> <h1>Hello, world!</h1> <p>...</p> <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p> </div> 页头 <div class="page-header"> <h1>Example page header <small>Subtext for header</small></h1> </div> 警告框 <div class="alert alert-success" role="alert">...</div> <div class="alert alert-info" role="alert">...</div> <div class="alert alert-warning" role="alert">...</div> <div class="alert alert-danger" role="alert">...</div> 可关闭的警告框 <div class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <strong>Warning!</strong> Better check yourself, <a href="" class="alert-link">you‘re not looking too good.</a> </div> 进度条 <div class="progress"> <div class="progress-bar progress-bar-success|progress-bar-info|progress-bar-warning|progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="sr-only">40% Complete (success)</span> </div> </div> 媒体对象 <div class="media"> <a class="pull-left" href="#"><img class="media-object" src="..." alt="..."></a> <div class="media-body"> <h4 class="media-heading">Media heading</h4> <p>dfasdfasdfadsf</p> </div> </div> 列表组 <ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul> 链接 <div class="list-group"> <a href="#" class="list-group-item active|disabled">Cras justo odio</a> <a href="#" class="list-group-item list-group-item-success|list-group-item-info|list-group-item-warning|list-group-item-danger">Dapibus ac facilisis in</a> <a href="#" class="list-group-item">Morbi leo risus</a> <a href="#" class="list-group-item">Porta ac consectetur ac</a> <a href="#" class="list-group-item">Vestibulum at eros</a> </div> 定制内容 <div class="list-group"> <a href="#" class="list-group-item active"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text">...</p> </a> </div> 面板 <div class="panel panel-default|panel-primary|panel-info|panel-warning|panel-danger"> <div class="panel-heading"><h3 class="panel-title">Panel title</h3></div> <div class="panel-body"> Panel content </div> <div class="panel-footer"> Panel footer </div> </div> Well <div class="well well-lg|well-sm">...</div>Javascript插件 模态框 <div class="modal fade"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div> 下拉菜单 滚动监听 标签页 <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li> <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li> <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li> <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane fade in active" id="home">...</div> <div class="tab-pane" id="profile">...</div> <div class="tab-pane" id="messages">...</div> <div class="tab-pane" id="settings">...</div> </div> Tooltip <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button> 弹出框 <a href="#" tabindex="0" class="btn btn-lg btn-danger" data-toggle="popover" data-trigger="focus" data-placement="bottom" title="Dismissible popover" data-content="And here‘s some amazing content. It‘s very engaging. Right?">Dismissible popover</a> 警告框 collapse <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">collapsible Group Item #1</a></h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven‘t heard of them accusamus labore sustainable VHS. </div> </div> </div> </div> 轮播 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div> 附加导航 </body></html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。