首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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框架的学习教程详解(二),希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

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

- Author -

saucxs

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery 对象中的类数组操作
Apr 27 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
Jul 14 Javascript
JavaScript高级程序设计（第3版）学习笔记7 js函数（上）
Oct 11 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
Sep 27 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
Mar 07 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
Nov 30 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 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
D1875(1) ATS-909X(1) 山进(2) PHILIPS(3) 德生9700DX(1) 德生PL330(2) 飞利浦(2) D1835(1) L4X25T(1) SANGEAN(1)
You might like
一个程序下载的管理程序(三)
2006/10/09 PHP
用PHP和ACCESS写聊天室(七)
2006/10/09 PHP
smarty+adodb+部分自定义类的php开发模式
2006/12/31 PHP
延长phpmyadmin登录时间的方法
2011/02/06 PHP
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
图文介绍PHP添加Redis模块及连接
2015/07/28 PHP
PHP5.3新特性小结
2016/02/14 PHP
php ajax异步读取rss文档数据
2016/03/29 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
Jquery性能优化详解
2014/05/15 Javascript
JavaScript学习心得之概述
2015/01/20 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
如何制作幻灯片（代码分享）
2017/01/06 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
2020/11/09 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
python 正则式 概述及常用字符
2009/05/07 Python
Python记录详细调用堆栈日志的方法
2015/05/05 Python
Python3中的真除和Floor除法用法分析
2016/03/16 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
Python实现SQL注入检测插件实例代码
2019/02/02 Python
使用python爬取微博数据打造一颗“心”
2019/06/28 Python
Python中sorted()排序与字母大小写的问题
2020/01/14 Python
python next()和iter()函数原理解析
2020/02/07 Python
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
群众路线个人对照检查材料
2014/09/23 职场文书
奖励通知
2015/04/22 职场文书
经营场所证明范本
2015/06/19 职场文书
会计专业自荐信范文
2019/05/22 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers
python基础之匿名函数详解
2021/04/21 Python
html中两种获取标签内的值的方法
2022/06/16 jQuery