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 相关文章推荐
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
获取非最后一列td值并将title设为该值的方法
Oct 30 Javascript
javascript实用小函数使用介绍
Nov 11 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 Javascript
JavaScript中的bold()方法使用详解
Jun 08 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
JS改变页面颜色源码分享
Feb 24 Javascript
Node.js中package.json中库的版本号(~和^)
Apr 02 Javascript
js的Object.assign用法示例分析
Mar 05 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
微信小程序 教程之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获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
php使用pdo连接sqlite3的配置示例
2016/05/27 PHP
php使用escapeshellarg时中文被过滤的解决方法
2016/07/10 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
2017/05/17 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
Python自动化构建工具scons使用入门笔记
2015/03/10 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
Python从ZabbixAPI获取信息及实现Zabbix-API 监控的方法
2018/09/17 Python
使用numba对Python运算加速的方法
2018/10/15 Python
python:接口间数据传递与调用方法
2018/12/17 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
对django后台admin下拉框进行过滤的实例
2019/07/26 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
毕业生就业自荐书
2013/12/15 职场文书
创业计划书的内容步骤和要领
2014/01/04 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
关于五一放假的通知
2015/08/18 职场文书
保姆聘用合同
2015/09/21 职场文书
vue3如何优雅的实现移动端登录注册模块
2021/03/29 Vue.js
python 中的jieba分词库
2021/11/23 Python