前端技术Bootstrap的hello world
2014-11-13 08:52
344 查看
---对于用户来说,界面就是程序本身。那么一个漂亮的web一定是你继续使用这个应用的前题。
这一节我们来一起写个Bootstrap的hello wrold。
Bootstrap
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。
如何使用Bootstrap?
Bootstrap的使用一般有两种方法。一种是引用在线的Bootstrap的样式,一种是将Bootstrap下载到本地进行引用。
[b]引用在线样式:
引用在线样式的好处就是不用本地安装Bootstrap,也是不用考虑引用时的路径问题。缺点是担心性能问题,一旦在线样式挂了,那么自己的网站页面样式也就乱掉了。
http://v3.bootcss.com/getting-started/#download
Bootstrap中文网为 Bootstrap 专门构建了自己的免费 CDN 加速服务。
使用方法非常简单:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Hello Bootstrap</title> <!-- Bootstrap core CSS --> <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>hello Bootstrap<h1> </body> </html>
<link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> 这一行已经将在线的样式引进来了。注意本文使用的是当前最新的Bootstrap3.2.0。
使用本地的Bootstrap
下载Bootstrap到本地进行解压,解压完成,你将得到一个Bootstrap目录,结构如下:
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
本地调用如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Hello Bootstrap</title> <!-- Bootstrap core CSS --> <link href="./bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet"> <style type='text/css'> body { background-color: #CCC; } </style> </head> <body> <h1>hello Bootstrap<h1> </body> </html>
<link href="./bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet"> --表示引入当前目录下的Bootstrap样式。
<link href="D:/bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet"> --当然也可以使用绝对路径。
我们多加了一个背景色效果如下:
下面利用Bootstrap的样式编写一个网站出来。
添加导航行栏和登录框
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">首页</a> <a class="navbar-brand" href="#">测试</a> <a class="navbar-brand" href="#">开发</a> </div> <div id="navbar" class="navbar-collapse collapse"> <form class="navbar-form navbar-right" role="form"> <div class="form-group"> <input type="text" placeholder="Email" class="form-control"> </div> <div class="form-group"> <input type="password" placeholder="Password" class="form-control"> </div> <button type="submit" class="btn btn-success">Sign in</button> </form> </div><!--/.navbar-collapse --> </div> </nav>
浏览器效果如下:
添加一篇文章
<div class="jumbotron"> <div id='content' class='row-fluid'> <h2>Hello, world!</h2> <p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p> <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p> <p><a class="btn btn-primary btn-lg" role="button">阅读全文 »</a></p> </div> </div>
浏览器效果如下:
添加底部介绍与友情链接
<div class="col-sm-3 col-sm-offset-1 blog-sidebar"> <div class="sidebar-module sidebar-module-inset"> <h4>About</h4> <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> </div> <div class="sidebar-module"> <h4>Elsewhere</h4> <ol class="list-unstyled"> <li><a href="#">博客园</a></li> <li><a href="#">开源中国</a></li> <li><a href="#">infoq</a></li> </ol> </div> </div>
最终效果如下:
完整代码:
View
Code
样式的继承
你一定很好奇,这些样式是怎么玩的?如何你细心的就会留意到div 标签的class属性。
通过class的属性值去继承Bootstrap的样式定义,那么就达到了某种样式效果。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>自定义样式</title> <!--自定义侧边栏样式--> <style> .divcss5-right{width:320px; height:120px;border:1px solid #F00;float:right} </style> </head> <body> <!--class属性引用自定义样式--> <div class="divcss5-right"> <h4>友情链接:</h4> <ol class="list-unstyled"> <li><a href="#">博客园</a></li> <li><a href="#">开源中国</a></li> <li><a href="#">infoq</a></li> </ol> </div> </body> </html>
[/b]
相关文章推荐
- 前端技术Bootstrap的hello world
- 前端技术Bootstrap的hello world
- 前端技术Bootstrap的hello world
- 前端技术Bootstrap的hello world
- 前端技术:bootstrap(控件、插件、html\css\js开发框架)
- [框架技术推荐]Bootstrap:快速开发Web应用程序的前端工具包
- iOS前端与后台交互技术实现及技术细节
- 面试分享:2018阿里巴巴前端面试总结 | 掘金技术征文
- 如何学好web前端技术 学好web前端需要什么基础
- EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:bootstrap弹窗功能的实现
- 前端特效14:Bootstrap3的弹出式悬浮登录框效果设计
- Bootstrap响应式前端框架笔记十七——下拉列表交互
- 我如何用前端技术得到XXOO网站的VIP
- 极速快三平台出租2017 前端技术发展回顾
- JAVA 开发平台的技术和框架(二)前端控制器:Struts2 ,Spring MVC
- 现代前端技术解析(2)
- 网页前端的Tribon三维模型展示技术分析
- web 前端 2015 年最热门的 10 篇技术文章
- DHTML技术---前端用户提交信息验证和表单提交控制+完整表单验证代码实例
- 前端系列 | 2015年双11手淘前端技术巡演 - 前言