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 相关文章推荐
js根据日期判断星座的示例代码
Jan 23 Javascript
php+js实现倒计时功能
Jun 02 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
js基础之DOM中document对象的常用属性方法详解
Oct 28 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
Nov 29 Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
微信小程序实现图片懒加载的示例代码
Dec 13 Javascript
vue scroller返回页面记住滚动位置的实例代码
Jan 29 Javascript
使用vue-cli导入Element UI组件的方法
May 16 Javascript
Angular7.2.7路由使用初体验
Mar 01 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 Javascript
JS创建自定义对象的六种方法总结
Dec 15 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 access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
js列举css中所有图标的实现代码
2011/07/04 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
浅谈Javascript数组的使用
2015/07/29 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
2015/12/03 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
js中url对象化管理分析
2017/12/29 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
JS使用正则表达式判断输入框失去焦点事件
2019/10/16 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
Python OrderedDict的使用案例解析
2019/10/25 Python
python第三方库学习笔记
2020/02/07 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
python将音频进行变速的操作方法
2020/04/08 Python
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
全球速卖通巴西站点:Aliexpress巴西
2016/08/24 全球购物
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
父亲追悼会答谢词
2014/01/17 职场文书
幼儿园教师节活动方案
2014/02/02 职场文书
班级道德讲堂实施方案
2014/02/24 职场文书
企业管理毕业生求职信范文
2014/03/07 职场文书
开学典礼策划方案
2014/05/28 职场文书
优秀员工评优方案
2014/06/13 职场文书
亚运会口号
2014/06/20 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
公诉意见书范文
2015/06/05 职场文书
2017春节晚会开幕词
2016/03/03 职场文书