一、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. [WCF编程]9.性能与限流

    一.性能概述 WCF服务的性能取决于很多因素.出了CPU.RAM和网络性能等常见的因素外,实例上下文模式.并发模式.数据契约的设计或使用的绑定等与WCF有关的因素都起着重要的作用. 实例上下文模式用来 ...

  2. GBDT的基本原理

    这里以二元分类为例子,给出最基本原理的解释 GBDT 是多棵树的输出预测值的累加 GBDT的树都是 回归树 而不是分类树 分类树 分裂的时候选取使得误差下降最多的分裂 计算的技巧 最终分裂收益按照下面 ...

  3. TableLayoutPanel导致的闪屏问题

    界面Load的时候添加对tableLayoutPanel的处理即可,还可设置窗体的DoubleBuffered属性为True tableLayoutPanel1.GetType().GetProper ...

  4. failover机制的小讨论

    对于一个7*24小时无间断的线上服务来说,在服役时间内难免会遇到一些fail,例如db断开连接且短暂连接不上了, 下游的某个节点忽然挂了,运维部署上依赖的某一个东西不存在了等等场景.本文主要来讨论一下 ...

  5. 记录最初工作下的笔记（$.each）

    没事开始写博客,留下以前工作中常用的笔记,内容不全或者需要补充的可以留言,我只写我常用的. each遍历在工作中很常用,平时工作最常用的就是快速找到html上dom节点以达到找寻数据,和ajax接受j ...

  6. SqlServer-无限递归树状图结构设计和查询

    在现实生活中,公司的部门设计会涉及到很多子部门,然后子部门下面又存在子部门,形成类似判断的树状结构,比如说评论楼中楼的评论树状图,职位管理的树状图结构等等,实现类似的树状图数据结构是在开发中经常出现的 ...

  7. UDS(ISO14229-2006) 汉译(No.4 术语和缩写)

    A_PCI                    Application layer Protocol Control Information应用层协议控制消息. A_PDU              ...

  8. java-阻塞队列

    阻塞队列与普通队列的区别在于,当队列是空的时,从队列中获取元素的操作将会被阻塞,或者当队列是满时,往队列里添加元素的操作会被阻塞.试图从空的阻塞队列中获取元素的线程将会被阻塞,直到其他的线程往空的队列 ...

  9. BFC总结

    图1:问题图    图2:代码    图3:解决图 问题图与解决图的区别:黄色箭头那行代码的无和有 BFC 定义 BFC(Block formatting context)直译为"块级格式化 ...

  10. 原生JS：delete、in、typeof、instanceof、void详解

    delete.in.typeof.instanceof.void详解 本文参考MDN做的详细整理,方便大家参考[MDN](https://developer.mozilla.org/zh-CN/doc ...