ui框架

1、美化頁面效果

2、簡化布局

3、使用現成的組件和插件

下載bootstrap

bootstrap地址：https://www.bootcss.com/

1、在官網下載bootstrap文件

2、在html文件中引入bootstrap

bootstrap樣式

1、按鈕

<a class="btn btn-default" href="#" role="button">Link</a><input class="btn btn-primary" type="text" value="input按鈕"><button class="btn btn-danger">button按鈕</button>

2、表單

<form><div class="form-group"><label for="exampleInputEmail1">郵箱地址</label><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div><div class="form-group"><label for="exampleInputPassword1">密碼</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"></div><div class="form-group"><label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile"><p class="help-block">Example block-level help text here.</p></div><div class="checkbox"><label><input type="checkbox"> Check me out</label></div><button type="submit" class="btn btn-default">Submit</button></form>

3、表格

<div class="table"><table class="table table-striped table-bordered"><thead><th>序號</th><th>姓名</th><th>年齡</th></thead><tbody><tr><td>1</td><td>小明</td><td>12</td></tr><tr><td>1</td><td>小明</td><td>12</td></tr><tr><td>1</td><td>小明</td><td>12</td></tr></tbody></table></div>

bootstrap組件

1、圖標

<!-- 圖標 --><!-- 圖標可以通過字體大小的方式去設置 --><!-- 切換后面的 search 就可以變成其他圖標--><!-- <span class="search glyphicon glyphicon-search" aria-hidden="true"></span> --><!-- <span class="search glyphicon glyphicon-erase" aria-hidden="true"></span> --><!-- 圖標應用到按鈕 --><button type="button" class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span></button><!-- btn-lg 可以讓按鈕變的大一些 --><button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>

2、菜單

<nav class="navbar navbar-default"><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" aria-expanded="false"><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 <span class="sr-only">(current)</span></a></li><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul><form class="navbar-form navbar-left"><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" role="button" aria-haspopup="true"aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav>

3、分頁

<!-- 分頁 --><nav aria-label="Page navigation"><ul class="pagination"><li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></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><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li></ul></nav>

總結

以上是生活随笔為你收集整理的jQuery——bootstrap概述的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。