jQuery——bootstrap概述

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概述相关推荐

Bootstrap概述
前面的话 Bootstrap是简单.灵活的用于搭建WEB页面的HTML.CSS.Javascript的工具集.Bootstrap基于HTML5和CSS3,具有漂亮的设计.友好的学习曲线.卓越的兼容性, ...
BootStrap概述（一）
文章目录 BootStrap概述(一) 1.什么是BootStrap 2.BootStrap的好处是什么 3.搭建BootStrap的开发环境 4.BootStrap布局容器 5.栅格系统 5.1.B ...
1. bootstrap概述
目录概述一.为什么使用bootstrap? 二.Bootstrap特点三.文件结构四.bootstrap的使用 1.第一个网页模板 2.bootstrap整体架构概述 Bootstrap 是 ...
禁用/启用按钮和链接的最简单方法是什么（jQuery + Bootstrap）
本文翻译自:What is the easiest way to disable/enable buttons and links (jQuery + Bootstrap) Sometimes I u ...
jQuery - Bootstrap 3 and Youtube in Modal
1. 效果一 HTML <a href="#" class="btn btn-default" data-toggle="modal" ...
jquery+bootstrap 创建日历表格
jquery创建日历表格 jquery+bootstrap 创建日历表格 #写的不太好欢迎留言赐教 <meta charset="utf-8"><meta na ...
jQuery+Bootstrap美化弹出框
项目中很多弹出的警告框是通过alert()弹出的浏览器警告框,样式比较丑陋且和页面使用的Bootstrap框架样式不吻合,因此需要修改弹出框样式. 采用jQuery+Bootstrap的方式这样弹出的 ...
ie8浏览器的兼容性问题及解决（jquery,bootstrap）
ie8浏览器的兼容性问题及解决(jquery,bootstrap) 参考文章: (1)ie8浏览器的兼容性问题及解决(jquery,bootstrap) (2)https://www.cnblogs. ...
jquery+bootstrap分页控件
jquery+bootstrap分页控件源码: (function ($) {$.fn.extend({ftx_pager: function (paraObj) {var total = para ...

jQuery——bootstrap概述

ui框架

下载bootstrap

bootstrap样式

bootstrap组件

jQuery——bootstrap概述相关推荐

最新文章

热门文章