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

谁借莪１个温暖的怀抱￠ 2021-10-23 11:30 150阅读 0赞

本篇主要包括：

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

下载Bootstrap 3

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

Bootstrap 3引入页面

→使用Visual Stuidio2012创建创建一个空的ASP.NET项目，在根目录下创建index.html文件  
→把dis文件夹中的css,fonts, js文件夹拷贝到项目根目录下  
[![2][]][2 1]  
→把css文件夹下的bootstrap.min.css文件引入index.html文件  
→通过NuGet安装最新版的jQuery  
[![3][]][3 1]  
→把Scripts文件夹下的jquery-2.1.1.min.js文件引入index.html文件  
→把js文件夹下的bootstrap.min.js引入index.html文件  
→把带有图片的images文件夹拷贝到根目录下  
[![4][]][4 1]  
→丰富index.html的内容

<!DOCTYPE html>

<head>

</head>

<body>

<ul>

</ul>

</div>

</div>

</header>

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

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

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

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

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

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

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

</section>

<hr/>

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

</footer>

</div>

</body>

</html>

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

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

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

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

### [Bootstrap 3之美01-下载并引入页面][Bootstrap 3_01-] ###

### [Bootstrap 3之美02-Grid简介和应用][Bootstrap 3_02-Grid] ###

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

### [Bootstrap 3之美04-自定义CSS、Theme、Package][Bootstrap 3_04-_CSS_Theme_Package] ###

### [Bootstrap 3之美05-排版、Button、Icon、Nav和NavBar、List、Table、Form][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_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_07-_Collapse_Accordion_Modal_Tab_Tooltip_Alert_Carousel] ###

转载于:https://www.cnblogs.com/darrenji/p/3928507.html

[http_getbootstrap.com]: http://getbootstrap.com/
[1]: /images/20211023/426258ace4e84ffdb2c03ac6056bc84d.png
[1 1]: https://images0.cnblogs.com/blog/417212/201408/220836509716088.png
[2]: /images/20211023/6aa660671ab54e2bb3badc8507653820.png
[2 1]: https://images0.cnblogs.com/blog/417212/201408/220836518313516.png
[3]: /images/20211023/c38365c0be684371942195d6e8199369.png
[3 1]: https://images0.cnblogs.com/blog/417212/201408/220836522215803.png
[4]: /images/20211023/b18b0c8cfd0f44daa13d3b3e46be4dac.png
[4 1]: https://images0.cnblogs.com/blog/417212/201408/220836526123389.png
[5]: /images/20211023/c92e848ed8d14c6cb4be6725da44fc28.png
[5 1]: https://images0.cnblogs.com/blog/417212/201408/220836531903732.png
[6]: /images/20211023/2745a7f9b26b44cfbcaa2a61ff0e773e.png
[6 1]: https://images0.cnblogs.com/blog/417212/201408/220836538788874.png
[WilderMinds]: http://www.wilderminds.com/
[Bootstrap 3_01-]: http://www.cnblogs.com/darrenji/p/3928507.html
[Bootstrap 3_02-Grid]: http://www.cnblogs.com/darrenji/p/3928807.html
[Bootstrap 3_03-]: http://www.cnblogs.com/darrenji/p/3929199.html
[Bootstrap 3_04-_CSS_Theme_Package]: http://www.cnblogs.com/darrenji/p/3929823.html
[Bootstrap 3_05-_Button_Icon_Nav_NavBar_List_Table_Form]: http://www.cnblogs.com/darrenji/p/3930203.html
[Bootstrap 3_06-Page Header_Breadcrumbs_Dropdowns_Button Dropdowns_Button_Dropdowns_Select_Input Groups_Thumbnails_Panels_Wells]: http://www.cnblogs.com/darrenji/p/3930847.html
[Bootstrap 3_07-_Collapse_Accordion_Modal_Tab_Tooltip_Alert_Carousel]: http://www.cnblogs.com/darrenji/p/3932688.html