一、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. html&css中的文字对齐问题

    html&css的使用过程中,我们经常会遇到很多文字对齐问题.下面我要介绍一个有丁点难的文字对齐问题. 实现效果如下图所示.   两行长度不定的文字,要让它们总体水平居中,然后,这两行字要左对 ...

  2. 2分钟在eclipse下使用SpringBoot搭建Spring MVC的WEB项目

    1. 首先用eclipse创建一个maven工程, 普通maven工程即可 2. 修改pom如下: <?xml version="1.0" encoding="UT ...

  3. MyEclipse10查看Struts2源码及Javadoc文档

    1:查看Struts2源码 (1):Referenced Libraries >struts2-core-2.1.6.jar>右击>properties. (2):Java Sour ...

  4. 19、ASP.NET MVC入门到精通——Unity

    一.IOC介绍 IOC(Inversion of Control),中文译为控制反转,又称为“依赖注入”(DI ＝Dependence Injection) IOC的基本概念是:不创建对象,但是描述创 ...

  5. gulp压缩css文件跟js文件

    越到最后啊 就越发现,真的很理解那句话 就是自己多学一点一点知识,就少一句问别人的东西 这是多么痛苦的领悟 今天需要压缩css跟js文件 然后不懂啊 就问别人啊 就问啊问啊 然后再上网了解啊了解啊 用 ...

  6. window下 Sublime Text 3 安装

    1.下载 官网 http://www.sublimetext.com/ 安装时,注意勾选Add to explorer context menu,这样Sublime Text可以被添加到右键中,在右键 ...

  7. Win7下共享WiFi热点方法

    管理员权限运行CMD netsh wlan set hostednetwork mode=allow ssid=Wifi名称 key=Wifi密码 netsh wlan start hostednet ...

  8. Linux学习心得之 Linux下命令行Android开发环境的搭建

    作者:枫雪庭 出处:http://www.cnblogs.com/FengXueTing-px/ 欢迎转载 Linux学习心得之 Linux下命令行Android开发环境的搭建 1. 前言2. Jav ...

  9. JAVA 设计模式 桥接模式

    用途 桥接模式 (Bridge) 将抽象部分与实现部分分离,使它们都可以独立的变化. 桥接模式是一种结构式模式. 结构

  10. 关于csrss.exe和winlogon.exe进程多、占用CPU高的解决办法，有人在暴力破解

    关于csrss.exe和winlogon.exe进程多.占用CPU高的解决办法 最近VPS的CPU一直处在100%左右,后台管理上去经常打不开,后来发现上远程都要好半天才反映过来,看到任务管理器有多个 ...