一、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 数据数据 DataTable

    一般在WCf数据大数据是 List集合 或者 Json. public DataTable GetProperitybyModelCode(string modelCode) { using (var ...

  2. SQL SERVER 9003错误解决方法 只适用于SQL2000

    SQLSERVER 9003错误解决方法 只适用于SQL2000 (只适用于SQL2000) "无法打开新数据库 'POS'.CREATE DATABASE 中止. (Microsoft S ...

  3. [调整] Firemonkey iOS 原生 Edit 透明框, 改变框色

    说明:iOS 原生 Edit 透明框 适用:Berlin Firemonkey 方法:在 StyleLookup 输入 transparentedit 效果: 如果有图片 Image 在这二个 Edi ...

  4. [示例] Firemonkey 不规则按钮实做

    利用 Firemonkey 控件的组合及可塑性,可以做出千变万化的效果及功能,下面展示一个不规则按钮的实做: 效果图: 实做方法: 开一个新工程 Multi-Device Application 放一 ...

  5. Verilog学习笔记基本语法篇(十二)········ 编译预处理

    h Verilog HDL语言和C语言一样也提供编译预处理的功能.在Verilog中为了和一般的语句相区别,这些预处理语句以符号"`"开头,注意,这个字符位于主键盘的左上角,其对应 ...

  6. Linux Cmd Tool 系列之—script & scriptreplay

    Intro Sometime we want to record cmd and outputs in the interactive shell sessions. However history ...

  7. 解决jdk1.8上编译dubbo失败

    首先从https://github.com/alibaba/dubbo/archive/master.zip下载最新源码,目前最新版本为2.5.4-SNAPSHOT. 我使用的是JDK 1.8.0_0 ...

  8. linux下tomcat安全配置

    转:http://www.tuicool.com/articles/R7fQNfQ 0x00 删除默认目录 安装完tomcat后,删除 $CATALINA_HOME/webapps 下默认的所有目录文 ...

  9. MYSQL新手入门篇

    一.数据库的简介 什么是数据库? 数据的仓库,如:在atm的实例中我们创建一个db目录称之为数据库 什么是 MySQL.Oracle.SQLite.Access.MS SQL Server等 ? 他们 ...

  10. .html(),.text()和.val()的差异总结

    .html(),.text(),.val()三种方法都是用来读取选定元素的内容:只不过.html()是用来读取元素的html内容(包括html标签),.text()用来读取元素的纯文本内容,包括其后代 ...