bootstrap使用说明（bootstrap table怎么重置表单）

本文目录

• bootstrap table怎么重置表单
• 如何用bootstrap制作简历
• bootstrap用来做什么
• bootstrap的表单怎么选日期
• 如何使bootstrap中的下拉菜单有动画效果

bootstrap table怎么重置表单

　　bootstrap table怎么重置表单，解决办法

• 首先, 你要知道一个基础table的标签怎么去写, 只有知道这个基础, 你才能更好的用bootstrap中的table. html在这不过多说明. 既然看这篇文章, 肯定都能够理解. 然后现在就把bootstrap中的table来详细说明一下. 基础的table如下:

• 下面了解一下bootstrap中table, 没有什么大道理可以讲解. 唯有一点, 通过表格的方式展示页面. 首先有必要样式.table. 和一些选用样式. 举例说明必要样式. 首先要搭建一个基础框架, 请看系列经验第一篇. 

• 在搭建的基础框架里面的body部分填写table信息. 然后在table的标签上加上基础样式.table的css样式. 你立刻发现, 界面瞬间好看多了. 

• 说明一下除了必要的.table之外, 还有很多可选的class.  不同的可选class. 是可以联合使用的. 

• 我们常用的就有边框的table. 只需要使用.table-bordered 查看效果图. 

• 斑马线, 也就是隔行相同颜色的一个样式. 使用.table-striped样式.

• 注意点有2个: 

• (1)斑马线是对tbody中的行起作用

• (2)斑马线的实现方式是通过:nth-child CSS选择器实现的, 但是呢, 他不被ie8支持, 你懂我说的. 

• 鼠标悬停在行上, 改变行的背景颜色. 使用.table-hover样式.

• 注意: 这个需要多行的时候, 这种效果更加明显. 

• 让表格更加紧凑的样式.table-condensed, 它是让表格单元格中的内部（padding）减半.展现更多的内容, 和更多的显示内容.

• 其他的提醒说明: 在bootstrap中有这样的几个样式, 可以说是提醒样式. 每个样式都是一种提醒方式. 这些方式也可以放到table中. 只需要使用class即可.

• 上面状态的样式, 可以使用到不同的内容中, 比方说, tr中, td中, 都是可以的. 下面的举例说明. 

• 注意点: 在使用这个样式的时候不能使用.table-striped的样式, 会出现不能正常显示的问题.

• 还有就是现在比较流行的响应式的table. 只需要在table包含在.table-responsive中即可, 作用为: 当屏幕小于768的时候, 才会出现滚动条, 否则滚动条消失.

• 动手去尝试, 你发现学习bootstrap也就是这么简单.祝你更快的学会这个框架.

如何用bootstrap制作简历

注意：Bootstrap相关文件的路径，Bootstrap依赖jQuery，需要先加载jQuery
index.html：
《!DOCTYPE html》
《html》

《head》
《meta charset="UTF-8"》
《meta name="viewport" content="width=device-width, initial-scale=1.0"》
***隐藏网址***
《script src="../bs/js/bootstrap.min.js"》《/script》
《link href="../bs/css/bootstrap.css" rel="stylesheet"》
《link href="../bs/css/mystyle.css" rel="stylesheet"》
《title》个人简历《/title》
《/head》

《body》
《nav class="navbar navbar-default"》
《div》
《button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#leadBar"
aria-expanded="false" aria-controls="navbar"》
《span》《/span》
《span》《/span》
《span》《/span》
《/button》
《div class="collapse navbar-collapse" id="leadBar"》
《ul class="navbar nav navbar-nav"》
《li》《a href="site.html" class="glyphicon glyphicon-home"》《/a》《/li》
《li》《a href="#info"》基本信息《/a》《/li》
《li》《a href=""》职业技能《/a》《/li》
《li》《a href=""》项目展示《/a》《/li》
《li》《a href=""》请联系我《/a》《/li》
《/ul》
《/div》

《/div》
《/nav》
《div》
《h1》个人简历《/h1》
《/div》
《div class="divContent container"》
《div》
《h3》基本信息《/h3》
《div》
《blockquote》
《h3》某某《/h3》
《footer》XX工程师《/footer》
《/blockquote》
《div class="row text-center"》
《img src="./img/zmz.jpg" alt="boy" width="150px" class="img-responsive img-circle
img-thumbnail"》
《/div》
《div class="row text-center"》
《h3》个人介绍《/h3》
《/div》
《div》
《span》滴滴答答滴滴答答滴滴答答滴滴答
答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答《/span》
《/div》
《div》
《table class="table table-bordered table-striped table-hover table-condensed"》
《tr》
《td》姓名《/td》
《td》YYY《/td》
《td》年龄《/td》
《td》18《/td》
《/tr》
《tr》
《td》学校《/td》
《td》XX大学《/td》
《td》学历《/td》
《td》本科《/td》
《/tr》
《tr》
《td》专业《/td》
《td》软件工程《/td》
《td》学制《/td》
《td》全日制《/td》
《/tr》
《/table》
《/div》
《/div》
《div》
《!-- 大屏幕 --》
《div》
《h3》个人荣誉《/h3》
《hr》
《p2》获得******************************************《/p2》
《h3》我的空间《/h3》
《hr》
《div》
《div》
《a href=""》《button》个人博客《/button》《/a》
《/div》
《div》
《a href=""》《button》个人博客园《/button》《/a》
《/div》
《div》
《a href=""》《button》我的github《/button》《/a》
《/div》
《/div》
《h3》个人技能《/h3》
《hr》
《p》1.***************《/p》
《p》2.***************《/p》
《p》3.***************《/p》
《p》4.***************《/p》
《p》5.***************《/p》
《/div》
《/div》
《/div》
《div》
《h3 id="skill"》职业技能《/h3》

《p》
《span class="label label-success"》JavaScript《/span》
《span class="label label-success"》Vue.js《/span》
《!-- 《span class="label label-success"》ssh《/span》 --》
《/p》
《div》
《div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 80%;"》
《span》熟悉《/span》
《/div》
《/div》

《p》
《span class="label label-success"》Node.js《/span》
《span class="label label-success"》PHP《/span》
《!-- 《span class="label label-success"》ssh《/span》 --》
《/p》
《div》
《div class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 75%;"》
《span》熟悉《/span》
《/div》
《/div》
《p》
《span class="label label-info"》html/css《/span》
《/p》
《div》
《div class="progress-bar progress-bar-info progress-bar-striped active" style="width: 70%;"》
《span》熟悉《/span》
《/div》
《/div》

《p》
《span class="label label-warning"》数据结构/算法《/span》
《/p》
《div》
《div class="progress-bar progress-bar-warning progress-bar-striped active" style="width: 79%;"》
《span》熟悉《/span》
《/div》
《/div》
《/div》
《div》
《h3》项目展示《/h3》
《div》
《div id="" class="myCarousel carousel slide"》
《ol》
《li data-target=".myCarousel" data-slide-to="0"》《/li》
《li data-target=".myCarousel" data-slide-to="1"》《/li》
《li data-target=".myCarousel" data-slide-to="2"》《/li》
《li data-target=".myCarousel" data-slide-to="3"》《/li》
《/ol》
《div》
《div class="item active"》
《img src="./img/img1.jpg" style="height: 406px;width: 650px" alt="第一张"》
《div》项目 1《/div》
《/div》
《div》
《img src="./img/img2.jpg" style="height: 406px;width: 650px" alt="第二张"》
《div》项目 2《/div》
《/div》
《div》
《img src="./img/img3.jpg" style="height: 406px;width: 650px" alt="第三张"》
《div》项目 3《/div》
《/div》
《div》
《img src="./img/img4.jpg" style="height: 406px;width: 650px" alt="第四张"》
《div》项目 4《/div》
《/div》
《!--左右翻页--》
《a href=".myCarousel" data-slide="prev" class="carousel-control left"》
《span class="glyphicon glyphicon-chevron-left"/》
《/a》
《a href=".myCarousel" data-slide="next" class="carousel-control right"》
《span class="glyphicon glyphicon-chevron-right"/》
《/a》
《/div》
《/div》
《/div》
《div》
《div id="" class="myCarousel carousel slide"》
《ol》
《li data-target=".myCarousel" data-slide-to="0"》《/li》
《li data-target=".myCarousel" data-slide-to="1"》《/li》
《li data-target=".myCarousel" data-slide-to="2"》《/li》
《li data-target=".myCarousel" data-slide-to="3"》《/li》
《/ol》
《div》
《div class="item active"》
《p》项目说明《/p》
《p》项目说明《/p》
《p》项目说明《/p》
《p》项目说明《/p》
《p》项目说明《/p》
《div》项目 1《/div》
《/div》
《div》
《p》项目说明《/p》
《p》项目说明《/p》
《p》项目说明《/p》
《p》项目说明《/p》
《div》项目 2《/div》
《/div》
《div》
《p》项目说明《/p》
《div》项目 3《/div》
《/div》
《div》
《p》项目说明《/p》
《div》项目 4《/div》
《/div》
《!--左右翻页--》
《a href=".myCarousel" data-slide="prev" class="carousel-control left"》
《span class="glyphicon glyphicon-chevron-left"/》
《/a》
《a href=".myCarousel" data-slide="next" class="carousel-control right"》
《span class="glyphicon glyphicon-chevron-right"/》
《/a》
《/div》
《/div》
《/div》
《/div》
《div》
《h3》请联系我《/h3》
《div class="panel panel-default"》
《div》如果你感兴趣《/div》
《div》
《form action="" method="post"》
《label for="email"》Email《/label》
《input type="email" id="email" /》
《br/》
《div class="btn-group pull-right"》
《button type="submit" class="btn btn-success"》请联系我《/button》
《button type="reset" class="btn btn-danger"》重置《/button》
《/div》
《div》《/div》
《/form》

《/div》
《/div》
《/div》
《/div》


《/body》

《/html》

bootstrap用来做什么

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。
是一个做网页的框架（目前最流行的WEB前端框架），就是说你只需要写HTML标签调用它的类你就可以很快速的做一个高大上的网页，你不用担心兼容问题，提供了很多样式供你选择！
比如你需要做一个网站的导航对吧，你自己写的话你需要写很多代码，但是如果你使用bootstrap框架来写的话，只需要写好HTML标签然后调用类名就可以了！
bootstrap用来做什么
作用：
用它提供的样式和组件可以快速写网站
你只需要引用一些定义好的类，也就是class名字，就可以创建出已经有非常漂亮的样式的网页，而且支持自适应，是一个很不错的框架。
简单点说：
是一个快速搭建网站前台页面的开源项目（基于Jquery）。你只需要了解相关的class、标签名称等所代表的意思，然后在构建页面的时候，导入bootstrap的JS、css等，它就会去表现相应的效果出来：
比如HTML说明：缩略语；当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap实现了对HTML 元素的增强样式。 缩略语元素带有title属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。
当你需要段落文字某个单词或者词语需要有上面的那种效果，你就那样按照那种格式写就好了，附加的class=“initialism”是让字号更小一点，也可以不要。反过来说：如果你不试用bootstrap的东西或者其他类似的框架，那你就得自己写这样的效果，开发时间长。再比如Jquery的easyui，也是差不多道理。
关于bootstrap文件包简单介绍
文件名称：
bootstrap.css
bootstrap.min.css
bootstrap-responsive.css
bootstrap-responsive.min.css
bootstrap.js
bootstrap.min.js解释：
bootstrap.css 是完整的bootstrap样式表，未经压缩过的，可供开发的时候进行调试用
bootstrap.min.css 是经过压缩后的bootstrap样式表，内容和bootstrap.css完全一样，但是把中间不必要的空格之类的东西都删掉了，所以文件大小会比bootstrap.css小，可以在部署网站的时候引用，如果引用了这个文件，就没必要引用bootstrap.css了
bootstrap-responsive.css 这个是在对bootstrap框架应用了响应式布局之后所需要的CSS样式表，如果你的网站项目不准备做响应式设计，就不需要引用这个CSS。
bootstrap-responsive.min.css 和bootstrap.min.css的作用是一样的，是bootstrap-responsive.css的压缩版
bootstrap.js 这个是bootstrap的灵魂所在，是bootstrap的所有js指令的集合，你看到bootstrap里面所有的js效果，都是由这个文件控制的，这个文件也是一个未经压缩的版本，供开发的时候进行调试用
bootstrap.min.js 是bootstrap.js的压缩版，内容和bootstrap.js一样的，但是文件大小会小很多，在部署网站的时候就可以不引用bootstrap.js，而换成引用这个文件了~~

bootstrap的表单怎么选日期

在大多数项目中 用户界面的时间选择是必不可少的，在项目的用户体验友好度这个大前提下，不让用户自己输入时间就显得格外的重要。而且用户输入时间还会存在格式不固定的问题，加大后台的开发量。 在这个时候就需要用到时间输入插件了，格式由我们自己设置，还减少了用户的输入环节提高了用户体验友好度。
使用
bootStrap的时间插件datetimepicker支持界面多元化有专门的的一个网址来说明这个时间选择器。
Demo
利用插件所带的方法和时间。可以做一个简单的demo
demo功能点：
1.输入日期格式为yyyy-MM-dd hh:ii:ss(格式可以自定义)。
2.前一个日期的时间输入以后，后面一个日期的输入值不能小于前一个日期 。
3.后一个日期的时间输入以后，前面一个日期的输入值不能大于前一个日期。

如何使bootstrap中的下拉菜单有动画效果

拉菜单是我们会在网站建设项目中经常用到的一种组件，当然，在Bootstrap中也提供了Bootstrap下拉菜单组件，让我们来看看相关的信息吧。
如何使用Bootstrap下拉菜单组件
Bootstrap下拉菜单组件使用起来非常容易，首先你需要定义一个class="dropdown"的div，然后在这个div标签中写入触发下拉框的按钮以及对应的下拉菜单，类似代码如下：《div
class="dropdown"》《button
class="btn
dropdown-toggle"
data-toggle="dropdown"》
下拉按钮《/button》《ul
class="dropdown-menu"
》《li》《a
role="menuitem"
tabindex="-1"
href="#"》下拉菜单1《/a》《/li》《li》《a
role="menuitem"
tabindex="-1"
href="#"》下拉菜单2《/a》《/li》《li》《a
role="menuitem"
tabindex="-1"
href="#"》下拉菜单3《/a》《/li》《/ul》《/div》
Bootstrap下拉菜单样式
下拉菜单默认是左对齐的，如果你想要让文字右对齐，也非常容易，在ul中加入text-right样式即可：《ul
class="dropdown-menu
text-right"》
...
《/ul》
Bootstrap下拉菜单头样式
如果你想要把下拉菜单分类，每个分类都需要有一个菜单头进行解释说明，那么直接引用菜单头样式即可：《ul
class="dropdown-menu"》《li
role="presentation"
class="dropdown-header"》下拉菜单头《/li》...《li
role="presentation"
class="divider"》《/li》《li
role="presentation"
class="dropdown-header"》下拉菜单头《/li》...《/ul》
Bootstrap下拉菜单禁用样式
如果你想要把某条下拉菜单禁用掉，直接调用disabled样式即可：《ul
class="dropdown-menu"
role="menu"
aria-labelledby="dropdownMenu3"》《li
role="presentation"》《a
role="menuitem"
tabindex="-1"
href="#"》下拉菜单1《/a》《/li》《li
role="presentation"
class="disabled"》《a
role="menuitem"
tabindex="-1"
href="#"》禁用菜单样式《/a》《/li》《li
role="presentation"》《a
role="menuitem"
tabindex="-1"
href="#"》下拉菜单2《/a》《/li》《/ul》
Bootstrap下拉菜单与JS结合
以上的样式还处于静态化，并未引入JS交互，当你想要点击按钮以控制下拉菜单的显示与否，应该怎么做？
首先你需要在页面头部引入Bootstrap的JS文件，之后你便可以通过上面的代码实现JS控制下拉菜单的显示与隐藏。
需要说明的是，由于JS中是采用data-toggle作为选择器的，所以一定要在按钮中加入属性data-toggle="dropdown"。
写在文章最后
Bootstrap下拉菜单组件的引入使得制作菜单不需要再那么大费脑力去实现下拉效果了，可以说是非常实用高效，赶紧来试试吧。