一、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 简介的更多相关文章

  1. BootStrap简介及应用要点

    BootStrap简介 BootStrap是基于HTML.CSS和JavaScript的框架,使你只需要写简单的代码就可以很快的搭建一个还不错的前端框架,他是后端程序员的福音,使他们只需要专注业务逻辑 ...

  2. 第一章 Bootstrap简介

    一.Bootstrap简介 Bootstrap是基于 HTML.CSS.JAVASCRIPT 的前端框架,它简洁灵活,使得 Web 开发更加快捷.它由Twitter的设计师Mark Otto和Jaco ...

  3. Bootstrap学习（一）：Bootstrap简介

    一.Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更 ...

  4. 第一章Bootstrap简介

    一.Bootstrap简介 Bootstrap是基于 HTML.CSS.JAVASCRIPT 的前端框架,它简洁灵活,使得 Web 开发更加快捷.它由Twitter的设计师Mark Otto和Jaco ...

  5. 1.Bootstrap简介

    Bootstrap简介 BootstrapAPI: https://v3.bootcss.com Bootstrap优点: 响应式布局,一个框架,多种设备适用 Bootstrap 是最受欢迎的 HTM ...

  6. Bootstrap简介及安装使用

    Bootstrap 简介 什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的 ...

  7. webUI框架miniUI,easyUI,extJS,Bootstrap简介及简单部署

    本文为大家讲解的是webUI框架miniUI,easyUI,extJS,Bootstrap简介及简单部属,感兴趣的同学参考下 ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端a ...

  8. Bootstrap 简介: 创建响应式、移动项目的工具

    原文链接: Introduction to Bootstrap: A Tool for Building Responsive, Mobile-First Projects 下载: 示例代码Boots ...

  9. Bootstrap 简介(Web前端CSS框架)

    目录1.简介2.特点3.组件4.Javascript插件5.定制自己的框架代码6.Bootstrap Less 1.简介Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Tw ...

随机推荐

  1. 纯CSS3实现动态火车行驶特效

    上次开完飞机,这次开火车 查看效果:http://hovertree.com/texiao/css3/7/ 效果图: 代码如下: <!DOCTYPE html> <html> ...

  2. .Net中的并行编程-3.ConcurrentQueue实现与分析

    在上文<.Net中的并行编程-2.ConcurrentQueue的实现与分析> 中解释了无锁的相关概念,无独有偶BCL提供的ConcurrentQueue也是基于原子操作实现, 由于Con ...

  3. Linux命令详解之—tail命令

    tail命令也是一个非常常用的文件查看类的命令,今天就为大家介绍下Linux tail命令的用法. 更多Linux命令详情请看:Linux命令速查手册 Linux tail命令主要用来从指定点开始将文 ...

  4. Android 实现QQ扩展listview(expandlistview)

    Android 实现QQ扩展listview(expandlistview) <?xml version="1.0" encoding="utf-8"?& ...

  5. UEditor编辑器的使用

    1.首先我们要去官网下载UEditor编辑器,选择语言,这里我用的是php utf-8版本(李昌辉) 2.下载完成之后解压文件,将解压的文件放到我们的网站目录里面 3.ueditor/utf8-php ...

  6. js中的位运算

    按位运算符是把操作数看作一系列单独的位,而不是一个数字值.所以在这之前,不得不提到什么是"位": 数值或字符在内存内都是被存储为0和 1的序列,每个0和1被称之为1个位,比如说10 ...

  7. arcgis for flex或silverlight全国地图天气预报的实现

    系统架构是B/S,目前有两个不同的版本,1.开发语言是C#.silverlight,开发平台是.NET:2.开发语言是java.flex,开发平台是myeclise. 采用地图是ArcGIS全国地图, ...

  8. Objective-C 工厂方法

    类方法用来创建对象的方法就是工厂方法 1.无参工厂方法 创建对象,并给属性一个默认值. //无参工厂方法实现 +(Student*)student{ return [[Student alloc]in ...

  9. iOS - 详细理解KVC与KVO

    详细理解KVC与KVO 在面试的时候,KVC与KVO有些时候还是会问到的,并且他们都是Objective C的关键概念,在这里我们先做一个简单地介绍: (一)KVC: KVC即指:NSKeyValue ...

  10. iOS之weak和strong、懒加载及循环引用

    一.weak和strong 1.理解 刚开始学UI的时候,对于weak和strong的描述看得最多的就是“由ARC引入,weak相当于OC中的assign,但是weak用于修饰对象,但是他们都不会造成 ...