精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)


Posted in Javascript onJuly 01, 2016

今天学习了bootsap,收获颇丰,这里分享一个小案例,具体的解释都在代码上,这样比较直观。
先看图例

精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <title>Bootstrap选项卡</title>
 <!-- 引入Bootstrap的样式表 -->
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css">
 <link rel="stylesheet" type="text/css" href="css/base.css">
</head>
<body>
<!-- container 设置div的width为940px,且居中显示 -->
<div class="container">
 <!-- hero-unit 设置焦点视图单元 -->
 <div class="hero-unit">
 <h1>联想控股</h1>
 <p class="banner"><img src="img/bg2.png"></p>
 <p><a class="btn" href="#">更多»</a></p>
 </div>
 <!-- 栅格布局 默认为12格子,每个子div设为4个格子,即228px-->
 <div class="row">
 <div class="span4">
  <h2>公司专题</h2>
  <p>2012年12月2日,联想之星创业大讲堂在常州举行,柳传志就“创业一把手的成长”、“创业团队的建设”与创业者进行分享。</p>
  <!-- btn 按钮样式 -->
  <p><a class="btn" href="#">了解更多»</a></p>
 </div>
 <div class="span4">
  <h1>特别关注</h1>
  <p>从靠“卖电脑”起家,到旗下集IT、房地产、消费与现代服务、化工新材料、现代农业五大核心资产运营于一体,联想控股正冲刺在2014年~2016年之间上市。</p>
  <p><a class="btn" href="#">更多»</a></p>
 </div>
 <div class="span4">
  <h1>我们的历史</h1>
  <p><img src="img/bg1.png"></p>
  <p><a class="btn" href="#">更多»</a></p>
 </div>
 </div>
 <hr/>
 <footer>
 <p>© Company 2013</p>
 </footer>
</div>


<!-- 引入Bootstrap的js文件 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-tab.js"></script>
</body>
</html>


<!-- 引入base.css文件 -->
/*焦点样式图*/
div.hero-unit {
 /*背景样式,默认为灰色的*/
 background: url(../img/bg.png) no-repeat; 
 width: 980px;
 height: 443px; 
 position: relative;
 /*默认为60px*/
 padding: 0;
 /*默认为30px*/
 margin: 0;
 border-color: gray;
}
div.hero-unit h1{
 /*隐藏标题*/
 display: none;
}
/*广告显示在左下角*/
div.hero-unit .banner {
 position: absolute;
 bottom: 0;
 left:10px;
}
/*按钮在右下角显示*/
div.hero-unit .btn {
 position: absolute;
 bottom: 14px;
 right: 20px;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js身份证验证超强脚本
Oct 26 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
Oct 22 Javascript
js监听键盘事件示例代码
Jul 26 Javascript
jQuery中toggle()函数的使用实例
Apr 17 Javascript
深入理解JavaScript编程中的同步与异步机制
Jun 24 Javascript
简单学习JavaScript中的for语句循环结构
Nov 10 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
JavaScript 继承详解(六)
Oct 11 Javascript
详解angular ui-grid之过滤器设置
Jun 07 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
详解ECMAScript typeof用法
Jul 25 Javascript
vue实现前端列表多条件筛选
Oct 26 Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 #Javascript
AngularJS优雅的自定义指令
Jul 01 #Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 #Javascript
再谈Javascript中的基本类型和引用类型(推荐)
Jul 01 #Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
Jul 01 #Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
Jul 01 #Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
Jul 01 #Javascript
You might like
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
用Zend Encode编写开发PHP程序
2010/02/21 PHP
php数组一对一替换实现代码
2012/08/31 PHP
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
为PHP5.4开启Zend OPCode缓存
2014/12/26 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
PHP实现文件上传与下载
2020/08/28 PHP
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
jquery的extend和fn.extend的使用说明
2011/01/09 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
一系列Bootstrap导航条使用方法分享
2016/04/29 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
Python常见数据结构详解
2014/07/24 Python
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
python列出目录下指定文件与子目录的方法
2015/07/03 Python
Python实现全排列的打印
2018/08/18 Python
如何通过python实现人脸识别验证
2020/01/17 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
会计电算化专业个人的自我评价
2013/11/24 职场文书
意向书范本
2014/07/29 职场文书
文明好少年事迹材料
2014/08/19 职场文书
创先争优公开承诺书
2014/08/30 职场文书
结婚保证书
2015/01/16 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书