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 相关文章推荐
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
Sep 28 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
Jul 01 Javascript
javascript实现动态表头及表列的展现方法
Jul 14 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
详解Require.js与Sea.js的区别
Aug 05 Javascript
简单了解JavaScript异步
May 23 Javascript
Ajax实现页面无刷新留言效果
Mar 24 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
下载文件的点击数回填
2006/10/09 PHP
php中使用临时表查询数据的一个例子
2013/02/03 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
jQuery 操作option的实现代码
2011/03/03 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
ie支持function.bind()方法实现代码
2012/12/27 Javascript
Javascript的&amp;&amp;和||的另类用法
2014/07/23 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
jQuery插件简单学习实例教程
2016/07/01 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
jQuery Ajax前后端使用JSON进行交互示例
2017/03/17 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
2017/09/03 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
python sys模块sys.path使用方法示例
2013/12/04 Python
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
Python将图片转换为字符画的方法
2020/06/16 Python
python 获取url中的参数列表实例
2018/12/18 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
Django框架 信号调度原理解析
2019/09/04 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
介绍一下linux的文件系统
2015/10/06 面试题
销售代表求职自荐信
2013/10/01 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
新教师2015年度工作总结
2015/07/22 职场文书
文艺部部长竞选稿
2015/11/21 职场文书
Python WSGI 规范简介
2021/04/11 Python