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 ...

随机推荐

Extjs.FormPanel
刚刚学习ExtJS ,备注一哈代码防止忘记... <html xmlns="http://www.w3.org/1999/xhtml"> <head runat ...
(HDU 5558) 2015ACM/ICPC亚洲区合肥站---Alice's Classified Message(后缀数组)
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=5558 Problem Description Alice wants to send a classi ...
Java中的可变长参数
可变长参数的定义与一般方法没多大差别,只不过形参多了...(三个点) 方法名(数据类型 ... 变量名){} 小案例: public class ParamDemo { public static ...
Verilog学习笔记简单功能实现（二）...............全加器
先以一位全加器为例:Xi.Yi代表两个加数,Cin是地位进位信号,Cout是向高位的进位信号.列表有: Xi Yi Cin Sum Cout 0 0 0 0 0 0 0 1 1 0 ...
cocos2d-x3.3 以前版本工程Xcode6编译时的问题
Undefined symbols for architecture i386: "_fwrite$UNIX2003", referenced from: _unixErrorHa ...
web前端交互性易用性说明
总结一下我们在web前端开发过程中总是强调交互性.易用性的情况分析说明.个人觉得web前端的易用交互也就是我们所说人性化操作.不外乎希望达到的效果为:界面风格简洁明了.重点突出:操作简单,直观可见.当 ...
js 假值
function demo(a){ if(a){ console.log(111); }else{ console.log(222); } } demo(0) html_dom.html:27 222 ...
Objective-C 数据集合
1.NSSet 1.是一个无序的,管理多个对象的集合类,最大特点是集合中不允许出现重复对象,和数学上的集合含义是一样的 2.除了无序.不许重复之外,其它功能和NSArray是一样的 2.NSArr ...
iOS适配旧项目工程在iOS9下不能正常显示
在iOS开发中,很多时候会用到旧项目,比如版本的升级.使用Demo等等, iOS SDK正在不断的升级,不断的升级给iOS开发带来了新的活力. 然而在iOS SDK新的版本出来之后,旧项目可能会出现新 ...
Android项目实战（二十五）：Android studio 混淆+打包+验证是否成功
前言: 单挑Android项目,最近即时通讯用到环信,集成sdk的时候官方有一句在 ProGuard 文件中加入以下 keep. -keep class com.hyphenate.** {*;} ...