Bootstrap

程序员文章站 2022-06-18 16:13:03

一、Bootstrap简介 1、Bootstrap是什么？ Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个开源的前端开发框架基于HTML、CSS、JavaScript,代码简洁、视觉优美，用来快速开发基于PC以及移动端的Web页面，更快速、简单。 201 ......

一、Bootstrap简介

1、Bootstrap是什么？

Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个开源的前端开发框架

基于HTML、CSS、JavaScript,代码简洁、视觉优美，用来快速开发基于PC以及移动端的Web页面，更快速、简单。

2010 年 6 月，Twitter 内部的工程师为了解决前端开发任务中的协作统一问题。经历

各种方案后，Bootstrap 最终被确定下来，并于 2011 年 8 月发布。经过很长时间的迭代升

级，由最初的 CSS 驱动项目发展成为内置很多 JavaScript 插件和图标的多功能 Web 前端

的开源框架。

Bootstrap 最为重要的部分就是它的响应式布局，通过这种布局可以兼容 PC 端、PAD

以及手机移动端的页面访问。

Bootstrap官网：http://

中文网：

版本：v3.0、v4.0

2、特点

l 跨设备、跨浏览器

兼容所有主流浏览器，包括IE7、IE8

l 响应式布局

支持PC、移动端（手机、PAD）等，移动设备优先。

l 丰富的组件

表单、下拉菜单、导航、面板、徽章、标签等

l 内置jQuery插件

模态框、工具提示、弹出框、轮播图等。

l 支持动态样式

LESS 、SASS,可以使用变量、嵌套、混合等，编写样式更快、更灵活

l 支持HTML5/CSS3

二、起步

下载Bootstrap

CDN:Content Delivery Network,即内容分发网络，提供稳定快速的资源网络

优化网站：

Js、css等一些库文件，压缩

CDN

解压后，目录呈现这样的结构：

bootstrap/

├── css/

│ ├── bootstrap.css

│ ├── bootstrap.css.map

│ ├── bootstrap.min.css

│ ├── bootstrap-theme.css

│ ├── bootstrap-theme.css.map

│ └── bootstrap-theme.min.css

├── js/

│ ├── bootstrap.js

│ └── bootstrap.min.js

└── fonts/

├── glyphicons-halflings-regular.eot

├── glyphicons-halflings-regular.svg

├── glyphicons-halflings-regular.ttf

├── glyphicons-halflings-regular.woff

└── glyphicons-halflings-regular.woff2

主要分为三大核心目录：css(样式)、js(脚本)、fonts(字体)。

1.css 目录中有四个 css 后缀的文件，其中包含 min 字样的，是压缩版本，一般使用这个；不包含的属于没有压缩的，可以学习了解 css 代码的文件；而 map 后缀的文件则是css 源码映射表，在一些特定的浏览器工具中使用。

2.js 目录包含两个文件，是未压缩和压缩的 js 文件。

3.fonts 目录包含了不同后缀的字体文件。

准备

开发工具：Hbuild

测试工具：Firfox chrome （自带响应式设计模式）

基本模板

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</body>

</html>

注意：控制台报错：

源映射错误：TypeError: NetworkError when attempting to fetch resource. 源 URL：file:///E:/Bootstrap/code/css/bootstrap.css 源映射 URL：bootstrap.css.map[详细了解]

如果不将bootstrap.css.map和bootstrap.css放在一个目录下将报源映射错误

栅格系统

Bootstrap 的栅格系统，提供了一套响应式、移动设备优先的流式栅格系统。

一．移动设备优先

有一份非常重要的 meta，用于设置屏幕和设备等宽以及是否运行用户缩放，及缩放比例的问题。

二．布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器。由于 padding 等

属性的原因，这两种容器类不能相互嵌套。

.container//固定容器

.container-fluid//100%宽度

栅格系统中，浏览器会随着屏幕的大小的增减自动分配最多 12 列。通过一系列的行(row)

与列(column)的组合来创建页面布局。工作原理如下：

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100%宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。

3.你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

4.类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。

5.栅格系统中的列是通过指定 1 到 12 的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。

6.如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

.col1{

background:red;

}

.col2{

background:#666;

}

.col3{

background:blue;

}

.col4{

background:green;

}

</style>

</head>

<body>

</div>

<hr/>

</div>

<hr/>

</div>

<hr/>

</div>

<hr/>

</div>

</body>

</html>

列偏移、列排序、列嵌套

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

.row div{

background:#ccc;

border: 1px solid red;

}

</style>

</head>

<body>

</div>

<hr/>

</div>

<hr/>

</div>

</div>

</body>

</html>

排版样式

1.页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 行高设置为 1.428(即

20px)；<p>段落元素被设置等于 1/2 行高(即 10px)；颜色被设置为#333。

2.标题

Bootstrap 分别对 h1 ~ h6 进行了 CSS 样式的重构，并且还支持普通内联元素定义 class=(.h1 ~ h6)来实现相同的功能。

注：Bootstrap字体颜色、字体样式、行高均被固定了，从而保

证了统一性，而原生的会根据系统内置的首选字体决定，颜色是最黑色。

在 h1 ~ h6 元素之间，还可以嵌入一个 small 元素作为副标题.

h1 ~ h3 下 small 元素的大小只占父元素的 65%，那么通过计算，h1 ~ h3 下的 small 为 23.4px、19.5px、15.6px；h4 ~ h6 下 small 元素的大小只占父元素的 75% ,分别为：13.5px、10.5px、9px。在 h1 ~ h6 下的 small 样式也进行了改变，颜色变成淡灰色：#777，行高为 1，粗度为 400。

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<span class="h1">span下的h1标题</span>

<hr/>

</div>

<hr/>

<span class="mark">span下的mark</span><br/>

<del>被删除的文本</del><br/>

<s>无用的文本</s><br/>

<ins>插入的文本</ins>

<u>带下划线的文本</u><br/>

<span class="small">span下的小号文本</span><br/>

<strong>着重强调的文本</strong><br/>

<b>用于高亮单词或短语，不带有任何着重的意味</b><br/>

<hr/>

<p style="border:1px solid red;width:30px" class="text-nowrap">超出后不换行</p>

<hr/>

<p class="text-lowercase">hello world!</p>//小写

<p class="text-uppercase">hello world!</p>//大写

<p class="text-capitalize">hello horld!</p>//首字母大写

<hr/>

<!--缩略语

class="initialism"复写html5的abbr

-->

中国北京*

</address>

<p>钢铁是咋样练成的？</p>

</blockquote>

<p>钢铁是咋样练成的？</p>

</blockquote>

<hr/>

<p>钢铁是咋样练成的？</p>

</blockquote>

<!--列表

list-unstyled：移除默认样式（无序列表不加小圆点）

list-inline：内联（设置为一行）

-->

<ul>

</ul>

</ul>

<hr/>

<!--水平排列描述列表

dl-horizontal:dt和dd水平排列

-->

<dd>是一款游戏</dd>

</dl>

<hr/>

press <kbd>ctrl + ,</kbd>

<hr/>

<pre><p>Please input...</p></pre>

</body>

</html>

代码样式

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<code>Console.log()</code>表示在控制台输出信息<br/>

请按<kbd>ctrl+s</kbd>进行保存

<hr/>

var a=10;

var b=20;

return a+b;

var a=10;

var b=20;

return a+b;

var a=10;

var b=20;

return a+b;

var a=10;

var b=20;

return a+b;

var a=10;

var b=20;

return a+b;

var a=10;

var b=20;

return a+b;

</pre>

var <var>abc</var>=10;

</body>

</html>

表格

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<!--表格

.table:实现基本的表格样式

.table-striped:条纹状表格(让<tbody>里的行产生一行隔一行加单色背景效果) 注：表格效果需要基于基本格式.table

. table-bordered:带边框的表格

.table-hover:让<tbody>下的表格悬停鼠标实现背景效果

-->

<thead>

<!--状态类

可以单独设置每一行/列的背景样式

active:鼠标悬停在行或单元格上

success:标识成功或积极的动作

info:标识普通的提示信息或动作

warning:标识警告或需要用户注意

danger:表示危险或潜在的带来负面影响的动作

-->

</tr>

</thead>

<tbody>

</tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

</body>

</html>

表单

<!DOCTYPE html>

<head>

<style>

</style>

</head>

<body>

<form>

</div>

</div>

</form>

<hr/>

<!--内联表单

(表单元素居于一行)

-->

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</form>

<hr/>

</div>

</div>

</form>

<hr/>

<form>

阅读服务协议

</textarea>

<!--

复选框

disabled:设置禁用

-->

<label>

<input type="checkbox" disabled>吃饭

</label>

</div>

<label>

<input type="checkbox">睡觉

</label>

</div>

<label>

<input type="checkbox">打豆豆

</label>

</div>

<!--

设置内联样式

-->

<input type="checkbox" disabled>睡觉

</label>

<input type="checkbox">打豆豆

</label>

<!--

设置下拉列表

-->

</select>

</form>

<hr/>

<!--校验状态

Has-success:成功状态

Has-error:失败状态

Has-warning:警告状态

添加额外的图标

glyphicon-ok：成功状态

glyphicon-warning-sign：警告状态

glyphicon-remove：错误状态

注意：图标显示在文本框中需要加上.has-feedback和.form-control-feedback

-->

</div>

</div>

</form>

<hr/>

</body>

</html>

按钮

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<button class="btn btn-default">button按钮</button>

<a href="#" class="btn btn-default" role="button">超链接按钮</a>

<br/>

<!--预定义样式、尺寸

样式：btn-default,btn-success,btn-info,btn-warning,btn-danger,btn-primary,

btn-link

尺寸：btn-lg >默认>btn-sm>btn-xs

btn-block:块级按钮（占整行）

-->

<button class="btn btn-primary ">首选项按钮</button>

<button class="btn btn-info btn-xs">一般信息按钮</button>

<button class="btn btn-default btn-block active">激活状态按钮</button>

<button class="btn btn-default btn-block disabled">禁用状态按钮</button>

<a href="#" class="btn btn-default disabled" role="button">禁用超链接按钮</a>

</body>

</html>

图片

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

img{

width:600px;

}

</style>

</head>

<body>

<!--图片 img-thumbnail自带响应式 img-responsive响应式的

.img-rounded:圆角

.img-circle：圆

.img-thumbnail：缩略图

-->

</body>

</html>

辅助类

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

img{

width:600px;

}

.crd{

width:200px;

}

</style>

</head>

<body>

<p class="text-info">一般文

打赏

微信扫一扫

只需10秒 PS制作全景图

全景图一度成为各相机app的装逼不二法宝，今天本宝宝来教你，如何用ps十秒钟制作全景图，动次打次，动起来。教程结束，以上就是ps制作全景... [阅读全文]
设计模式之原型模式

找工作时我们经常需要复印几份相同的简历。如果用编程来实现就是简单的复制粘贴，我们觉得很理所当然。可以看出我们需要几份简历就需要实例化几次。如果写错... [阅读全文]
遗忘的html标签

<sup> 标签可定义上标文本。包含在 <sup> 标签和其结束标签 </sup> 中的内容将会以当前文本流中... [阅读全文]
fork/join 全面剖析

fork/join作为一个并发框架在jdk7的时候就加入到了我们的java并发包java.util.concurrent中，并且在java 8 的l... [阅读全文]
Android ConstraintLayout 布局警告

使用 ConstraintLayout 布局出现警告：此视图不受垂直约束。在运行时，除非添加垂直约束，否则它将跳转到左侧解决办法：从... [阅读全文]

发表评论


验证码：

上一篇： html5+css3之动画在webapp中的应用

下一篇： MySQL Innodb索引机制详细介绍

Bootstrap

一、Bootstrap简介

1、Bootstrap是什么？

2、特点

二、起步

下载Bootstrap

准备

基本模板

栅格系统

列偏移、列排序、列嵌套

排版样式

代码样式

表格

表单

按钮

图片

辅助类

相关文章:

发表评论

Bootstrap导航简单实现代码

Bootstrap优秀模板-Unify.2.6.2

Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法

BootStrap表单验证实例代码

bootstrap网格系统使用方法解析

bootstrap按钮插件（Button）使用方法解析

集成vue到jquery/bootstrap项目的方法

Bootstrap警告框（Alert）插件使用方法

Bootstrap标签页（Tab）插件使用方法

Bootstrap学习笔记轮播（Carousel）插件

Bootstrap

一、Bootstrap简介

1、Bootstrap是什么？

2、特点

二、起步

下载Bootstrap

准备

基本模板

栅格系统

列偏移、列排序、列嵌套

排版样式

代码样式

表格

表单

按钮

图片

辅助类

相关文章:

发表评论

Bootstrap导航简单实现代码

Bootstrap优秀模板-Unify.2.6.2

Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法

BootStrap表单验证实例代码

bootstrap网格系统使用方法解析

bootstrap按钮插件（Button）使用方法解析

集成vue到jquery/bootstrap项目的方法

Bootstrap警告框（Alert）插件使用方法

Bootstrap标签页（Tab）插件使用方法

Bootstrap学习笔记 轮播（Carousel）插件

Bootstrap学习笔记轮播（Carousel）插件