第二篇Bootstrap起步_javascript技巧

在上篇文章给大家介绍了Bootstrap的基础知识,接下来通过本文给大家介绍

我们可以在http://getbootstrap.com下载bootstrap的文件

点击左边的download bootstrap可以下载bootstrap的css,javascript和字体库的已编译版本。点击中间的download source可以下载bootstrap的源代码。一般情况下我们使用bootstrap点击左边的已编译版本下载就可以了。

如果下载的是已编译版结构是:

如果下载的是源代码结构是:

Dist文件夹里的内容和已编译版本内容一样.

如果需要使用bootstrap这个前端框架需要设置一些格式和引入一些文件,下面是使用Bootstrap的一个基本模板。

Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作,需要使用 HTML5 文档类型(Doctype)。 因此,在页面的开头包含了以下代码段:

bootstrap模板为使IE6、7、8版本(IE9以下版本)浏览器兼容html5新增的标签,引入下面代码文件即可:

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

同理为使IE6、7、8版本浏览器兼容css3样式,引入下面代码

<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

以下代码告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面

<meta http-equiv="X-UA-Compatible" content="IE=edge">
以下代码可以让浏览器以最合适的大小来显示相应的页面:
<meta name="viewport" content="width=device-width, initial-scale=1">

要使用bootstrap来搭建网页,需要引入bootstrap的css文件,

<link href="~/bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet" />

若要使用bootstrap里的javascript组件还需要引入bootstrap的js插件,因为js插件是基于jquery的所以还要先引入jquery脚本,注意jquery脚本需要放到bootstrap的js插件前面。

<script src="~/bootstrap-3.2.0-dist/js/jquery.min.js"></script>
 <script src="~/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>

以上所述是小编给大家介绍的第二篇Bootstrap起步的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索bootstrap起步
bootstrap起步、bootstrap javascript、bootstrap使用技巧、bootstrap 技巧、bootstrap布局技巧,以便于您获取更多的相关知识。

时间: 2024-10-01 15:58:26

第二篇Bootstrap起步_javascript技巧的相关文章

第五篇Bootstrap 排版_javascript技巧

使用bootstrap的排版特性可以创建标题,段落,列表及其它内联元素. 标题:bootstrap中定义了从h1-h6的六种标题样式. 内联子标题: 如果需要向任意一个标题添加一个子标题,只需要加上<small></small>例如: <h1>我是标题1 h1. <small>我是副标题1 h1</small></h1> <h2>我是标题2 h2. <small>我是副标题2 h2</small>&

BOM系列第二篇之定时器requestAnimationFrame_javascript技巧

引入 计时器一直是javascript动画的核心技术.而编写动画循环的关键是要知道延迟时间多长合适.一方面,循环间隔必须足够短,这样才能让不同的动画效果显得平滑流畅:另一方面,循环间隔还要足够长,这样才能确保浏览器有能力渲染产生的变化 大多数电脑显示器的刷新频率是60Hz,大概相当于每秒钟重绘60次.大多数浏览器都会对重绘操作加以限制,不超过显示器的重绘频率,因为即使超过那个频率用户体验也不会有提升.因此,最平滑动画的最佳循环间隔是lOOOms/60,约等于16.6ms 而setTimeout和

JS组件福利大放送 推荐12款好用的Bootstrap组件_javascript技巧

前言:之前分享过很多bootstrap常用组件,包括表格.表单验证.文件上传.复选下拉框.弹出框等.这段时间,博主又收藏了一些好用的组件(有些在项目中已经用起来了),经过两天的时间,已经整理出了一部分,本着"好东西要与人分享"的原则,今天还是来点福利,将博主收藏的东西分享出来,供需要的园友参考.组件大部分都是些开源组件,也有部分是博主自己在网上找到然后改写出来的效果,可能不尽如人意,有兴趣的且看看吧. 一.时间组件 bootstrap风格的时间组件非常多,你可以在github上面随便搜

Javascript中字符串replace方法的第二个参数探究_javascript技巧

前言 replace第一个参数一般放置的是正则表达式,用来匹配想要替换的文本:第二个参数一般我们放入的是字符串,用来替换掉正则匹配到的文本. 其实replace远比上面说的要强大的多,它的内部已经封装的很完善了,远不是我们想象的那么简单,下面我们就来详细聊聊replace的第二个参数. 实例介绍 现在要实现一个功能,把HTML中的字符实体转换成它们所对应的字符,比如:"<"转换成对对应字符为:"<". 下面我们来看看代码实现: String.protot

20分钟轻松创建自己的Bootstrap站点_javascript技巧

本文的主要目的让你在20分钟内学会使用twitter bootstrap创建一个站点,如何建立站点,下文为大家介绍: 首先需要说的是twitter bootstrap是非常优秀的一个前端开源框架,它为所有的组键都提供了详细的用例,让你能够轻易地通过复制黏贴而附加到你的设计中. 基本的HTML模板 我们需要以一个基本的HTML模板,这样我们能够把所需要的bootstrap文件包含进来.下面就是我们twitter bootstrap项目的开头,复制这些代码到一个文件中并将其命名为index.html

JavaScript使用DeviceOne开发实战(一) 配置和起步_javascript技巧

2015 年 9 月 底,DeviceOne Release发布.至此,DeviceOne 基本完成了对多端的支持.基于 DeviceOne 可以: HTML5.Android.iOS.Windows 多端代码一次编写,各处复用: 实时简单部署. 本地化UI 在接下来的时间,我会通过一系列文章来介绍 DeviceOne.本文介绍环境配置以及如何建立一个简单的项目.(注:本篇文章 iOS 和 Android和Windows 开发都适用.) 目前使用 DeviceOne 开发可以在Windows 或

第一次接触神奇的Bootstrap网格系统_javascript技巧

本篇将主要介绍Bootstrap的网格系统. 网格系统的实现是通过定义容器大小,平分12份(或24份.32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统. Bootstrap中的网格系统就是将容器平分成12份. Bootstrap的网格系统用来布局,其实就是列的组合,一共有四种基本的用法: 1.列组合 更改数字来合并列(原则:列总和数不能超12),例如: <!DOCTYPE HTML> <html> <head> <me

Bootstrap入门书籍之(零)Bootstrap简介_javascript技巧

什么是Bootstrap? Bootstrap是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品.Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的. 基于html5.css3的bootstrap,具有下面这些诱人特性: (1)移动设备优先: (2)漂亮的设计: (3)友好的学习曲线: (4

第一次接触Bootstrap框架_javascript技巧

关于Bootstrap,话不多说,直接进入主题: 安装 可以通过bootstrap官方网站下载安装 可以通过Bower安装(关于bower一种包管理器,本文不做详解) bower install bootstrap 可以通过npm安装(关于npm可以阅读) npm install bootstrap 项目中引入Bootstrap <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo