Bootstrap 简介
一、Bootstrap介绍
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。本课时讲解 Bootstrap 的概念,并介绍 Bootstrap 应用场景和如何下载。
中文官方网站:http://www.bootcss.com/
二、入门例子创建
下面讲解如何来使用 Bootstrap,通过引入 Bootstrap,来实现一个最基本的入门例子。
实现的效果如图所示:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Bootstrap 模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body{padding-top:50px;}
.starter{padding:40px 15px;text-align: center;}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">W3Cshool</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="starter">
<h1>Bootstrap starter template</h1>
<p class="lead">初学BootStrap初学BootStrap初学BootStrap初学BootStrap初学BootStrap初学BootStrap初学BootStrap初学BootStrap初学BootStrap初学BootStrap</p>
</div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
三、全局css样式-排版
主要来了解排版中的标题、页面主体、内联元素文本、对齐、大小写、地址等的使用。
实现效果:
实例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Bootstrap 模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>学习Bootstrap</h1>
<h2>学习Bootstrap</h2>
<h3>学习Bootstrap</h3>
<h4>学习Bootstrap<small>欢迎您的到来</small></h4>
<P>hellohellohellohellohellohello</P>
<P class="lead">hellohellohellohellohellohello<abbr title="attribute">hello</abbr></P>
<P>Hello World:欢迎来到<mark>Bootstrap学习知识</mark></P>
<del></del> <p class="text-left">你好吗?</p>
<p class="text-right">你好吗?</p>
<p class="text-center">你好吗?</p>
<p class="text-lowercase">hdofdo</p>
<P class="text-uppercase">dfsodsfosdfo</P>
<p class="text-capitalize">dsfsdwedertt</p> <address>
<strong>Bootstrap</strong><br>
北京市,海淀区<br>
中关村大厦:10086
<abbr title="Phone">P:8888 8888</abbr>
</address> <ul class="list-unstyled">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap 简介的更多相关文章
- BootStrap简介及应用要点
BootStrap简介 BootStrap是基于HTML.CSS和JavaScript的框架,使你只需要写简单的代码就可以很快的搭建一个还不错的前端框架,他是后端程序员的福音,使他们只需要专注业务逻辑 ...
- 第一章 Bootstrap简介
一.Bootstrap简介 Bootstrap是基于 HTML.CSS.JAVASCRIPT 的前端框架,它简洁灵活,使得 Web 开发更加快捷.它由Twitter的设计师Mark Otto和Jaco ...
- Bootstrap学习(一):Bootstrap简介
一.Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更 ...
- 第一章Bootstrap简介
一.Bootstrap简介 Bootstrap是基于 HTML.CSS.JAVASCRIPT 的前端框架,它简洁灵活,使得 Web 开发更加快捷.它由Twitter的设计师Mark Otto和Jaco ...
- 1.Bootstrap简介
Bootstrap简介 BootstrapAPI: https://v3.bootcss.com Bootstrap优点: 响应式布局,一个框架,多种设备适用 Bootstrap 是最受欢迎的 HTM ...
- Bootstrap简介及安装使用
Bootstrap 简介 什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的 ...
- webUI框架miniUI,easyUI,extJS,Bootstrap简介及简单部署
本文为大家讲解的是webUI框架miniUI,easyUI,extJS,Bootstrap简介及简单部属,感兴趣的同学参考下 ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端a ...
- Bootstrap 简介: 创建响应式、移动项目的工具
原文链接: Introduction to Bootstrap: A Tool for Building Responsive, Mobile-First Projects 下载: 示例代码Boots ...
- Bootstrap 简介(Web前端CSS框架)
目录1.简介2.特点3.组件4.Javascript插件5.定制自己的框架代码6.Bootstrap Less 1.简介Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Tw ...
随机推荐
- 纯CSS3实现动态火车行驶特效
上次开完飞机,这次开火车 查看效果:http://hovertree.com/texiao/css3/7/ 效果图: 代码如下: <!DOCTYPE html> <html> ...
- SharePoint 列表的导出导入
有一群友问到关于 SharePoint 列表的导入与导出的问题,而最近也要做相关操作且好久没写博客了,所以记录下来,过程其实相当简单. 方法:将 列表 保存为 模板(可包含数据),下载模板文件,上传到 ...
- 背水一战 Windows 10 (18) - 绑定: 与 Element 绑定, 与 Indexer 绑定, TargetNullValue, FallbackValue
[源码下载] 背水一战 Windows 10 (18) - 绑定: 与 Element 绑定, 与 Indexer 绑定, TargetNullValue, FallbackValue 作者:weba ...
- socket编程-java
一,网络编程中两个主要的问题 一个是如何准确的定位网络上一台或多台主机,另一个就是找到主机后如何可靠高效的进行数据传输. 在TCP/IP协议中IP层主要负责网络主机的定位,数据传输的路由,由IP地址可 ...
- 网页中的<th></th>是什么意思
th定义表格内的表头单元格. html 表单中有两种类型的单元格: 1:表头单元格 - 包含表头信息(由 th 元素创建) 2:标准单元格 - 包含数据(由 td 元素创建) 注:th 元素内部的文本 ...
- TensorFlow知识总结
学习资料: 英文官方网站 Tensorflow 将要写的博客目录: 1.使用Spring AOP对异常进行统一处理 2.动态代理模式理解 aop中的动态代理模式 3.工厂模式三种的理解.logger ...
- ERROR LazyInitializationException:19 - failed to lazily initialize a collection of role: com.goodfan.entity.BeanA.beanB, no session or session was closed
1. 问题, 当使用JSONArray.fromObject(List<BeanA>)时, beanA中含有BeanB的属性beanB时,会报这个错 2. 解决办法: 使用jsonconf ...
- Linux学习心得之 linux命令
作者:枫雪庭 出处:http://www.cnblogs.com/FengXueTing-px/ 欢迎转载 前言 本篇博客是对 每日一linux命令(http://www.cnblogs.com/pe ...
- C# 生成字符串的 CheckSum
C# 生成字符串的 CheckSum private static string CheckSum(string message) { char[] chars = message.ToCharArr ...
- iOS字体