Bootstrap框架的学习教程详解(二)


Posted in Javascript onOctober 18, 2016

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

一、下载Bootstrap

Bootstrap (当前版本 v3.3.0)提供以下几种方式帮你快速上手,每一种方式针对具有不同技能等级的开发者和不同的使用场景。

下载地址:http://v3.bootcss.com/getting-started/#download

PS:其实我们不用下载bootstrap也可以使用它:

Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 CDN 加速服务。基于国内云厂商的 CDN 服务,访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。

二、预编译版

下载压缩包之后,将其解压缩到任意目录即可看到以下(压缩版的)目录结构:

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff

PS:字体可以添加也可以不添加

三、实例一

<html lang="en">
<head>
<!--这三个meta标签必须在head头三个-->
<!--1、utf8中文-->
<meta charset="utf-8">
<!--2、IE浏览器的适配-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--3、适配到手机屏幕-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--title题目-->
<title>First Template for Bootstrap</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!--导航条,nav标签-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<ul class="nav navbar-nav">
<!--导航条内容-->
<li class="active"><a href="home.html">首页 <span class="sr-only">(current)</span></a></li>
<li><a href="Java.html">JAVA</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">PS</a></li>
</div>
</nav>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.min.js"></script>
<!-- Bootstrap核心js依赖于jQuery,所以要先引用jQuery-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="js/bootstrap.min.js"></script>
</body></html>

运行截图如下图所示:

Bootstrap框架的学习教程详解(二)

四、实例二

栅格系统是Bootstrap的和具有优势。采用的是流式的栅格系统,对宽度进行12等分。

<!--栅格系统, 全局CSS样式-栅格系统 -->
<!--栅格系统放在container容器中-->
<div class="container" style="margin-top: 60px">
<!--添加一行占用12列,添加img-->
<div class="row">
<!--javascript插件,添加carousel轮播图-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" >
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/sliders/pic1.png" />
<div class="carousel-caption">
<h3>College Team</h3>
</div>
</div>
<div class="item">
<img src="img/sliders/pic2.jpg" />
<div class="carousel-caption">
<h3>College Life</h3>
</div>
</div>
<div class="item">
<img src="img/sliders/pic3.png" />
<div class="carousel-caption">
<h3>Country Project</h3>
</div>
</div>
<div class="item">
<img src="img/sliders/pic3_3.jpg" />
<div class="carousel-caption">
<h3>Hello World</h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!--页面分为左右两部分 4:8-->
<div class="row" style="margin-top: 10px">
<div class="col-sm-4">
<!--添加列表组件-->
<div class="list-group" style="margin-bottom:0">
<a href="#" class="list-group-item active">看看>看看</a>
<a href="Project_exp.html" class="list-group-item">看看</a>
<a href="#" class="list-group-item">看看</a>
<a href="#" class="list-group-item">看看</a>
<a href="#" class="list-group-item">看看</a>
<a href="#" class="list-group-item">看看</a>
</div>
<!--<div>
<img src="img/class.gif">
</div>-->
</div>
<div class="col-sm-8">
<!--first-->
<table id="first" class="table table-bordered table-striped table-hover table-condensed">
<tr class="active">
<td>看看</td>
</tr>
<tr class="success">
<td>看看</td>
</tr>
<tr class="warning">
<td>看看</td>
</tr>
<tr class="danger">
<td>看看</td>
</tr>
<tr class="info">
<td>看看</td>
</tr>
<tr class="active">
<td>看看</td>
</tr>
<tr class="success">
<td>看看</td>
</tr>
<tr class="danger">
<td>个人主页(博客园):<a href="https://home.cnblogs.com/u/chengxs/" target="_blank">https://home.cnblogs.com/u/chengxs/</a></td>
</tr>
<tr class="info">
<td>看看</td>
</tr>
<tr class="success">
<td>看看</td>
</tr>
<tr class="danger">
<td>看看。</td>
</tr>
</table>
<!-- 添加分页效果-->
<nav>
<ul class="pagination" style="margin: 0px 0px">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active"><a href="#first">1</a></li>
<li><a href="#second">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div> 
</div>
</div>

效果如图所示

Bootstrap框架的学习教程详解(二)

以上所述是小编给大家介绍的Bootstrap框架的学习教程详解(二),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
从javascript语言本身谈项目实战
Dec 27 Javascript
基于jQuery图片平滑连续滚动插件
Apr 27 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
Sep 26 Javascript
jQuery+jRange实现滑动选取数值范围特效
Mar 14 Javascript
AngularJS 最常用的功能汇总
Feb 17 Javascript
JS hashMap实例详解
May 26 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 Javascript
vue.js 获取select中的value实例
Mar 01 Javascript
浅谈vue父子组件怎么传值
Jul 21 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 Javascript
微信小程序 教程之WXSS
Oct 18 #Javascript
微信小程序 教程之引用
Oct 18 #Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 #Javascript
微信小程序 教程之事件
Oct 18 #Javascript
微信小程序 教程之模板
Oct 18 #Javascript
微信小程序 教程之列表渲染
Oct 18 #Javascript
微信小程序 教程之条件渲染
Oct 18 #Javascript
You might like
介绍php设计模式中的工厂模式
2008/06/12 PHP
PHP获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
PHP高级编程实例:编写守护进程
2014/09/02 PHP
php根据一个给定范围和步进生成数组的方法
2015/06/19 PHP
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
浅谈JS中的常用选择器及属性、方法的调用
2017/07/28 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
财务管理专业应届毕业生求职信
2013/09/22 职场文书
文秘专业个人求职信
2013/12/22 职场文书
小学开学寄语
2014/01/19 职场文书
学生请假条格式
2014/04/11 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis