第二篇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起步的更多相关文章

  1. “MVC+Nhibernate+Jquery-EasyUI”信息发布系统 第二篇(数据库结构、登录窗口、以及主界面)

    “MVC+Nhibernate+Jquery-EasyUI”信息发布系统 第二篇(数据库结构.登录窗口.以及主界面) 一.在上一篇文章中,主要说的就是把主框架搭建起来,并且Nhibernate能达到增 ...

  2. ElasticSearch入门 第二篇:集群配置

    这是ElasticSearch 2.4 版本系列的第二篇: ElasticSearch入门 第一篇:Windows下安装ElasticSearch ElasticSearch入门 第二篇:集群配置 E ...

  3. Spring Cloud第二篇 | 使用并认识Eureka注册中心

    ​ 本文是Spring Cloud专栏的第二篇文章,了解前一篇文章内容有助于更好的理解本文: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 ​​ 一.Sprin ...

  4. [ 高并发]Java高并发编程系列第二篇--线程同步

    高并发,听起来高大上的一个词汇,在身处于互联网潮的社会大趋势下,高并发赋予了更多的传奇色彩.首先,我们可以看到很多招聘中,会提到有高并发项目者优先.高并发,意味着,你的前雇主,有很大的业务层面的需求, ...

  5. 从0开始搭建SQL Server AlwaysOn 第二篇(配置故障转移集群)

    从0开始搭建SQL Server AlwaysOn 第二篇(配置故障转移集群) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www ...

  6. (转)从0开始搭建SQL Server AlwaysOn 第二篇(配置故障转移集群)

    原文地址:  http://www.cnblogs.com/lyhabc/p/4682028.html 这一篇是从0开始搭建SQL Server AlwaysOn 的第二篇,主要讲述如何搭建故障转移集 ...

  7. 深入理解javascript对象系列第二篇——属性操作

    × 目录 [1]查询 [2]设置 [3]删除[4]继承 前面的话 对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对 ...

  8. 前端工程师技能之photoshop巧用系列第二篇——测量篇

    × 目录 [1]测量信息 [2]实战 [3]注意事项 前面的话 前端工程师使用photoshop进行的大量工作实际上是测量.本文是photoshop巧用系列第二篇——测量篇 测量信息 在网页制作中需要 ...

  9. 《javascript权威指南》读书笔记——第二篇

    <javascript权威指南>读书笔记——第二篇 金刚 javascript js javascript权威指南 今天是今年的196天,分享今天的读书笔记. 第2章 词法结构 2.1 字 ...

随机推荐

  1. VC++常用数据类型转化

    char* 转换成 LPCTSTR const char* dibFileName; , , dibFileName, -, NULL, ); wchar_t *wide = new wchar_t[ ...

  2. Python_Day11_同步IO和异步IO

    同步IO和异步IO,阻塞IO和非阻塞IO分别是什么,到底有什么区别?不同的人在不同的上下文下给出的答案是不同的.所以先限定一下本文的上下文. 本文讨论的背景是Linux环境下的network IO. ...

  3. html小知识点汇总(浏览器导航上显示图标、div无高度时试着清除浮动、文字环绕图片、字体加粗、div按百分比分、已有的不合适的class,针对特定的标签进行修改)

    1.新点击的网页,在浏览器导航上显示图标: 像这种效果: <head> <meta charset="UTF-8"> <meta name=" ...

  4. 第四周作业-yjw

    运动策略分析 首先我们可以得到我方击球手质心的位置,球的质心的位置,对方球门中心位置.同时以桌面边缘为坐标轴,建立笛卡尔坐标系.可以明确的一点是,击球手的运动为曲线,球进框的运动为直线,或者折线. 击 ...

  5. 禁止手机页面中A标签长按弹出路径框

    //禁止手机页面中A标签长按弹出路径框    window.onload=function(){        document.documentElement.style.webkitTouchCa ...

  6. (47) odoo详细操作手册

    odoo 8 详细操作手册, ERP(Odoo8.0)操作手册-v1.10(陈伟明).pdf 链接: http://pan.baidu.com/s/1hsp0bVQ 密码: r9tt 花了将近9个月时 ...

  7. 通过form表单获取值

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  8. jquery1:

    在jquery中:1.window.onload: --->$();所以一般jquery用如下开头: $(function(){ })2.获取元素:$('#div'):获取id为div的元素$( ...

  9. DataTable Linq Example

    DataTable CreateTable() { DataTable dtable = new DataTable(); DataColumn dc; //MId CId FId PId dc = ...

  10. interface

    接口的简单案例: 接口 就是一种规范 其目的主要是为了约束和解耦 public class Test { public static void main(String[] args){ Compute ...