bootstrap入门详解编程语言

一、简介

介绍：

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成

为何使用bootstrap：

响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计。

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。

浏览器支持：所有的主流浏览器都支持 Bootstrap。

容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。

它为开发人员创建接口提供了一个简洁统一的解决方案。

它包含了功能强大的内置组件，易于定制。

它还提供了基于 Web 的定制。

它是开源的。

二、开始使用bootstrap

1、下载：

https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip

2、在html中引入bootstrap

tips：由于bootstrap基于jQuery，所以引入bootstrap之前需要先下载引入jQuery

示例：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <link  rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> 
    <script src="../js/jquery-2.1.1/jquery.min.js"></script> 
    <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> 
</head> 
<body> 
<div>hello world</div> 
</body> 
</html>

三、bootstrap的全局样式

bootstrap全局样式特点：

代码整洁
风格统一
美观易用

1.标题

标题: .h1~.h6

副标题：small

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <link  rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> 
    <script src="../js/jquery-2.1.1/jquery.min.js"></script> 
    <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> 
</head> 
<body> 
<span class="h1">标题1</span> 
<span class="h2">标题2</span> 
<span class="h3">标题3</span> 
<span class="h4">标题4</span> 
<span class="h5">标题5</span> 
<span class="h6">标题6<small>副标题</small></span> 
</body> 
</html>

2.内联文本元素

标记文本：mark，效果被包裹的文本加粗，同strong

无用文本：s,效果是被包裹的文本是被划掉的（同del）

插入文本：ins，效果是文本下面多下划线(与u类似)

小号文本：small，比普通文本小一些

demo：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <link  rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> 
    <script src="../js/jquery-2.1.1/jquery.min.js"></script> 
    <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> 
</head> 
<body> 
<p> 
    <small>爱</small>不仅爱你伟岸的<strong>身躯</strong>，<del>也爱你坚持的位置</del>，足下的土地。 
</p> 
</body> 
</html>

文本左对齐：.text-left

文本居中：.text-center

文本右对齐：.text-right

单词改变为大写：.text-uppercase

单词改变为小写：.text-lowercase

单词首字母大写：.text-capitalize

基本缩略语：abbr

引用：footer，同.blockquote-reverse

3.表格

html自带的表格似乎看起来有些难看，所以bootstrap提供了丰富多彩的表格样式

一般样式：.table

条纹间隔：.table-striped

带边框表格：.table-bordered

鼠标作出反应：.table-hover

紧缩表格：.table-condensed

状态类：可设置不同单元格的颜色，.active|.success|.info|.danger|.warning

更多请参考：http://v3.bootcss.com/css/

原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/12469.html