本篇主要包括：

■ 下载Bootstrap 3
■  Bootstrap 3引入页面

下载Bootstrap 3

→打开网站：http://getbootstrap.com/
→点击屏幕中央位置的Download Bootstrap按钮
→来到Bootstrap的下载页，有3个按钮可供选择：Download Bootstrap, Download source, Download Sass，本人选择"Download source"
→下载后，解压缩，打开bootstrap-3.2.0文件夹

Bootstrap 3引入页面

→使用Visual Stuidio2012创建创建一个空的ASP.NET项目，在根目录下创建index.html文件
→把dis文件夹中的css,fonts, js文件夹拷贝到项目根目录下

→把css文件夹下的bootstrap.min.css文件引入index.html文件
→通过NuGet安装最新版的jQuery

→把Scripts文件夹下的jquery-2.1.1.min.js文件引入index.html文件
→把js文件夹下的bootstrap.min.js引入index.html文件
→把带有图片的images文件夹拷贝到根目录下

→丰富index.html的内容

<!DOCTYPE html>



<html xmlns="http://www.w3.org/1999/xhtml">



<head>



<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>



    <title></title>



    <link href="css/bootstrap.min.css" rel="stylesheet" />



    <script src="Scripts/jquery-2.1.1.min.js"></script>



    <script src="js/bootstrap.min.js"></script>



</head>



<body>



    <div id="page">



        <header>



            <div id="menu">



                <ul>



                    <li><a href="#">主页</a></li>



                    <li><a href="#">关于我们</a></li>



                    <li><a href="#">联系我们</a></li>



                </ul>



            </div>



            <div id="logo">



                <a href="."></a>



            </div>



        </header>



        <section id="body">



            <section id="main">



                <h1>新浪体育讯</h1>





                <p>在2014赛季亚冠联赛的一场1/4决赛首回合比赛中，广州恒大客场0-1负于西悉尼流浪者。比赛中，出现了包括张琳芃、郜林领到红牌在内的多次争议判罚。裁判专家张大樵在接受天津体育频道采访时表示拉罗卡对张琳芃的犯规比较严重，应该领到一张黄牌，而张琳芃打了拉罗卡的脸则属于严重犯规，主裁判哈桑向他出示红牌没有问题。哈桑张冠李戴，对萨巴犯规的是刘健，却向郜林出示了红牌。另外，张大樵认为哈桑在上半场漏判了恒大队的一个点球。</p>



                <p><img src="data:images/14.jpg"/></p>





                <h1>拉罗卡在拼抢中抱摔张琳芃</h1>



                <p>这场比赛进行到第89分钟，拉罗卡在拼抢中抱摔张琳芃，张琳芃在试图摆脱拉罗卡的过程中有一个疑似手打拉罗卡脸部的动作，拉罗卡随即倒地，主裁判哈桑果断地向张琳芃出示红牌，而对于拉罗卡则没有任何处罚措施。对于张琳芃被主裁判出示红牌，张大樵表示：“拉罗卡的犯规是比较严重的，一直在抱着这个张琳芃，而且呢时间比较长，这时候作为主裁判哈桑啊，应该主动的先吹拉罗卡的犯规，这问题就解决了。结果他一直不吹，结果呢弄的张琳芃也愤怒了。他愤怒然后呢，他回过来甩手就打到了拉罗卡的脸上，这个用手臂打人，这个属于严重犯规了，裁判员应该出示红牌。对拉罗卡那个动作必须要出示黄牌，因为你屡次的犯规，而且双手抱着他，这个属于非体育行为。”</p>



                <p><img src="data:images/15.jpg"/></p>





                <p>全场比赛伤停补时阶段，最具争议性的判罚出现了。在一次拼抢中，刘健背后对萨巴犯规，萨巴随机倒地，张琳芃有一个抬腿动作，试图避免踩到萨巴，萨巴却捂着脸在地上剧烈翻滚。主裁判哈桑果断地向郜林出示红牌，里皮冲进场内质问哈桑因何原因罚下郜林。对于这次争议判罚，张大樵直言：“犯规是刘健，结果呢郜林过来，他想接这个球，实际也没碰到这个萨巴，所以这个情况来看，这个主裁判哈桑等于张冠李戴，你要处理处罚，你处罚刘健，因为他后面有个踢人犯规，郜林根本没有任何的犯规动作，这个球你给人出红牌是完全错误的。”</p>



                <p><img src="data:images/16.jpg"/></p>





                <p>当比赛进行到第6分钟时，郜林近距离攻门被托莱奇封堵，在郜林示意托莱奇有手球时，迪亚曼蒂在球门另一侧的抢射被对手封堵挡出。主裁判哈桑没有理会郜林的投诉，慢镜头显示托莱奇确实有手球。对此，张大樵坦言：“这个郜林距离球门也就是四五米的距离，很近的，但他射门时候呢，被这个西悉尼后卫用手臂挡出来，如果没有这个手臂，这个球很可能又射进球门了。不管是有意无意，他这个手臂起到了一个影响进球机会的作用。这个球来看，必须要判罚点球。”比赛中，前大连阿尔滨外援穆伦还铲倒了埃尔克森，但主裁判哈桑没有向他出牌，张大樵表示：“这场比赛，(西悉尼流浪者)特别重点要看的是埃尔克森，这个动作明显的影响了埃尔克森这个进攻机会，这个球除了判罚任意球以外，必须要果断出示黄牌，去警告西悉尼流浪者这个后卫。”</p>





                <p>8月21日下午，广州恒大俱乐部正式向亚足联秘书长埃里克斯?索萨以及相关部门负责人去信，对昨天晚上比赛中出现的两张红牌等不公正判罚进行说明。此外，中国足协也对恒大的比赛非常关注，也将向亚足联去信，希望能够为中国俱乐部创造公正、公平的比赛环境。</p>



            </section>



        </section>



        <hr/>



        <footer>



            <p>维护中国足球在亚洲赛场的声誉与尊严</p>



        </footer>



    </div>



</body>



</html>





→在id为page的div中添加一个class属性
<div id="page" class="container">



发现，和没加class属性之前有变化，多了页面2边的留白。


参考资料：
WilderMinds   
http://getbootstrap.com/


“Bootstrap 3之美”系列类包括:


Bootstrap 3之美01-下载并引入页面


Bootstrap 3之美02-Grid简介和应用


Bootstrap 3之美03-独立行,文字环绕,图片自适应,隐藏元素


Bootstrap 3之美04-自定义CSS、Theme、Package


Bootstrap 3之美05-排版、Button、Icon、Nav和NavBar、List、Table、Form


Bootstrap 3之美06-Page Header、Breadcrumbs、Dropdowns、Button Dropdowns、用Button和Dropdowns模拟Select、Input Groups、Thumbnails、Panels、Wells


Bootstrap 3之美07-插件Collapse、Accordion、Modal、Tab、Tooltip、Alert、Carousel
												


											
Bootstrap 3之美01-下载并引入页面的更多相关文章
	

    
								
  1. Bootstrap 3之美06-Page Header、Breadcrumbs、Dropdowns、Button Dropdowns、用Button和Dropdowns模拟Select、Input Groups、Thumbnails、Panels、Wells
		
    本篇主要包括: ■  Page Header■  Breadcrumbs■  Button Groups■  Dropdowns■  Button Dropdowns■  用Button和Dropdo ...
    
		
    2. 
						
  2. Bootstrap 3之美05-排版、Button、Icon、Nav和NavBar、List、Table、Form
		
    本篇主要包括: ■  排版■  Button■  Icon■  Nav和NavBar■  List■  Table■  Form 排版 ● 斜体:<em>● 加粗体:<strong& ...
    
		
    3. 
						
  3. Bootstrap 3之美07-插件Collapse、Accordion、Modal、Tab、Tooltip、Alert、Carousel
		
    类似Page Header, Breadcrumbs, Dropdowns等,都是Bootstrap的组件,是静态的.如果涉及到交互,Bootstrap提供了插件.这些插件包括: ○ 过渡效果: bo ...
    
		
    4. 
						
  4. Bootstrap 3之美04-自定义CSS、Theme、Package
		
    本篇主要包括: ■  自定义CSS■  自定义Theme■  自定义Package 自定义CSS 有时候,需要自定义或重写Bootstrap默认的CSS.→在css文件夹下创建一个site.css→假 ...
    
		
    5. 
						
  5. Bootstrap 3之美03-独立行,文字环绕,图片自适应,隐藏元素
		
    本篇主要包括: ■  添加独立的一行■  文字环绕■  图片自适应■  隐藏元素 添加独立的一行 在id为body的section和id为main的section之间,添加2张图片. 我们发现,新加的 ...
    
		
    6. 
						
  6. Bootstrap 3之美02-Grid简介和应用
		
    本篇主要包括: ■  Grid简介■  应用Grid■  Multiple Grids Grid简介 Bootstrap中,把页面分成12等份,这就是所谓的Grid. 在Bootstrap中,用类名控 ...
    
		
    7. 
						
  7. 微信分享功能引入页面-控制分享时候调用的标题、图片、url和微信按钮隐藏显示控制
		
    1.设置分享调用的标题.图片.url预览. 2.控制右上角三个点按钮的隐藏显示(和底部工具栏的显示隐藏--未测试). 3.判断网页是否在微信中被调用. <!doctype html> &l ...
    
		
    8. 
						
  8. JS的组成部分、引入页面的方法以及命名规范
		
    JS的组成部分.引入页面的方法以及命名规范   一.页面是由三部分组成 1)html标签(超文本标记语言) 2)css样式(层叠样式表) 3)javascript脚本编程语言(动态脚本语言) 二.将c ...
    
		
    9. 
						
  9. 非等高cell实战（01）-- 实现微博页面
		
    非等高cell实战(01)-- 实现微博页面 学习过UITableView.AutoLayout以及MVC的相关知识,接下来通过一个微博页面实战来整合一下. 首先看一下效果图: 需求分析 此页面为非等 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. supervisor管理uwsgi
			
    1. 前言 传统的管理uwsgi服务: 1. 通过shell脚本来编写start restart stop函数来控制 2. 比较麻烦,有时候控制写的烂,还会出现意想不到的错误 supervisor进行 ...
    
			
    2. 
						
  2. gtk+学习笔记（四）
			
    今天看了下单选按钮的设置,实现起来还是挺简单的,就是自己太不熟练 radio=gtk_radio_button_new_with_label(NULL,"a"); //第一次创建单 ...
    
			
    3. 
						
  3. MyBatis的动态插入语句（经常报‘无效的列类型’）
			
    最近在工作中经常遇到一个情况:通过mybatis的标签执行插入语句,当表中字段比较多的时候,需要全部插入,而有时候的需求是只插入其中几个字段,但是会报错. 原来的语句,必须把所有字段都Set值. &l ...
    
			
    4. 
						
  4. 【AtCoder】AGC011 E - Increasing Numbers
			
    题解 题是真的好,我是真的不会做 智商本还是要多开啊QwQ 我们发现一个非下降的数字一定可以用不超过九个1111111111...1111表示 那么我们可以得到这样的一个式子,假如我们用了k个数,那么 ...
    
			
    5. 
						
  5. Linux 的软件安装目录
			
    Linux 的软件安装目录是也是有讲究的,理解这一点,在对系统管理是有益的 /usr:系统级的目录,可以理解为C:/Windows/,/usr/lib理解为C:/Windows/System32. / ...
    
			
    6. 
						
  6. Kotlin in Action 笔记
			
    Kotlin 参考 官网 reference kotlin实战 Try Kotlin Kotlin China Github 简介 Kotlin是一门把Java平台作为目标的新的编程语言.它简洁.安全 ...
    
			
    7. 
						
  7. Jenkins的Pipeline脚本在美团餐饮SaaS中的实践
			
    一.背景 在日常开发中,我们经常会有发布需求,而且还会遇到各种环境,比如:线上环境(Online),模拟环境(Staging),开发环境(Dev)等.最简单的就是手动构建.上传服务器,但这种方式太过于 ...
    
			
    8. 
						
  8. 基于特征码文件恢复工具magicrescue
			
    基于特征码文件恢复工具magicrescue   常见类型的文件都包含一些特殊的字节,用来标识文件的类型.这些字节被称为特征码.在磁盘中,当记录文件存储位置的簇损坏后,就可以基于这些特征码来恢复文件. ...
    
			
    9. 
						
  9. 拉格朗日乘子法以及KKT条件
			
    拉格朗日乘子法是一种优化算法,主要用来解决约束优化问题.他的主要思想是通过引入拉格朗日乘子来将含有n个变量和k个约束条件的约束优化问题转化为含有n+k个变量的无约束优化问题. 其中,利用拉格朗日乘子法 ...
    
			
    10. 
						
  10. HTML 5 <form> enctype 属性
			
    值 描述 application/x-www-form-urlencoded 在发送前对所有字符进行编码(默认). multipart/form-data 不对字符编码.当使用有文件上传控件的表单时, ...
    
			
    11.