Bootstrap 简介: 创建响应式、移动项目的工具
原文链接: Introduction to Bootstrap: A Tool for Building Responsive, Mobile-First Projects
下载: 示例代码Bootstrap-Code.zip
原文时间: 2014年02月28日
翻译时间: 2014年03月01日
翻译人员: 铁锚
简介
随着移动设备的日益普及,web开发人员需要考虑将网站开发项目从一开始就为移动设备做设计。 为各种设备开发兼容的web应用程序可以说是很有挑战性的。 Web开发人员常常借助于第三方框架的特性,比如主题、组件和响应设计。 Bootstrap 就是这样一个方便、流行和开源的框架。 使用Bootstrap框架可以开发响应式网站,而不必因CSS有太多烦恼。 Bootstrap提供了一个丰富的CSS框架,当然,如有需要也可以自定义。添加常见的web页面元素,比如导航菜单、按钮、form表单元素和排版都变得非常容易。 本文的目的让你对Bootstrap
有一个基本的了解,这样您就可以在web应用程序中开始使用它。
Bootstrap 概述
任何专业网站使用CSS的目的都是定义样式。 然而,使用原始CSS要求手动创建连基本的样式规则。 显然,这是费时和缺乏任何标准化自web开发人员倾向于创建规则按自己的要求和理解。 不是很好如果一些现成的CSS框架给你,你可以马上开始使用? 这就是引导。 此外,引导可以轻松地定制以满足您的需求。
要在项目中使用 Bootstrap ,您在书写 HTML标签时需要遵循一些约定。 这些约定主要是HTML元素的结构,以及这些元素使用的CSS类。 一旦遵循这些约定你就可以在web页面中引用Bootstrap ,而且不需要网站自定义其他样式信息。 Bootstrap让你从创建CSS规则的任务中解放出来。 这提高了开发人员的生产力。 此外,由于Bootstrap是基于约定的,当你专注于开发任务时,网页设计师就可以做微调和自定义的工作,。
Bootstrap 在某些地方使用jQuery。 所以,你也应该在项目中引用jQuery库。
只是为了给你一个想法,可以像下面这样在web页面中引用 Bootstrap:
<link href="css/bootstrap.min.css" rel="stylesheet" /> <script src="js/jquery-2.1.0.min.js"></script> <script src="js/bootstrap.min.js"></script>
假如在HTML代码中存在一个标签 <a> 元素:
<a class="btn btn-lg btn-primary" href="#">Know More...</a>
上面的 <a> 元素在浏览器中加载时看起来如下所示:
由于使用 Bootstrap的神奇,上面的效果不需要自己开发任何的CSS, 仅仅使用了 Bootstrap CSS类。
本文的余下部分将开发一个简单的web页面,类似于下面的样子:
上面的页面通过 Bootstrap 显示的界面元素包括 顶部导航栏、按钮, 垂直菜单,并使用了引导两列布局。
下载与引用Bootstrap
很明显第一步是下载并在项目中引入Bootstrap。 可以打开 http://getbootstrap.com 以下载包含Bootstrap 所需文件的ZIP文件。 如果你解压ZIP文件应该得到如下文件夹结构:
css 文件夹下面包含
bootstrap.css 的开发和最小化版本 —— 你需要的主要css文件。
fonts 文件夹下面是CSS 所需的字体定义文件。 Bootstrap 的文本内容用到该字体。
js 文件夹包含了 bootstrap.js 文件。 注意 Bootstrap 依赖于jQuery,您需要在项目中单独添加jQuery库。
解压以后,您可以将它们添加到您的web项目文件夹。 例如,下图显示了在Visual Studio中添加到 ASP.NET web应用程序项目后的文件夹。
注意,jquery-2.1.0.min.js被添加到了js文件夹中.
创建一个示例Web页面
现在添加一个新的HTML页面到项目中,并在 <head> 部分引用以下文件:
正如您看到的,web页面通过 <link>标记引用bootstrap.min.css样式表。 然后通过<script>引用 jquery-2.1.0.min.js和bootstrap.min.js文件。
(如果需要获得更好的性能,你可以考虑把<script>标记放到
<body>内部的末尾。 对于我们的简单例子,把他们放到 head 部分也是可行的,当然,也可以
对<script>标签使用 defer 属性)。
现在已经开始可以使用 Bootstrap 功能了。
横向导航栏
在本节中,您将添加web页面的顶部导航栏. 导航栏如下所示:
顶部导航栏包含一个品牌——典型的应用程序名称(上图中的 My WebSite),其次是三个导航链接(Home, Products 以及 Services)。 一个下拉菜单—— More ——包括四个菜单项和一个分隔线。 最后,右边的导航栏包含三个导航链接(About Us, Follow Us 和 Contact Us)。
键入以下的代码,可以将这个导航栏添加到web页面中:
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">My WebSite</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">Products</a></li>
<li><a href="#contact">Services</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">More... <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Support Ticket</a></li>
<li><a href="#">Knoledge Base</a></li>
<li class="divider"></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contributions</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About Us</a></li>
<li><a href="#">Follow Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
仔细观察上面的代码。最外层的 <div> 充当导航栏的容器, 这个<div>应用了三个CSS类——
navbar, navbar-default 和 navbar-static-top。 这些CSS类是 Bootstrap 预定义的,此处负责顶部导航栏的样式。
接着是包装导航栏标题和每个菜单项的<div>。 这个<div> 有一个叫做
container 的 CSS类。 品牌名(My WebSite)显示在导航栏的开头。 表示品牌的<div>元素有一个
navbar-header的CSS类。 实际的品牌名是里面的一个超链接,拥有CSS类
navbar-brand。
导航栏标题<div>后面跟着另一个包装了导航链接的<div>。 它有一个
navbar-collapse 的CSS类。 导航链接的列表使用<ul>和<li>元素。 <ul>有CSS类 nav和navbar-nav。 活跃的导航链接可以通过一个CSS类
active 来标示。 在上面的例子中 Home 是活跃的导航链接。
通过设置<li> 的CSS类 dropdown 创建了“More”下拉菜单。 下拉菜单项被包装在一个嵌套的<ul>元素中。 嵌套的<ul>元素具有名为
dropdown-menu 的CSS类。 下拉菜单包含四项和一条分割线。
显示的另一组导航链接使用CSS类 nav,navbar-nav 和 navbar-right。
Jumbotron(大屏幕)
顶部菜单栏下面有一个大的文本块。 这个块用 Bootstrap 的术语叫做Jumbotron(广告屏,横幅)。 Jumbotron通常用于想要突出的内容,如营销信息,标语口号或一些特殊的需求。 我们的大屏幕的示例如下所示:
创建这个超大屏幕,请在菜单栏下面添加以下代码:
<div class="container">
<div class="jumbotron">
<h1>Highlighted Content</h1>
<p>
Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World!
</p>
<p>
<a class="btn btn-lg btn-primary" href="#" role="button">Know More...</a>
</p>
</div>
</div>
在我们的示例中超大屏幕包含一个标题,一段文本和一个看起来像按钮的超链接。 大屏幕被包装在一个
container <div>元素中。 横幅<div>指定了一个CSS类jumbotron, 因为这个CSS类<h1>元素,<h1>元素也会自动使用更大的字体来显示。 另外,<div>的背景也设置为如图所示的颜色。 Know More按钮是一个附加了 btn,btn-lg和btn-primary CSS类的<a>元素。
btn-primary CSS类负责呈现图中所示的蓝色按钮。 其他适用于按钮的CSS类包括:
btn-success(绿色按钮),btn-warning(黄色按钮)和btn-danger(红色按钮)。
两列布局
横幅下面是一个两列布局,左列是文本内容,右列是垂直菜单。 这两列如下所示:
Bootstrap 使用其自己的Grid(网格)系统来定位内容。 按照这个网格系统,每行有12个设备无关的列。 这些列的命名形如:
col-md-8
第一部分(col)是所有列都不变的。 第二部分指出了目标设备的显示大小。 可能的值是xs(extra small ,极小 - 手机设备),sm(small,小-平板显示器),
md(medium,中-笔记本电脑和小型桌面显示器),lg(large,大 - 大桌面显示器)。 最后一部分是代表列跨度的数字。 数值8意味着元素跨越网格系统12列中的8列。 因此,如果你需要两列布局,第一列内容跨越8列网格和第二列的内容跨度4列的网格则可以写成:
<div class="row"> <div class="col-md-8"></div> <div class="col-md-4"></div> </div>
注意,上面使用的 class: row, col-md-8 和 col-md-4 —— 都是 Bootstrap 定义的。
在我们的特定示例中,可以使用以下代码展现两列布局:
<div class="container">
<div class="row">
<!-- 左列-->
<div class="col-md-8">
<h1>Heading goes here...</h1>
<p class="lead">
Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World!
</p>
</div>
<!-- 右列-->
<div class="col-md-4">
<!-- Vertical Menu -->
<ul class="nav nav-stacked">
<li><a href="#">ASP.NET Web Forms</a></li>
<li><a href="#">ASP.NET MVC</a></li>
<li><a href="#">Web API</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</div>
</div>
注意如何对 <ul>元素使用 nav 和 nav-stacked
CSS类来显示垂直菜单的。
文本内容
你可以使用所有的普通HTML标记,如在web页面中使用<p>来添加文本。文本也可以使用标记<strong>和<em>来达到不同的文本效果。 另外, Bootstrap 定义了几个可以改变文本显示方式的CSS类, 包括text-left,
text-right,以及 text-center。 这些类可用于设置文本对齐方式, 参考下面的例子:
<div class="container">
<p class="text-muted text-center">Copyright (C) 2014. All rights reserved.</p>
</div>
正如你所看到的<p>元素使用text-muted和text-center类。 text-muted类让文本颜色显示变暗而text-center类将文本中心对齐。
大功告成! 保存web页面并在浏览器中运行它。 验证你是否得到与本文开始处相同的外观。
总结
Bootstrap 是一个简化 多设备开发网站的CSS框架。 通过在web页面中链接 Bootstrap CSS，并遵循某些约定可以快速将样式应用于您的web页面,无需编写任何自己的CSS。 此外,您可以自定义Bootstrap 所提供的CSS来实现web应用程序所需的外观和感觉。 本文讨论了Bootstrap的基本的使用。
阅读更多关于Bootstrap的请点击这里 。
相关阅读
Using CSS3 to Jazz up your Web Forms
Creating a Complete Web Page With HTML5
Bootstrap 简介: 创建响应式、移动项目的工具的更多相关文章
- Bootstrap 实战之响应式个人博客 （二）
阅读本博文前请参考:Bootstrap 实战之响应式个人博客 (一) 一.博客 1.结构 整体博客详情页的结构共包括四部分: 导航栏 博客主体内容 右侧栏:全局搜索框,广告位,推荐阅读 页尾 其中导航 ...
- 使用 CSS 媒体查询创建响应式网站
简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...
- Bootstrap 实战之响应式个人博客 （一）
一.示例 1.主页 2.博客详情页 3.在线地址 在线地址:入口 Addition:这里使用github-page将自己的静态项目免费部署到线上. 如果你只是做一些简单的静态项目做展示,付出这么大的时 ...
- CSS 媒体查询创建响应式网站
使用 CSS 媒体查询创建响应式网站 适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...
- Bootstrap<基础十> 响应式实用工具
Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发.这些可以通过媒体查询结合大型.小型和中型设备,实现内容对设备的显示和隐藏. 需要谨慎使用这些工具,避免在同一个站点创建完全不同 ...
- Ink – 帮助你快速创建响应式邮件（Email）的框架
Ink 可以帮助你快速创建响应的 HTML 电子邮件,可工作在任何设备和客户端.这个 CSS 框架帮助您构建可在任何设备上阅读的 HTML 电子邮件.曾经需要你兼顾各种邮件客户端的日子一去不复返了,I ...
- 使用Bootstrap 3开发响应式网站实践01,前期准备、导航区域等
"使用Bootstrap 3开发响应式网站实践"系列,将使用Bootstrap 3.2制作一个自适应网站,无论是在电脑.平板,还是手机上,都呈现比较好的效果.在电脑浏览器上的最终效 ...
- 用Axure RP7创建响应式原型教程
自从几年前响应式技术开始应用时,创建响应式原型就成为了很多人苦恼的事情.响应式设计用一种非常优雅的方式处理为多种设备类型使用HTML和CSS编码的应用,但是提供给UX专业人士的原型工具却没有具备同样品 ...
- Power Apps 创建响应式布局
前言 我们都知道Power Apps作为低代码平台,最大的优势就是各个设备之间的兼容性,尤其是自带的响应式布局,非常好用. 这不,我们就为大家分享一下,如何使用Power Apps画布应用,创建响应式 ...
随机推荐
- 自定义view实现阻尼效果的加载动画
效果: > 需要知识: 1. 二次贝塞尔曲线 2. 动画知识 3. 基础自定义view知识 先来解释下什么叫阻尼运动 阻尼振动是指,由于振动系统受到摩擦和介质阻力或其他能耗而使振幅随时间逐渐衰减 ...
- 安卓高级6 SnackBar
引言 文/李牧羊(简书作者) 原文链接:http://www.jianshu.com/p/2654e6bda3b1 著作权归作者所有,转载请联系作者获得授权,并标注"简书作者". ...
- STATE（状态）模式
引子 场景 在我们软件开发的过程中,有许多对象是有状态的.而对象的行为会随着状态的改变而发生改变.例如开发一个电梯类,电梯有开门.关门.停止.运行等行为,同时电梯也会有开门状态.关门状态.停止状态.运 ...
- 剑指Offer——联通研究院笔、面试题 (Offer已收割)
剑指Offer--联通研究院笔.面试题 1.二叉树适宜存储什么样的数据? 树最适合用来表示( C ). A．有序数据元素 B．无序数据元素 C．元素之间具有分支层次关系的数据 D．元素之间无联系的数据 ...
- Android TV开发总结（三）构建一个TV app的焦点控制及遇到的坑
转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼yuiop:http://blog.csdn.net/hejjunlin/article/details/52835829 前言:上篇中,&l ...
- Docker与容器
Docker介绍 1. Docker 主要解决什么问题 Docker 对外宣称的是Build.Ship 和Run,Docker 要解决的核心问题就是快速地干这三件事情.它通过将运行环境和应用程序打包到 ...
- android 网络工具 之Android-Volley的demo
1.今天详细的研究了Volley的使用,下面来给大家介绍一下: Android Volley 是Google开发的一个网络lib,可以让你更加简单并且快速的访问网络数据.Volley库的网络请求都是异 ...
- JAVA面向对象-----instanceof 关键字
instanceof 关键字 1:快速演示instanceof Person p=new Person(); System.out.println( p instanceof Person); 2:i ...
- cassandra 如何写数据以及放置副本
application发送数据到server application 发送请求到server 根据设置的load balance 规则从cluster中挑选一个coordinator,一般使用轮询即可 ...
- 使用Spring+Junit4.4进行测试
http://nottiansyf.iteye.com/blog/345819 使用Junit4.4测试 在类上的配置Annotation @RunWith(SpringJUnit4ClassRunn ...