标签归档：bootstrap

百度，新浪等站点提供了CDN JavaScript公用库，包含了前端开发常用的JavaScript库文件与CSS样式表，开发者可以很方便地从这些CDN引用所需的样式文件，还可以保证不错的响应速度。

bootcss中文站、百度的bootstrap库引用方式如下所示：

<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="https://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />

然而，在使用百度和新浪CDN的bootstrap 3.0.3时，笔者发现在IE下部分glyphicons图标无法正常显示，而在chrome浏览器下可以显示。

例如https://bookshadow.com/weblog/2014/05/13/bootstrap-carousel-js/中的轮播组件，在chrome下可以看到carousel左右两侧的三角形glyphicons图标，如下图所示：

而在IE浏览器下却无法显示，效果见下图。

查阅stackoverflow上的相关问答，发现此贴中也提到了相同的问题：http://stackoverflow.com/questions/19026479/only-some-glyphicons-showing-in-ie

用户olahell的回答比较妥当：

I have found the solution. It was quite simple. Unfortunately I won't be able ...

Bootstrap Carousel是一款实用的轮播组件，示例如下：

1.  
2.  
3.  

恐龙星球

远古外星人

谣言粉碎机

代码如下：

<div id="carousel-example" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
 <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
 <li data-target="#carousel-example" data-slide-to="1"></li>
 <li data-target="#carousel-example" data-slide-to="2"></li>
 </ol><!-- Wrapper for slides -->
 <div class="carousel-inner">
 <div class="item active"> ...

Bootstrap的JS插件中包含了标签页组件，使用步骤如下：

1. 在页面中添加bootstrap的样式与js引用，例如可以从百度CDN获取：

<script src="https://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="https://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />

2. 添加标签头部，class样式为nav nav-tabs，标签标题设置属性data-toggle=tab。例如：

<ul id="myTab" class="nav nav-tabs">
 <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
 <li><a href="#profile" data-toggle="tab">Profile</a></li>
 <li class="dropdown"><a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
   <li><a href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a></li>
   <li><a ...

Bootstrap的模态框(Modal)是一个非常实用的Javascript组件。

从3.0版本开始，Modal对话框的调用元素可以通过show/shown事件中新加入的relatedTarget属性获取

“If caused by a click, the clicked element is available as the relatedTarget property of the event.”

用法如下：

$('#myModal').on('show.bs.modal', function (e) {
  var invoker = $(e.relatedTarget);
});

请看下面这个例子：

模态框在显示之前会先执行alert，显示调用元素的html

Launch modal ...

Bootstrap是Twitter推出的一个开源的前端开发工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，由动态CSS语言Less写成，在业界享有很高的知名度。

Django Zinnia博客提供了一套基于Bootstrap 3的模板主题zinnia-theme-bootstrap，可以很方便地集成Bootstrap的主题风格。

zinnia-theme-bootstrap主题安装的前置依赖条件见下表：

1. 下载上述源码包，分别将zinnia_bootstrap目录，six.py以及app_namespace目录拷贝至django web工程根目录下

2. 修改settings.py，在TEMPLATE_LOADERS列表中添加'app_namespace.Loader'

3. 修改settings.py，在INSTALLED_APPS列表中添加'zinnia_bootstrap'

注：此项一定要添加在'zinnia'之前才能正确加载模板文件