精彩的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操作XML文件的实现方法兼容IE与FireFox
Jun 25 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
Angular 应用技巧总结
Sep 14 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
微信小程序本地缓存数据增删改查实例详解
May 24 Javascript
Express + Node.js实现登录拦截器的实例代码
Jul 01 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 Javascript
Vue实现boradcast和dispatch的示例
Nov 13 Javascript
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
vue前端工程的搭建
Mar 31 Vue.js
很棒的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
php使用GeoIP库实例
2014/06/27 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
thinkPHP3.2使用RBAC实现权限管理的实现
2019/08/27 PHP
PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例
2020/01/23 PHP
javascript 写类方式之五
2009/07/05 Javascript
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
2010/09/06 Javascript
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
实践中学习AngularJS表单
2016/03/21 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
json 带斜杠时如何解析的实现
2019/08/12 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python查询Mysql时返回字典结构的代码
2012/06/18 Python
Python celery原理及运行流程解析
2020/06/13 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
linux面试题参考答案(11)
2016/11/26 面试题
平面设计专业大学生职业规划书
2014/03/12 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
北京英文导游词
2015/02/12 职场文书
人与自然观后感
2015/06/16 职场文书
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL