bootstrap入门指引

（1）强调类名

(2)对齐类名

例

效果如下

3)改变文本字体的大小写

4）列表类名

默认情况下，bootstrap中的无序列表和有序列表带有项目符号，利用类.list-unstyled去除项目符号

类名.list-inlinc用来实现内联列表，也就是将垂直列表幻城水平列表，并去掉项目符号，保持水平显示，其为制作水平导航而生

定义列表，bootstrap没有太大的调整，只是调整了行间距，外边距和字体效果

水平定义列表就像内联列表一样，bootstrap添加类.dl-horizontal即可，但是只有在屏幕大于768px的时候才有效

引用

表格式Bootstrap中的一个基础组件之一，bootstrap为表格设置了一种基础样式和四种附加样式以及一个响应式的表格

bootstrap还为tr提供了5种不同的类名

传送门：中文

传送门：英文

入门标准很简单

就一条：达到能参与Web前端实际项目的开发水平。请注意，是实际项目，这就需要了解如今的实际项目开发都用了哪些技术栈。HTML/CSS/JavaScript这三大基础技术栈肯定是需要掌握的，但要能参与实际项目开发，肯定还要掌握其他一些主流的框架体系。

几年前，?jQuery+Bootstrap?可以说是一统江湖，是前端领域的绝对霸主。而这几年，随着?Angular、React、Vue?等框架的兴起，变成了百家争鸣的局面。这几年，Web前端的技术发展真是太快了，相应地，技术栈也就变得非常多，除了最基本的HTML/CSS/JavaScript，以及?Vue/React/Angular?等这些JavaScript框架和各自的生态体系，还有CSS预处理器?Sass/Less/Stylus，还有?TypeScript，还有?grunt/webpack/gulp?等各种打包构建工具，还有其他一大堆技术栈。

这么多技术栈，我们不可能全都掌握，就算是资深的前端工程师，也只是精通其中一部分，比如，有些精通Angular，有些掌握React，有些则熟悉Vue，很少有人对三种框架生态体系都非常了解。因此，我们入门也没必要每种框架都学习，只要挑选一种就够了。而且，作为全栈，我们学习一门技术更重要的是要学习技术背后的编程思想、设计思想、架构思想等。而不管是Angular、React还是Vuew，其背后的核心设计思想都是组件化的设计，因此只要掌握一种框架，我们也就能学习到前端技术的核心思想了。

那么，我们应该学哪种框架体系呢？我的建议是从Vue开始，因为Vue的学习成本是最低的，入门简单，而且这两年Vue可以说是出现了爆发式的增长，已经直逼React。React的主要学习成本在于要掌握JSX语法，而且文档还大多都是英文。Vue因为是国人开发和维护的，自然对国内的开发者更友好。Angular则是个大而全的框架，显得太重，学习成本自然最高。至于jQuery+Bootstrap这套，已经过时了，建议没必要去学习了，毕竟我们的时间很宝贵，还有一大堆更有价值的东西等着我们去学。

因此，我们要入门Web前端开发的话，除了要学习HTML/CSS/JavaScript三大基础技术栈，还要了解Vue体系。而Vue体系，除了Vue框架本身，还包括其他技术栈。

下方是学习前端开发的学习路线：

9个流行的、强大的前端开源框架，帮助你轻松构建漂亮的网站前端。

1、Bootstrap

Bootstrap无疑是最流行的CSS框架，它是最早的Web前端框架，由Twitter开发。Bootstrap还提供了许多示例来帮助你入门。

2、PatternFly

PatternFly是RedHat的开源CSS框架，和Bootstrap不同的是，Bootstrap是为那些想要创建漂亮网站的人而设计的，而PatternFly主要专注于企业应用程序开发人员，提供诸如条形图、图表、导航之类的组件，实际上RedHat就是使用它创建了OpenShift。

3、MaterialComponentsfortheweb

MaterialComponentsfortheweb(MDCWeb)，是谷歌专为Web设计的全新前端框架。MDCWeb可帮助开发人员执行MaterialDesign，组件由谷歌的核心工程师团队和UX设计人员开发。这些组件可以建立可靠的开发工作流程，以构建美观且功能强大的Web项目。

4、Pure

Bootstrap，Patternfly和MDCWeb是功能非常强大的CSS框架，但它们可能非常繁琐和复杂。如果你想要一个轻量级的CSS框架，可以尝试Pure.css，它本身更接近于CSS编程，但又可以帮助你构建一个不错的网页。Pure是具有最小占用空间的轻量级CSS框架，它由Yahoo开发，根据BSD许可是开源的。

5、Foundation

Foundation声称是世界上最先进的响应式前端框架。它提供了用于构建专业网站的高级功能和教程。许多公司，组织都使用该框架，并且该框架具有大量可用的文档。

6、Bulma

Bulma是一个基于Flexbox的开源框架，可根据MIT许可证开源。Bulma是一个非常轻量级的框架，因为它只需要一个CSS文件。Bulma拥有简洁明了的文档，可轻松选择你想要的主题。它还具有许多Web组件，你可以在设计中使用它们。

7、Skeleton

如果说还有什么框架比Pure更加轻量级，那一定是Skeleton。Skeleton库只有大约400行，并且该框架仅提供一些基本的CSS框架组件。尽管如此，Skeleton还是提供了详细的文档来帮助你快速上手。

8、Materialize

Materialize是一个基于MaterialDesign风格的一个现代化的响应式前端框架，解决了最繁重的工作，结合你的自定义组件，为你提供默认的样式。Materialize的文档页面非常全面，并且很容易遵循。其组件页面包括按钮，卡片，导航等。

9、Bootflat

Bootflat是从Twitter的Bootstrap派生的开源CSS框架。与Bootstrap相比，Bootflat更简单，并且更加轻量级。Bootflat的文档似乎几乎受到了IKEA的启发，大部分都是图像，没有太多的文字。

实现原理栅格系统是Bootstrap中的核心，正是因为栅格系统的存在，Bootstrap才能有着如此强大的响应式布局方案。下面是官方文档中的解说：Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局。我们来理解一下这一段话，可以发现其中最重要的部分就是移动设备优先，那么什么是移动设备优先呢？Bootstrap的基础CSS代码默认从小屏幕设备（比如移动设备、平板电脑）开始，然后使用媒体查询扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格。有着如下策略：内容：决定什么是最重要的。布局：优先设计更小的宽度。渐进增强：随着屏幕大小增加而添加元素。工作原理数据行（.row）必须包含在容器.container（固定宽度）或.container-fluid（100%宽度）中，以便为其赋予合适的排列（aligment）和内填充（padding）。如：divclass="container"!--水平居中，两边有margin，最小屏幕时，充满父元素--divclass="row"/div/div!--或者--divclass="container-fluid"!--默认一直充满整个父元素--divclass="row"/div/div在数据行（.row)中可以添加列（column），但列数之和不能超过平分的总列数（在超过时，多余部分会换行显示），默认12。（使用Less或者Sass可以进行自定义设置）如：divclass="container"divclass="row"divclass="col-md-2"/divdivclass="col-md-6"/divdivclass="col-md-4"/div页面上的具体内容应当放置于列（column）内，并且只有列（column）可以作为数据行.row容器的直接子元素。预定义的网格类，比如.row和.col-xs-4，可用于快速创建网格布局。栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。注意事项：正如上面在注释部分所展现的一样的.container（固定宽度）是固定宽度的布局方式。通过查看源码，在查看.container类的时候我们会发现，它的宽度是响应式的：（如下）.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;}@media(min-width:768px){.container{width:750px;}}@media(min-width:992px){.container{width:970px;}}/*........*/从上面的css代码可以看到，该类默认为整个父元素的宽度（最小屏幕），但是在大屏幕下有着不同的宽度，并且在不同宽度下左右margin会同时增加或减少（水平居中）。.container-fluid类就和.container的默认情况一样，为100%宽度。（CSS代码一样）除此之外从源码中我们还可以发现，除了有左右margin外，还可以看到该类是有着左右填充（padding）存在的。如果我们继续查看源码，可以发现数据行.row中的每一个列也有着左右填充（padding）的存在，如下：.col-md-1,.col-lg-12/*......*/{position:relative;min-height:1px;padding-right:15px;padding-left:15px;}看到这里，大家应该都能想到会有什么样的情况出现！我们在第一个和最后一个列因为双填充的存在，实际上对于内容的隔离已经到了30px。我们需要怎么消除影响呢？Bootstrap是通过.rows上的外边距（margin）取负margin-left:-15px;margin-right:-15px;，表示第一列和最后一列的行偏移，用来抵消第一个列的左内距和最后一列的右内距。基本用法bootstrap3.x使用了四种栅格选项来形成栅格系统，这四种选项在官网上的介绍如下图，很多人不理解，这里跟大家详解一下四种栅格选项之间的区别，其实区别只有一条就是适合不同尺寸的屏幕设备。我们看class前缀这一项，我们姑且以前缀命名这四种栅格选项，他们分别是col-xs、col-sm、col-md、col-lg，我们懂英文的就知道，lg是large的缩写，md是mid的缩写，sm是small的缩写，xs是***的缩写。这样命名就体现了这几种class适应的屏幕宽度不同。下面我们分别介绍这几种class的特点。通过下表可以详细查看Bootstrap的栅格系统如何在多种屏幕设备上工作的。通过源码可以发现，如下：.col-md-1/*......*/{float:left;}/*所有的列都是默认向左浮动的*/.col-md-1{width:8.33333333%;}.col-md-2{width:16.66666667%;}/*.....*/.col-md-12{width:100%;}从这些CSS代码也就不难发现，Bootstrap中每一列所占的宽度，以及为何在列数设置超过12时，超过部分会换行显示了。在下面所有的示例中每一列的背景颜色与边框的效果由如下CSS代码控制：[class*=col-]{background-color:#eee;border:1pxsolid#ccc;}基础那么我们就来看看一些示例吧，下面这种方式是最基本的用法：divclass="container"divclass="row"divclass="col-md-6".col-md-6/divdivclass="col-md-6".col-md-6/div/divdivclass="row"divclass="col-md-4".col-md-4/divdivclass="col-md-4".col-md-4/divdivclass="col-md-4".col-md-4/div/divdivclass="row"divclass="col-md-2".col-md-2/divdivclass="col-md-6".col-md-6/divdivclass="col-md-4".col-md-4/div/div/div实现的效果如下：Bootstrap作为一个响应式框架当然不会只有那么简单的功能，我们继续往下走吧！列偏移在某些情况下，我们不希望相邻的列紧靠在一起，如果你希望不通过额外的margin或其他的手段来实现的话，Bootstrap内置为我们提供了列偏移（offset），这一系列的类来帮助我们实现想要的效果。只需要给需要偏移的列元素上添加类名col-md-offset-*(星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。这些类实际是通过使用*选择器为当前元素增加了左侧的边距（margin）。例如：在列元素中添加.col-md-offset-6类将.col-md-6元素向右侧偏移了6个列（column）的宽度。现在我们的代码是这样的：divclass="container"divclass="row"divclass="col-md-2"col-md-8/divdivclass="col-md-3col-md-offset-2"col-md-4col-md-offset-2/divdivclass="col-md-4col-md-offset-1"col-md-4col-md-offset-1/div/divpbr/pdivclass="row"divclass="col-md-4"col-md-4/divdivclass="col-md-3col-md-offset-4"col-md-3col-md-offset-4/divdivclass="col-md-4col-md-offset-4"col-md-4col-md-offset-4/div/div/div可以实现的效果如下：从实现的效果我们就能发现一些东西，注意第二段的显示效果与代码，从那里我们可以发现：使用col-md-offset-*对列进行向右偏移时，要保证列与偏移列的总数不超过12，不然会致列断行显示。其实原因也很简单：因为该类是对于列设置margin-left，并且我们在上面的源码展示中，也可以看有每一列都有着float:left的属性，从这些地方我们就不难发现在（偏移+列宽）超过12时，为何会换行显示了列排序列排序其实就是改变列的方向（顺序），就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名col-md-push-*和col-md-pull-*(和上面一样，星号代表移动的列组合数)。Bootstrap仅通过设置left和right来实现定位效果。通过查看源码，我们可以看到基本设置比较简单，如下：.col-md-pull-12{right:100%;}/*...*/.col-md-push-1{left:8.33333333%;}.col-md-push-0{left:auto;}还是继续看看我们的实际效果吧！代码如下divclass="container"divclass="row"divclass="col-md-4col-md-push-8".col-md-4col-md-push-8/divdivclass="col-md-8col-md-pull-4".col-md-8col-md-pull-4/div/divdivclass="row"divclass="col-md-4".col-md-4默认/divdivclass="col-md-8".col-md-8默认/div/div/div我们可以发现列的位置已经发生了改变列嵌套Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（.row）容器，然后在这个行容器中插入列（像前面介绍的一样使用列）。但在列容器中的行容器（.row），宽度为100%时，就是当前外部列的宽度。（其实就是在列中嵌套多个列，下面会有实际效果展示）注意：被嵌套的行（.row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列-_-）。我们现在有这样一个需求：创建一个8-4列网格。（备注：以中屏md（970px）为例）。在第一个8列网格中插入8-4列网格。在第二个4列网格中插入9-3列网格。效果如下：该如何实现呢？divclass="container"divclass="row"divclass="col-md-8"我的里面嵌套了一个网格divclass="row"divclass="col-md-8"col-md-8/divdivclass="col-md-4"col-md-4/div/div/divdivclass="col-md-4"我的里面嵌套了一个网格divclass="row"divclass="col-md-9"col-md-9/divdivclass="col-md-3"col-md-3/div/div/div/div/div是不是很简单呢？当然为了完全实现和效果图一样的展示，我们还需要对CSS进行一些添加：[class*=col-][class*=col-]{background-color:#f36;border:1pxdashed#fff;color:#fff;}以上所述是小编给大家分享的Bootstrap入门书籍之（三）栅格系统，希望对大家有所帮助！

bootstrap入门?
1、Bootstrap Bootstrap无疑是最流行的CSS框架,它是最早的Web前端框架,由Twitter开发。Bootstrap还提供了许多示例来帮助你入门。 2、PatternFly PatternFly是RedHat的开源CSS框架,和Bootstrap不同的是,Bootstrap是为那些想要创建漂亮网站的人而设计的,而PatternFly主要专注于企业应用程序开发人员,提供诸如条形图、图表、导...

开心档-软件开发入门之Bootstrap4 信息提示框
Bootstrap4 提供了简洁且灵活的信息提示框功能，实现方法简单易懂。创建信息提示框时，只需使用.alert类，并结合其他颜色类如.alert-success、.alert-info、.alert-warning、.alert-danger、.alert-primary、.alert-secondary、.alert-light或.alert-dark，即可轻松定制提示框样式。例如，要添加链接至提示框...

前端入门篇(一):如何把设计稿还原成真实网页
前端工程师在入门时，首要任务之一就是将设计稿转化为实际的网页。这一过程涉及多方面技能，包括HTML、CSS、JS、Vue、jQuery以及Bootstrap等技术。HTML，即超文本标记语言，是构建网页的基础。它通过一系列标签和属性描述网页结构，如标题、段落、图片、链接等。CSS，即层叠样式表，用于控制网页的布局、颜色...

eBPF 入门开发实践教程十一:使用 libbpf 开发用户态程序并跟踪 exec...
在开发实践中，Bootstrap是一个核心示例，它利用libbpf跟踪exec()和exit()，记录新进程的创建和退出信息。Bootstrap分为两个部分：内核态eBPF程序（如bootstrap.bpf.c）和用户态C程序。内核态部分监控系统调用，用户态部分负责加载和处理收集的数据。内核态eBPF程序通过handle_exec和handle_exit两个函数，...

React 前端开发需要了解的 10 个库(入门必备)
React Bootstrap是Bootstrap的React实现，提供预构建的组件和样式，使开发者能快速构建响应式和一致的用户界面。支持与Bootstrap 4或5兼容的CSS类和组件，也支持主题自定义和扩展。综上所述，通过结合这些库，开发者能显著提高开发效率和代码质量，创建功能齐全、性能优越且用户友好的Web应用。这些库在处理...

eBPF 入门开发实践教程十一:使用 libbpf 开发用户态程序并跟踪 exec...
Bootstrap由内核态的eBPF程序（如bootstrap.bpf.c）和用户态的C程序（bootstrap.c）组成。内核态程序监控系统调用，将数据发送给用户态程序处理，而用户态程序负责加载、验证和解析这些数据。要尝试此类开发，开发者需要安装必要的依赖，如clang、libelf和zlib。教程代码可在eunomia-bpf的官方文档和GitHub仓库...

学习web前端需要了解的几个主流框架
1、Bootstrap Bootstrap是最流行的前端开发框架，可以让不是前端工程师也能开发出优美的页面，更加快捷、方便的开发web页面和移动端应用。也能开发响应式web页面，上手也非常快。中文 2.React React是Facebook 开发的框架，用于构建页面、javascript库。主要功能是对DOM操作，声明式设计，更快的开发出web...

vue、elementui、bootstrap、react等等这些有啥区别?
Vue 以其简洁的语法和易于学习的特性，适合新手入门，同时能够满足复杂项目的需求。React 则以其强大的性能优化能力和组件化优势，适合大型应用的开发。ElementUI 作为 Vue 的组件库，能够快速构建美观且一致的界面，适合使用 Vue 的项目。Bootstrap 则以其简洁的 CSS 类和强大的响应式设计能力，适合快速...

本科生如何系统地学习前端开发?
4. HTML5入门 HTML5引入了多种新特性，如音频、视频、Canvas等，学习HTML5可以帮助你构建更丰富、功能更强大的网页。5. jQuery基础入门 jQuery是一个轻量级的JavaScript库，它简化了DOM操作，提高开发效率。学会使用jQuery可以加速前端开发过程。6. Bootstrap3.0入门 Bootstrap是流行的前端框架，它提供了...

bootstrap4教程?
如何学习bootstrap框架 全局样式 1 Bootstrap中用到一些HTML元素和CSS属性需要将页面设置为HTML5文档类型,即在页面顶部添加“!DOCTYPEhtml” 2 布局容器:Bootstrap需要为页面内容和栅格系统包裹一个.container或container-fluid(占据全部视口viewport的容器)容器。 3 栅格系统,Bootstrap提供了一套最多12列的流式栅格系统...