Bootstrap tutorial: A responsive design tutorial with Twitter Bootstrap 3

2024-06-20 19:48

本文主要是介绍Bootstrap tutorial: A responsive design tutorial with Twitter Bootstrap 3,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

原文:http://www.revillweb.com/tutorials/bootstrap-tutorial/


Introduction

This bootstrap tutorial will show you how to create a responsive template using twitter bootstrap 3. We will create a responsive banner and navigation menu along with a responsive two column content layout and a three section footer. We will also expand the twitter bootstrap CSS to create the design shown below.

Learn to create this responsive design

Getting ready

Before you start this tutorial there are various libraries you will need. Follow the steps below to get set-up and ready to begin the tutorial.

  1. Download Twitter Bootstrap via this link and the jQuery JavaScript library here.
  2. Once you have these files downloaded create an easily accessible folder called bootstrap3tutorial.
  3. Within this folder create a sub-folder called includes and within the includes sub-folder you will need two more called bootstrap and jquery.
  4. Extract the contents of the bootstrap download within the bootstrap folder and place the latest jQuery library JavaScript file within the jquery folder.
  5. Then within the includes folder create a blank CSS file called styles.css.
  6. Finally within the root bootstrap3tutorial folder create a blank HTML file called index.html.

After you have completed the above steps you should have a directory structure that looks like the figure below:

You should now have the following directory structure

Alternatively for quick set-up or to check you have it correct, download the completed tutorial files here.

Bootstrap responsive HTML document

Before you can start development on your responsive bootstrap template you need to set-up the HTML document with the required files included and the appropriate meta tags. Add the following HTML code to index.html which will create a blank HTML web page with the required bootstrap CSS files and the bootstrap JavaScript plugins with jQuery.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><!-- Set the viewport so this responsive site displays correctly on mobile devices --><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap 3 Responsive Design Tutorial | RevillWeb.com</title><!-- Include bootstrap CSS --><link href="includes/bootstrap/css/bootstrap.min.css" rel="stylesheet"><link href="includes/style.css" rel="stylesheet">
</head>
<body><!-- Include jQuery and bootstrap JS plugins -->
<script src="includes/jquery/jquery-2.1.0.min.js"></script>
<script src="includes/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

The JavaScript files are included at the bottom of the page instead of traditionally including them within the <head>. This is to save on page load times. The browser will load content procedurally from the top therefore it is better to load large JavaScript files at the end of the page after the content and CSS has loaded providing a better experience for the website viewer.

Within the <head> of the HTML document the following two meta data tags are used:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

The first is to correctly set the character encoding to prevent text display issues and the second is to tell mobile devices how to display the web page. Most mobile devices will try and display a website intelligently by changing the scale to fit on the mobile screen. This meta tag tells the mobile browser to display the web page as is, allows us, the developer to control exactly how the page is to be displayed: Read more about viewport here.

Bootstrap header and responsive navigation bar

Twitter bootstrap provides a set of CSS classes that can be used to easily create navigation menus and navigation bars. Additionally it also provides extra functionality to make the navigation menu responsive with the ability to toggle it in a mobile view. As always the Twitter Bootstrap 3 documentation is excellent, read more about Twitter Bootstrap Navigation on their site via this link.

This bootstrap tutorial shows you how to create a responsive navigation bar as part of this responsive template. Add the following HTML code within the <body> tags in index.html.

<!-- Site header and navigation -->
<header class="top" role="header"><div class="container"><a href="#" class="navbar-brand pull-left">BS3 TUTORIAL</a><button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="glyphicon glyphicon-align-justify"></span></button><nav class="navbar-collapse collapse" role="navigation"><ul class="navbar-nav nav"><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li></ul></nav></div>
</header>

The header and nav tags are new HTML5 tags that provide added definition to your HTML code, it is advised to use these tags where possible.

The button element with the navbar-toggle class is the button that will show when the website is viewed on a mobile device or through a small browser window. This button will allow the user to toggle the menu open and closed, saving space. To provide this functionality the data attributes show below:

data-toggle="collapse"data-target=".navbar-collapse"

Are added to allow bootstrap’s JavaScript to hide or show the target element.

How the navigation menu differs on a small device

The division element with the container class which wraps all the header content is re-sized using media queries based on the viewport size. This will keep the header content in the center of the screen with the appropriate margins on either side. The container elements width will be set to either 1200px, 992px or 768px depending on the device or browser size.

Adding a banner to your bootstrap template

Using the container class again we can easily add a banner section to the template. Add the following HTML code within the <body> tags under the header HTML you have just added.

<!-- Site banner -->
<div class="banner"><div class="container"><h1>Twitter Bootstrap 3: Responsive Design Tutorial</h1><p>A comprehensive tutorial showing you how to quickly create responsive designs using Twitter Bootstrap 3.</p></div>
</div>

Using bootstrap’s grid system to create a content area

Twitter bootstrap utilizes a 12 column grid system allowing the developer to easily create a wide range of responsive grids and column designs. To learn more about how you can use Twitter Bootstraps grid system, visit their documentation here.

This bootstrap tutorial will show you how to use the bootstrap grid system to create the popular right column layout. Add the following HTML code after the banner code you have just added.

<!-- Middle content section -->
<div class="middle"><div class="container"><div class="col-md-9 content"><h2>Use Twitter Bootstrap to create responsive designs for desktop, tablet & mobile</h2><p>Twitter bootstrap allows web developers and designers to quickly create attractive and responsive website templates. This tutorial provided by <a href="http://www.revillweb.com/">RevillWeb.com</a> will show you how to use Twitter Bootstrap 3 to create this responsive website template.</p><div class="to-tutorial"><p><strong>Visit the tutorial now to learn more:</strong></p><a href="http://www.revillweb.com/tutorials/bootstrap-tutorial/" class="btn btn-success">TO THE TUTORIAL</a></div></div><div class="col-md-3"><h2>Resources</h2><ul class="nav nav-pills nav-stacked"><li><a href="http://getbootstrap.com/" target="_blank">Download Twitter Bootstrap</a></li><li><a href="https://www.bootstrapresponsivethemes.com/" target="_blank">Bootstrap Responsive Themes</a></li><li><a href="http://amzn.to/1iO8NBg" target="_blank">UK: HTML & CSS: Design and Build Web Sites</a></li><li><a href="http://amzn.to/1lESKDp" target="_blank">UK: Bootstrap Site Blueprints</a></li><li><a href="http://amzn.to/1oXAbu6" target="_blank">US: HTML & CSS: Design and Build Web Sites</a></li><li><a href="http://amzn.to/1lESF2w" target="_blank">US: Bootstrap Site Blueprints</a></li></ul></div></div>
</div>

Once again the container class is used to keep the content inline with content from other sections of the template. To create the left and right sections of the main content area the col-md-9 and col-md-3 classes are used. The 9 and 3 represent the number of columns to use for each section (out of 12). Bootstrap will then use this to apply the correct widths, margins and padding for each of the sections depending on the screen size it is being viewed on.

The md is for medium sized screens, follow this link to learn about the additional xs (extra-small), sm (small) and lg (large) grid options available and how to use them.

This code is also utilizing bootstraps navigation classes nav nav-pills nav-stacked to create a stacked navigation menu in the right hand panel where a list of bootstrap resources is provided.

When this website is viewed on a mobile browser the right hand column will be pushed under the left hand column so that all the content is visible on screen.

Bootstrap's responsive columns adapt to screen size

Using the grid system we can easily create a three sectioned footer for our template. Add the following code to index.html.

<!-- Site footer -->
<div class="bottom"><div class="container"><div class="col-md-4"><h3><span class="glyphicon glyphicon-heart"></span> Footer section 1</h3><p>Content for the first footer section.</p></div><div class="col-md-4"><h3><span class="glyphicon glyphicon-star"></span> Footer section 2</h3><p>Content for the second footer section.</p></div><div class="col-md-4"><h3><span class="glyphicon glyphicon-music"></span> Footer section 3</h3><p>Content for the third footer section.</p></div></div>
</div>

This code is essentially the same as the main content area code except three division elements are used with the col-md-4 class using four columns out of 12 each. Again these columns are wrapped within a container division element to keep them all inline.

As with the main content section, each of the columns will stack under each other when there is no room to display them in-line, such as on a mobile device.

Making it your own

Even though twitter bootstrap can be used to create stunning designs with only the provided CSS classes, adding you own CSS to apply additional style is advised.

Add the following CSS to the style.css file you created earlier to add a RevillWeb theme to your newly created template – you can then adapt this to create your own design.

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
h1, h2, h3, h4 {font-family: 'Lato', sans-serif;font-weight: 300;
}
p {font-family: 'Lato', sans-serif;
}
html {background-color: #474747;
}
.top {background-color: #474747;
}
.top .navbar-brand {height: 50px;line-height: 50px;text-align: center;padding: 0 10px;background-color: #CCC;color: #474747;text-decoration: none;
}
.top .container {padding: 0;
}
.banner {background-color: #373737;
}
.banner .container {background-color: #009b9b;min-height: 200px;padding: 40px 30px 30px 40px;
}
.banner .container p {font-size: 22px;padding-left: 5px;font-weight: 300;
}
.middle {background-color: #CCC;
}
.middle .container {background-color: #FFF;min-height: 300px;padding-bottom: 20px;
}
.navbar-nav li a {color: #CCC;font-family: 'Lato', sans-serif;
}
.navbar-nav li a:hover {background-color: #373737;
}
.bottom {background-color: #474747;
}
.bottom .container {background-color: #373737;min-height: 150px;
}
.bottom .container h3 {color: #999;
}
.bottom .container p {color: #666;
}
.navbar-toggle {color: #009b9b;font-size: 32px;margin: 3px;padding: 2px 5px;line-height: 32px;
}
.navbar-toggle:hover {background-color: #373737;
}
.navbar-nav {margin: 0;
}.content p {line-height: 30px;font-size: 16px;
}
.to-tutorial {text-align: center;
}

With the above CSS you will have the following final product:

And the final complete responsive design template

Conclusion

This bootstrap tutorial showed you how easy it is to create responsive templates using Twitter Bootstrap 3. The best way to fully understand how Twitter Bootstraps responsive framework works is to read through the documentation as you are creating templates and experiment with the different classes and components available. I really hope this bootstrap tutorial was useful and that you can now go an create your own responsive designs.

If you are going to be creating Twitter Bootstrap templates or are looking to quickly get your hands on some, head over to our good friends at Bootstrap Responsive Themes now.


这篇关于Bootstrap tutorial: A responsive design tutorial with Twitter Bootstrap 3的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1079085

相关文章

Axure元件库Ant Design中后台原型模板:提升设计与开发效率的利器

企业对于中后台产品的设计与开发需求日益增长。为了提升用户体验和开发效率,设计者和开发者们不断寻求更加高效、统一的解决方案。Ant Design,作为阿里巴巴开源的一套企业级UI设计语言和React组件库,凭借其丰富的组件和统一的设计风格,已成为众多项目的首选。而在Axure中使用Ant Design元件库,更是为中后台产品的原型设计带来了极大的便利。 Ant Design简介 Ant D

【UVA】11400-Lighting System Design(动态规划)

这道题感觉状态式不是很好推。。。 WA了好几次是因为排序的时候出问题了。 这道题出在线性结构里了,先说一下最长上升子序列吧。 dp[i]代表了以array[i]结尾的时候,最长子序列长度。 推导的时候,以起点递增的顺序进行推导。 #include<cstdio>#include<cstring>#include<iostream>#include<algorithm>#i

Circuit Design 贴片晶振的区分

贴片晶振脚位的区分(非常详细,尤其是如何区分四脚的有源无源晶振): http://ruitairt.com/Article/tiepian_1.html 如何区分有源和无源晶振: http://ruitairt.com/Article/yzjddbfqsq_1.html

Circuit Design RC 震荡电路

为了测试一个信号放大器,手边又没有合适的信号发生器,所以就需要自己手动来一个信号发生器。。。。。由于所需的频率大概也不会太高,手边也没有电感,所以选择用RC震荡电路来实现这个功能。 借鉴的网页: http://www.eepw.com.cn/article/283745.htm RC振荡电路,采用RC选频网络构成,适用于低频振荡,一般用于产生1Hz~1MHz(fo=1/2πRC)的低频信号。

Circuit Design 三极管驱动蜂鸣器电路 及 蜂鸣器两端电压正确但是不响的解决方案

利用三极管进行电流放大的蜂鸣器驱动电路图: (百度图片找的) 我用有源蜂鸣器实现的这个电路,但是蜂鸣器不响。 details: 1. VCC =5V 蜂鸣器两端的直接电压约为4.5V, 但是蜂鸣器不响。 2. 将蜂鸣器直接接在4.5V的电源两端,蜂鸣器响。(说明蜂鸣器是好的) 3. 测了三极管各个管脚的电压, 和理论上的是一致的。 情况很奇怪,换了好几个三极管结果都是一样的,

ant-design-pro 学习01

1、开始学习ant-design-pro,安装啥的自动忽略,参考文档:https://pro.ant.design/docs/getting-started-cn 根据文档学习,添加页面,新增组件都没问题,可以跟着做,但是到了和服务器交互时就有点蒙了,因为ant-design-pro采用了dva框架实现,前段使用react技术,对于只有后台开发经验的我还停留在springmvc 的工作模式上,对

ant design pro 新增页面

1.在 src/routes/ 下面创建一个页面 // 填写如下内容/** NewPage.js内容 */import React, { Component } from 'react';export default class NewPage extends Component {render() {return (<div>这是新页面</div>)}}/** NewPage.le

ant mobile design组件库的PickerView组件不能滑动

问题 PickerView组件在开发环境可滑动,在测试环境不可滑动 正常开发环境是这样正常显示,并且可滑动的 发到测试环境后,变成了这样,并且只有中间那列可滑动,两边的都不能滑动,而且还会报警告 封装的组件代码如下 // 日期选择组件const CustomDatePickerView: FC<any> = ({customizeTab,setCustomizeTime,cus

vue3+ant design vue实现表格导出(后端返回文件流类型导出)

1、之前的博客介绍了,依据页面展示的table表格数据为基础展示表格导出,今天介绍下后端返回文件流来实现表格导出。 <a-button class="btn" type="primary" @click="exportData1">导出</a-button>import {ExportTheEmployeesTab } from '@/api/import';// 导出import { dow

基于node.js/jquery/bootstrap的博客系统开发---总结

1 express Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架,它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用。 var express = require('express');var app = express(); 1.1 路由 路由是指如何定义应用的端点(URIs)以及如何响应客户端的请求。 app.METHOD(pa