Bootstrap框架基础入门

Bootstrap 介绍
Bootstrap 是非常流行的前端框架。特点是：灵活简洁、代码优雅、美观大方。它是由Twitter的两名工程师 Mark Otto 和 Jacob Thornton 在2011年开发的。

简单来说，Bootstrap 让 Web 开发更简单、更快捷。使用 Bootstrap 框架并不代表我们再开发时不用自己写 CSS 样式，而是不用谢绝大多数常见的样式。

官网网站

官方网站：https://getbootstrap.com/
中文网站：http://www.bootcss.com/

列举几个用 Bootstrap 做的网站：

Bootstrap 优站精选
https://mobirise.com/
http://snappa.io/

Bootstrap 浏览器/设备支持
Bootstrap 可以在最新的桌面系统和移动端浏览器中很好的工作。
旧的浏览器可能无法很好的支持。
下表为 Bootstrap 支持最新版本的浏览器和平台：
* Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器。

一、栅格系统

栅格系统的工作原理：

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

通过“行（row）”在水平方向创建一组“列（column）”。

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

类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin也可以用来创建语义化的布局。

通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container
元素设置的padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。

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

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

栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-*
不存在，也影响大屏幕设备。

媒体查询：
媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。
Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。下面的媒体查询在 LESS 文件中使用，用来创建 Bootstrap网格系统中的关键的分界点阈值。
   /* 超小屏幕（手机，小于 768px） *//* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） *//* 小屏幕（平板，大于等于 768px） */@media (min-width: @screen-sm-min) { ... }    /* 中等屏幕（桌面显示器，大于等于 992px） */@media (min-width: @screen-md-min) { ... }/* 大屏幕（大桌面显示器，大于等于 1200px） */@media (min-width: @screen-lg-min) { ... }
有时候也会在媒体查询代码中包含 max-width，从而将 CSS 的影响限制在更小范围的屏幕大小之内。
@media (max-width: @screen-xs-max) { ... }
@media (min-width:@screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
媒体查询有两个部分，先是一个设备规范，然后是一个大小规则。在上面的案例中，设置了下列的规则：
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
对于所有带有 min-width: @screen-sm-min 的设备，如果屏幕的宽度小于 @screen-sm-max，则会进行一些处理。
栅格参数：
下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

二、Bootstrap 排版

标题：

HTML 中的所有标题标签，h1 到 h6 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。
  <h1>我是标题1 h1</h1> <h2>我是标题2 h2</h2> <h3>我是标题3 h3</h3><h4>我是标题4 h4</h4><h5>我是标题5 h5</h5> <h6>我是标题6 h6</h6>
在标题内还可以包含标签或赋予 .small 类的元素，可以用来标记副标题。
如果需要向任何标题添加一个内联子标题，只需要简单地在元素两旁添加，或者添加 .small class，这样子您就能得到一个字号更小的颜色更浅的文本，如下面实例所示：
<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>
<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>
页面主体：Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予
body 元素和所有段落元素。另外，p （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

列表：
Bootstrap 支持有序列表、无序列表和定义列表。

有序列表：有序列表是指以数字或其他有序字符开头的列表。

无序列表：无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。如果您不想显示这些着重号，您可以使用 class .list-unstyled 来移除样式。您也可以通过使用 class .list-inline 把所有的列表项放在同一行中。

定义列表：在这种类型的列表中，每个列表项可以包含 dt 和 dd 元素。dt 代表定义术语，就像字典，这是被定义的属于（或短语）。接着，dd 是 dt 的描述。您可以使用 class dl-horizontal 把 dl 行中的属于与描述并排显示。

下面的实例演示了这些类型的列表：
  <h4>有序列表</h4><ol><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li></ol><h4>无序列表</h4><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li></ul><h4>未定义样式列表</h4><ul class="list-unstyled"><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li></ul><h4>内联列表</h4><ul class="list-inline"><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li></ul><h4>定义列表</h4><dl><dt>Description 1</dt><dd>Item 1</dd><dt>Description 2</dt><dd>Item 2</dd></dl><h4>水平的定义列表</h4><dl class="dl-horizontal"><dt>Description 1</dt><dd>Item 1</dd><dt>Description 2</dt><dd>Item 2</dd></dl>
运行结果如下：

这里只是列举一下部分的css样式使用方法，如想了解更多，点击官网进行查看，最后希望大家都能学会好用的Bootstrap。

Bootstrap框架基础入门相关推荐

bootstrap框架基础使用
bootstrap框架基础使用 bootstrap简介 bootstrap引入和使用网络引用本地引用 bootstrap基础 bootstrap组成 bootstrap组件 bootstrap简介 ...
python web开发 Bootstrap框架基础
文章目录 1. 安装 2. Bootstrap 5 基本应用 learning from <python web开发从入门到精通> Bootstrap 是最受欢迎的前端组件库,用于 HT ...
Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇除了HTML提供的三种基本列表样式: 无序列表 <ul><li>-& ...
Flask框架基础入门教程
文章目录前言 Flask 基础概念和安装 Flask 快速入门小应用 Flask 之模板的使用后续,待更新.... 前言最近开始学习flask 框架,本文用于flask 框架的基础入门学习,版本 ...
bootstrap框架基础知识点整理
bootstrap框架基本模板及代码注释视口设置布局容器布局容器之container 布局容器2---container-fluid 栅格系统栅格系统的特点和案例注意点栅格屏幕尺寸设置- ...
IDEA中导入Bootstrap框架及入门教程
BootStrap简介概念: 一个前端开发的框架.Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML.CSS.JavaScript 开 ...
Bootstrap框架菜鸟入门教程
Bootstrap菜鸟入门教程 Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简 ...
《Activiti工作流框架》专题(一)-Activiti工作流框架基础入门
文章目录 1. 工作流简述 1.1.工作流是什么 1.2.哪些行业需要工作流 1.3.工作流系统的使用 2.常见的工作流框架 3.Activti的历史简介 4.重要的名词解释 4.1.工作流引擎 4. ...
【博学谷学习记录】超强总结,用心分享丨前端开发:BootStrap框架基础用法
BootStrap 1.BootStrap简介 Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架,它提供了大量编写好的 CSS 样式,允许开发者结合一定HTML 结构及Java ...

Bootstrap框架基础入门

Bootstrap框架基础入门相关推荐

最新文章

热门文章