bootstrap 怎样让按钮超链接

一般是将具有超链接的a标签，设置成按钮样式，

<a class='btn btn-primary ' href="">按钮</a>

如果是按钮具有超链接功能，那只能，是添加事件，让页面跳转了

顺序不正确,执行javascript时resetBtn还未加载 重置 $("#resetBtn").button("loading")setTimeout(function () {$("#resetBtn").button("reset") }, 5000)

其实自己写demo更多的时候都是手写css的，因为可以自己定制，自由控制且可以随便折腾，但有时候很多流水工厂式的样式写起来就太无趣了，所以还是用Bootstrap吧……

首先新建一个Html页面，把Bootstrap的样式与脚本引用塞进去：

这里有个问题，Bootstrap4.0以上是彻底不支持IE8以下的浏览器的，最新版已经把IE9抛弃了；= =

因为Bootstrap是JQuery依赖的，所以需要在脚本中引入JQuery，要注意的是，Bootstrap3.3.6版本以下是不支持JQuery3的，只能用JQuery2.

引入之后，在页面上插入container容器：

在这里是使用container还是container-fluid，主要看页面需求，两者区别在于：container-fluid是一个全宽的容器，使用整个宽度，而container则相当于一个margin：auto；的响应式的静态宽度div盒子；

两者的css设置：

标题与导航栏都可以写在header里：

在这里，导航使用nav标签创建的，Bootstrap里的导航条称为 navbar，navbar默认样式为白色，.navbar-inverse为颜色反白，可以得到黑色的导航条，需要其他颜色可以自己手动设置；

在 .navbar-collapse 中写入导航栏， .nav表明该ul为一导航栏，各li为导航类目；.navbar-nav说明是用于 navbar 中的导航

在li中设置.active,可以在JavaScript中控制鼠标click或者mouseover效果；

例如：

.navbar-collapse 是说在视口的宽度小于 768px 的时候，将导航变成垂直方向。

对比：

如果想要获得移动端的三明治型显示，需要额外进行修改：

这里<a>标签是左侧的链接，button为右侧的三明治导航按钮，span为导航按钮的设计构成（三条白线和边框……）；

然后要完成点击三明治导航菜单的显示/隐藏，这时需要用到<button>里的data-target="#navbar-menu"，这个 #navbar-menu 就是我们为原来的导航所起的 id 标识。

其中showoff 和mainnav分别是给button 和div .navbar-collapse添加的id；

页面主体如果是传统样式，符合栅格化，则使用栅格化样式最快捷；

栅格样式具体可以参阅 Bootstrap文档 ；

以两栏布局为例：

然后设置侧边栏，侧边栏也可以设置为导航nav；

使用nav-tabs和nav-stacked设置导航栏外观；

这样主题搭建就完成了。

ref:

20分钟打造你的Bootstrap站点

Bootstrap 中文文档

---