bootstrap代码高亮（bootstrap鼠标高亮）

今天给各位分享bootstrap代码高亮的知识，其中也会对bootstrap鼠标高亮进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、Bootstrap有好的前台和后台管理的框架吗
• 2、如何定制Bootstrap
• 3、bootstrap用什么编辑器
• 4、bootstrap使用方法
• 5、bootstrap怎么让页面对应的分页按钮显示高亮
• 6、如何修改bootstrap样式

Bootstrap有好的前台和后台管理的框架吗

使用这些前端框架，有如下好处：

跨浏览器。这一点已被证实。

一致性。UI组件，如导航、按钮、标签、表单、下拉框、表格……，在设计上保持风格一致。

快速开发。你可以快速、容易地构建布局。这些框架都配有详细的说明文档。

响应式。所有CSS组件及JavaScript插件可以很好地从桌面过渡到移动设备上。

InK

Ink为一个界面工具包，用于快速开发Web界面，具有易于使用、易于扩展特点。它可以为构建布局提供解决方案，可以展示普通的界面元素，可以实现以内容为中心、对用户友好的交互方式。

HTMLCSS：布局、导航、排版、图标、表单、提示框、表格

JS：Gallery、表格、树视图、排序列表、日期选择插件、制表符、表单验证及一些行为（停靠、折叠、关闭）

其他：Sass Mixins

GroundworkCSS Beta

GroundworkCSS是一个基于Sass预处理器的开源项目 ，主要用于快速构建响应式Web应用程序。拥有一个灵活的、可嵌套的网格系统，可以创建适应多种浏览设备的布局。GroundworkCSS还提供多种UI 组件，如导航、按钮、图标、表单、Tabs、对话框、工具提示等等。

HTMLCSS：网格、布局、排版、按键、标题、表单、图标、社交图标、响应式文本、对话框、工具提示

JS：导航、制表符（Tab）、提示框、Cycle2

其他：Sass Mixins

Ivory

这是一个灵活、强大的响应式Web框架，使Web开发更快速、更简单。

HTMLCSS：网格、排版、表单、按钮、提示框、页码、面包屑导航（breadcrumb）、列表、表格

JS：提示框、制表符（Tab）、切换开关（Toggle switch）、折叠

ZURB

Foundation由ZURB公司设计，ZURB是一家产品设计公司，位于加州坎贝尔。Foundation为最先进的响应式前端开发框架，它拥有很多布局模板、CSS样式表及自己开发的优秀JavaScript插件。

HTMLCSS：网格、布局模板、图标字体、响应式表格、SVG格式的社交图标、页码、面包屑导航（breadcrumbs）、侧导航、按键、排版、标签、提示框、面板、价格表、进度栏、表格、缩略图

JS：下拉按钮、拆分按钮、转换开关、Flex视频、灯箱、下拉、响应式布局（通过转换图片大小来实现）、旅游导航、麦哲伦全局导航（Magellan Sticky Nav）、Orbit图片滑动幻灯片插件等

其他：可定制皮肤表单（Custom Skinned Forms）、SCSS Mixin

Grumby

Gumby 2基于Sass开发。Sass为功能强大的CSS预处理器，利用它可以快速开发Gumby。

HTMLCSS：网格、表单、按钮、导航、标签、Entypo图标

JS：下拉、浮窗、制表符（Tab）、开关与转换（Toggles Switches）

其他：可定制皮肤表单（Custom Skinned Forms）、SASS和Compass

HTML KickStart

该框架集合了HTML5、CSS和JavaScript，帮助开发人员快速开发Web产品。它覆盖了所有UI组件，同时也包含一些有用的JavaScript插件。

HTMLCSS：网格、排版按钮、列表、表格、图标、面包屑导航、图片、表单

JS：菜单、代码高亮插件、制表符（Tab）、幻灯片播放、表单验证

其他：CSS帮助文档

Maxmertkit

Maxmertkit拥有完整的文档，包含大量实例，并且提供了拖拽生成代码的功能。

HTMLCSS：网格、布局、徽章、按钮、表单、图标、标签、菜单、进度栏、表格、下拉、工具提示

JS：按钮、旋转木马、通知、弹出框、滚动条、制表符（Tab）

其他： Sass、Coffee脚本语言

Twitter Bootstrap

大家对Twitter Bootstrap已十分熟悉了。凭借全面的UI组件、易用的网格和组件，Bootstrap已成为众多设计者和开发者最喜欢的快速开发工具。现在已经有很多第三方Bootstrap程序和JavaScript插件可供使用。

HTMLCSS：网格、布局、排版、编码、表格、表单、按键、图片、图标、按钮组、导航、面包屑导航、页码、标签、徽章、缩略图、提示框、进度栏

JS：模态窗口（Modals）、提示效果（Tool Tips）、“泡芙”效果（Popovers）、滚动监控（Scrollspy）、旋转木马（Carousel）、输入提示（Typeahead）等等。

其他：定制器（Customizer）、 LESS CSS

Skeleton

Skeleton 是一个小的JS和CSS文件集合，可帮你快速开发漂亮的网站，适合各种屏幕设备，包括手机。Skeleton基于960 Grid开发，是一个UI框架。

HTMLCSS：GRid、排版、按钮、表单、媒体查询（Media Queries）

Kube

Kube是一款最小化的，支持响应式的前端框架，包括一个简洁的CSS文件，用于方便地创建响应式布局，包括了两个JS文件来完成Tab以及页面的按钮操作。

HTMLCSS：排版、网格、表单、表格、按钮、导航、图标

JS：按钮、制表符（Tab）

其他： LESS CSS

Helium

Helium是一个前端响应式Web框架，使用HTML5、CSS3快速制作原型以及开发产品。Helium很像Twitter Bootstrap和ZURB Foundation，事实上，Helium使用了两者不少的代码。但与这两个框架不同的是，Helium设计更加轻量级，而且更容易修改。Helium只有30KB左右，而Bootstrap有100KB，ZURB有200多KB。

HTMLCSS：网格、按钮、排版、表单

JS：下拉、表单验证

其他：Sass、Compass

The Markup Framework

Markup是一套集布局、小组件、UI组件和字体排版样式为一体的框架。它可以作为你设计自己网站的起点。

HTMLCSS：布局、网格、排版、表单、按钮、面包屑导航、导航列表、导航菜单

JS：没有JavaScripts，只有单纯的CSS

Topcoat

TopCoat是一套免费的开源UI元素类库，整套类库不使用任何JavaScript，而是使用CSS和HTML来生成。

HTMLCSS：图标、字体、按键、面包屑导航、表单、下拉、滑动开关、选择、滚动条、切换按钮

JS：没有JavaScripts，只有单纯的CSS

PureCSS

Pure是一个相当小的框架，压缩及最小化后仅有5.7KB。它没有使用任何JavaScript，只是HTML和CSS。该CSS框架为响应式布局，采用模块化结构，每个模块的样式可以单独使用。

HTMLCSS：网格、排版、表单、按键、表格、菜单

JS：没有JavaScripts，只有单纯的CSS

其他：程序皮肤制作工具（Skin Builder）、YU 库。

结论

根据你的需要，选择可以与设计相匹配的框架。我们不应该根据框架来构建网站，因为它会很大程度上限制设计者的思维。

如何定制Bootstrap

bootstrap已经作为前端开发必不可少的框架之一，应用bootstrap使得我们对布局、样式的设定变得非常简单。

但bootstrap提供的默认样式往往不能满足我们的需求，从而定制化bootstrap成为我们经常需要做的工作，本文就如何更高效更可维护地定制bootstrap做一下探讨。

如下图，在你的button 中加入bootstrap的class: btn btn-primary,就可以将默认的button（左边）变成右边的样式。

可如果我们想应用自己的样式呢？比如我们想要拥有圆角的button。

通常，我们可以直接覆盖bootstrap的样式。

我们在自己的项目目录下新建my-custom.css文件，加入如下代码：

.btn { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;}

将my-custom.css文件引用放到bootstrap.css文件后面，我们定义的btn样式就会覆盖原有的样式（注：这里的‘覆盖’指的是增量叠加式的覆盖）。

link rel="stylesheet" href="boostrap.css"link rel="stylesheet" href="my-custom.css"

但这种方法有它的优缺点，

优点：不会改变你的工作流程。你可以快速直接修改你的样式，即使是你的网站引用了其他的类似bootstrap的框架样式，你都可以在同一个地方进行统一的定制。

缺点：但是对于更彻底的修改(比如重新设计导航栏)或是非局部的修改(比如修改适用于整个网站的高亮颜色)来说，这样东一块，西一块的覆盖样式更像是一种打补丁式的解决方案。而且你的新样式要添加到Bootstrap的默认样式表里，让本已经100 KB的文件越发臃肿。如果你不仅仅想要做一些覆盖，那就要考虑一种更具扩展性的方法了。

另一种方法是生成一个自定义构建的bootstrap。

我们可以使用官方的构建器，你可以对bootstrap中样式变量进行自定义。如下图所示：

bootstrap 是基于less定制的，如果你不熟悉less语法，建议到其官网（）学习一下，很简单，了解并学会使用它用不了多长时间。

定制好你的变量后点击download按钮就会生成一套属于你的bootstrap框架了。同时，网上还有很多类似定制bootstrap的网站，如果你不习惯官网的可以去这其它的网站试试，比如Bootswatchr网站使用变量来组织，而StyleBootstrap则使用组件。BootTheme添加了扔骰子特性来随机设置值。如果幸运女神不站在你这边，Lavish能够根据你提供的任何图片来生成一个主题，PaintStrap则是根据已有的配色方案来生成。

当然，这种方法也有它的优缺点，

优点：相比上一种方法，它简便了你对整体网站的修改。

缺点：首先你很难一开始就确定网站所有的样式风格，当然你可以在确定好了后再生成一个最终版本。所以这就引入一个问题，如果你还要时不时更换你的样式，你同样需要找到bootstrap样式源文件编辑，你可能还要用到第一种方法，比如我要使用圆角的带阴影的button，光定制就不能满足我的需求，再者，如果面对bootstrap升级的问题，你还需要重新根据你的样式构建一个新版本的bootstrap，这样要真的做起来，会非常的麻烦。

最后一种方法是深度定制bootstrap less

首先获得bootstrap的源码，

打开源码，你会发现Bootstrap的样式是用LESS而不是CSS写的。LESS 是一种动态样式表语言，相比于CSS，它支持多种优秀特性，包括选择器嵌套，创建变量(就像在上面生成器中使用的)。一旦写完，你可以选择将LESS代码预先或在运行时编译成 CSS。如果你喜欢 Sass，可以使用这个适用于Sass的Bootstrap。

在 less 文件夹中，你会看到许多按照组件来划分的 LESS 文件。

我们打开bootstrap.less文件看看里面写的是什么：

View Code

实际上，bootstrap是通过编译bootstrap.less这一个文件而生成整个bootstrap.css文件的。我们看到bootstrap.less的作用仅仅是引入其他文件。这样，我们定制化的工作就好办了。

以下这些文件是你要注意的：

bootstrap.less:

这个是核心文件。它用来引入其他文件，最终由你来编译它。

reset.less:

始终是最先引入的文件。

variables.less 和 mixins.less:

这两个文件总是同时出现，因为其他文件都依赖于它们。前一个文件包含了在生成器网站上使用的相同的变量。

utilities.less

这个文件总是最后引入，你可以把想要覆盖的类写到这里。

我们定制的思路就是，找到我们需要定制的组件和相对应的变量，对其修改，然后编译成我们自己的bootstrap.css即可。

下面讲讲具体实现方法。

确保你已经安装好Less, 为了不让我们修改的内容与原始文件重合在一起，我们需要模块化的修改。

首先下载bootstrap源码，下载后就不需要对其做任何的改动了。我们单独建立一个文件夹（文件目录只要能引用到bootstrap的less文件就可以），取名为custom-bootstrap，其中包含以下三个文件：

custom-variables.less:

这个文件包含你要定制的变量。

custom-other.less:

这个文件中包含了那些无法通过修改变量完成定制的内容，比如增加或禁用button的text-shandow属性。

custom-bootstrap.less

这是新的「核心」文件。我们将把它编译成CSS。与原始的 LESS文件一样，它使用下面的命令来引入上面那两个自定义文件（记住要保证文件正确的引用顺序）

1 @import "../bootstrap/less/bootstrap.less"; //这个引用到原有的bootstrap文件2 @import "custom-variables.less"; 3 @import "custom-other.less"; 4 @import "../bootstrap/less/utilities.less"; //我们同样要引用原生的utilities.less，因为我们要保证该文件始终最后一个被导入

这时，我们只要编译custom-bootstrap.less就可以了。

有一些需要注意的是，custom-variables.less 不需要拷贝原有文件的所有内容，只需要拷贝和你要定制的组件相关的变量就可以了，如果你这样做了，单独编译custom-variables.less或custom-other.less会提示缺少变量定义的错误，但这没关系，你只要保证编译custom-bootstrap.less没有错误就可以了。

这种方法的优点在于，将定制的变化与原有库代码很好的隔离，却又不失可维护性。即使今后升级bootstrap版本，我们也不要担心重新构建样式框架了。

bootstrap用什么编辑器

以下是 15 款最好的 Bootstrap 编辑器或者是在线编辑工具。

1. Bootstrap Magic

这是一个 Bootstrap 主题生成器，使用最新的 Bootstrap 3 版本和 Angular JS 版本，提供一个鲜活的用户修改预览。它包括了各种各样的导入，一个颜色选择器和智能的预先输入。更神奇的是，Bootstrap 会根据用户的每个选择来重新简历框架，方便用户的下载和使用。

2. BootSwatchr

BootSwatchr 是由 Drew Strickiand 独立开发和维护的，是唯一支持从右到左语言显示的 Bootstrap 自定义构建工具，这也是它的特色之一。BootSwatchr 是个可视化的工具，可以从底层开始创建 Bootstrap 主题。

3. Bootstrap Live Editor

Bootstrap Live Editor 是个所见即所得的构建 Bootstrap 的编辑器。在 Bootstrap 准备好的内容和代码片段的基础上提供一个又好又优雅的方法来编辑和美化 html，也因此它是个明智的选择。除此之外，它还包括高级的选项比如按钮配置，自定义标签和为用户做最明智最有益的选择。

4. Fancy Boot

Fancyboot 是个非常有用的 Bootstrap 自定义工具，允许用户编辑 Bootstrap 的配置，自动预览他们的修改结果。通过滑动菜单可以选择需要使用的插件和组件。当用户做好了相应的修改，可以下载一个包含用户所使用的 jQuery 插件的编译好的和简化后的 CSS 文件。

5. Style Bootstrap

Style Bootstrap 是个非常棒的内置浏览器的 GUI 实用工具，帮助用户自定义 Twitter Bootstrap 外观。它非常容易进行自定义操作。从 body 风格，字体排版，按钮，导航，格式，通知提示和其他用户很容易根据自己的意愿自定义的元素。除了强大的自定义功能，它还可以很容易生成可下载的 CSS 文件。

6. Lavish

Lavish 是个帮助用户从一个图像中定制自己喜欢的 Bootstrap 配色方案。用户可以从图像中选择各种颜色用在 body 背景，链接，头部，菜单，标签，文本，下拉菜单等等元素上。一旦你确定了 Bootstrap 配色方案，就可以很方便的下载相应的 Boostrap.css 文件。

7. Bootstrap ThemeRoller

Bootstrap ThemeRoller 是个直观的 web 应用程序， 提供一个可视化的界面让用户按照自己的风格创建属于自己的 Bootstrap 主题。有了这个工具，用户可以自定义颜色，大小，字体，格式，表，按钮，警告信息，导航条，菜单等等元素。 这个应用还会帮用户创建的每种风格都生成唯一的一个 URL ，这样就可以保存用户所有的设置。更不可思议的是，当用户离开的时候，用户可以停止或者恢复自己定制的页面。

8. LayoutIt!

LayoutIt！拥有拖拽接口的功能，能简单迅速的构建一个 Bootstrap 前端代码。LayoutIt！ 兼容任何的编程语言，允许用户下载 HTML ，在这里自由的进行编码设计。

9. Pingendo

Pingendo 是个可视化的桌面应用程序，允许用户给予流行的 Twitter Bootstrap 框架创建响应式 web 页面原型。Pingendo 还提供大量的现成的布局，拖拽元素的位置，调整大小和自定义的功能。用户可以自行优化他们的页面，插入他们自己的内容。

10. Kickstrap

Kickstrap 是个 Bootstrap UI 编辑器，使用 Firebase 作为一个后台服务。它无缝的接合了 Bootstrap 和顶级的 web 技术。更厉害的是，它可以运行一个已验证的，不需要本地后台支持，数据库驱动的 web 应用。

11. Bootply

Bootply 是一款很棒的 Bootstrap UI 编辑工具，尽可能简单的让用户编辑 Bootstrap 友好的 CSS ，HTML 和 Javascript 。同时也是一个可拖拽的可视化编辑器，用来设计，创建原型和测试 Bootstrap 框架。Bootply 有个代码存储库，里面包括了 Bootstrap 代码片段，示例和模板。除了以上这些，更吸引人的是它有个非常活跃的 Bootply 社区，用户可以很方便的发现，分享和展示相关的代码和片段。

12. X-editable

X-Editable 是一个扩展库，允许用户创建可编辑的元素，比如页面弹出和内联模式。她提供本地的 Bootstrap，jQuery UI 或者是纯 jQuery 编辑功能。此 Bootstrap UI 编辑器拥有许多很强大的功能，包括客户端，服务端验证，支持键盘，live 事件，可定制的容器空间等等。总而言之，它提供非常快速的开发功能，易于删除字段，一个用来更新数据的简简单后台脚本。

13. Jetstrap

不要错误的以为 Jetstrap 只是个简单的实体模型工具，它是 100% 基于 web 接口的 Twitter Bootstrap 构建工具。用户不需要下载任何类型的软件就可以使用 Jetstrap。用户只需要登录，然后构建自己的项目，就可以随时随地进行访问了。构建功能主要是提供给开发者和设计者的，用户很容易就可以通过 Jetstrap 生成漂亮的网站，而且运行速度非常快

14. DivShot

DivShot 是个快速的，可视化的前端开发文本编辑器，跟 mockup 工具一样的简单整洁。包括各种框架需要的各种定制的组件库，这是它提供的最好的工具之一。除此之外还包括了一个主题转换器，允许用户修改主题。试验版本是的，过了试验期就需要自己付费维持原来的服务了。

15. PaintStrap

PaintStrap 使用 Adobe kuler/COLOURlovers 颜色组合来生成漂亮的 Twitter Bootstrap 主题。这个工具特别容易安装，同时很容易下载 CSS 文件并且也很容易替换成另一个标准的文件。

bootstrap使用方法

面板样式是在很多种情况下都可能会使用到的样式之一，例如博客的侧边栏、企业网站的公告栏、栏目列表等。

面板样式除了内容之外，还有一个面板头部可以添加标题，让我们通过这篇文章看看Bootstrap面板样式的使用方法。

Bootstrap面板基本样式

直接调用面板样式也非常容易，只需要通过以下代码即可实现：

div class="panel panel-default" div class="panel-body" Basic panel example /div /div

该样式仅仅包含了面板样式的内容部分，而没有加入头部，适用于不需要头部的面板内容。

Bootstrap面板带标题样式

上面提到的面板样式是没有带标题的，在一些情况下不够用，所以Bootstrap面板还提供了带有标题的面板样式，让我们看看应该怎么去使用：

div class="panel panel-default" div class="panel-heading" h3 class="panel-title"面板标题/h3 /div div class="panel-body" 面板内容 /div /div

上面这一部分代码是最为标准的带有标题的面板结构，为了适应阅读设备以及SEO搜索引擎优化元素，最好将标题放入h1-h5的标签中。

Bootstrap面板带注脚样式

如果一些解释说明类的文字无法在面板标题很好地表现出来，可以通过注脚的形式来进行说明，Bootstrap面板同样提供了注脚这个样式：

div class="panel panel-default" div class="panel-body" 面板内容 /div div class="panel-footer"面板注脚/div /div

通过主次关系来进行标题或者是注脚的选择，是用好面板组件的关键。

Bootstrap面板有意义的样式

和其他Bootstrap组件一样，Bootstrap面板样式同样具有有意义的样式，通过引用这几个样式可以将该面板的作用直观展现出来，同样也是那几种颜色和样式名称：

div class="panel panel-primary"主要面板样式/div div class="panel panel-success"成功面板样式/div div class="panel panel-info"信息面板样式/div div class="panel panel-warning"警告面板样式/div div class="panel panel-danger"危险面板样式/div

Bootstrap面板与表格结合

如果你需要在面板中引入表格样式，那么也可以很方便地实现：

div class="panel panel-default" div class="panel-heading"面板标题/div table class="table" 表格内容 /table /div

Bootstrap面板与列表结合

就像开头所说的一样，如果你想要在面板中引入列表，那也真是再合适不过了，通过以下代码便可轻松实现：

div class="panel panel-default" div class="panel-heading"面板标题/div div class="panel-body" p面板内容简介/p /div ul class="list-group" li class="list-group-item"列表项目1/li li class="list-group-item"列表项目2/li li class="list-group-item"列表项目3/li li class="list-group-item"列表项目4/li li class="list-group-item"列表项目5/li /ul /div

bootstrap怎么让页面对应的分页按钮显示高亮

展开全部

页,

第二种是翻页.

就是有上一页和下一页的显示效果.

1.分页:

带有页面的效果,

这里你里面可以随你的网站怎么定义都可以,

比方说.

里面不是文字,

而是一些图标,一样可以.

只不过数字能够更好的看效果.

使用样式:

.pagination

2.带有上一项和下一项的翻页效果,

最简单的方式.

样式.pager

两种方法的实现,

都是需要使用ul标签,

链接是使用a.

还有一些状态,

比方说,

我选中了某一项.

其中的某一项静止使用.

2/6

一个简单的分页,

默认的效果.

在ul上加上样式.pagination,

然后下面就是一个一个的li.

然后实现效果,

就如图所示,

这就是一个最简单的默认的样式.

可以看出来,

实现起来很简单.

但是效果却很棒.

3/6

如何在显示的页面上高亮显示,

标识显示的是该页.

这里使用样式.active.

来标识选择的页面.

查看效果和代码如图.

这里需要注意的是:

在该代码里增加了如下的代码:

span

class="sr-only"(current)/span

是因为,

该代码表示,

当前页面不为能点击.

因为当前页面,

数据已经刷新出来了.

如果你想要点击,

就把这句话去掉.

4/6

如何在到第一页或者尾页的时候,

让上一页和下一页禁止用户点击.

这里可以使用.disabled

样式来实现.

如图所示,

让上一页不能点击.

在不想让单击的样式上加上.disabled

即可.

5/6

在分页里面,

定义了除了默认的样式大小之外,

还定义了另外两种样式.

1

.pagination-lg

比默认样式大的样式

2

.pagination-sm

比默认样式小的样式

实现代码对比效果.

左侧是放大的样式,

右侧是缩小的样式.

6/6

这里给出的样式都是最简单的样式,

如果需要其他样式的,

比方说,

不喜欢这个颜色.

等等,

那就需要自己自定义样式来实现.

1/4

bootstrap的翻页

用简单的标记和样式，就能做个上一页和下一页的简单翻页。比方说博客和文章类的网站,

就很多使用了这样的样式.

样式使用.pager,

效果和代码如图,

这里更加简单的显示了上一页和下一页.

样式是居中在页面上.

那如何把上一项和下一项放在页面的两端呢.

继续往下看.

2/4

如何让按钮在两端显示呢?

这里使用对齐链接.

样式分别为:

.previous

和

.next

实现代码如图.

需要注意的是,

这个样式里面默认不支持,

使用分页样式,

如果想两种同时使用,

需要自己另外写代码.

3/4

在翻页这个样式里面,

也可以让上一篇或者下一篇禁用,

禁用方法和分页一样,

使用样式.disabled

4/4

这两种样式,

基本上都能够支持大多少我们遇到的分页问题.

还有一种就是移动端的,

这个的话,

就可以使用一个链接按钮,

然后异步获得数据就可以了.

如何修改bootstrap样式

一、段落

段落是排版中另一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式（这里所说的文本是指正文文本）：

1、全局文本字号为14px(font-size)。

2、行高为1.42857143（line-height），大约是20px(大家看到一串的小数或许会有疑惑，其实他是通过LESS编译器计算出来的，当然Sass也有这样的功能)。

3、颜色为深灰色（#333）；

二、文字样式

在实际项目中，对于一些重要的文本，希望突出强调的部分都会做另外的样式处理。Bootstrap同样对这部分做了一些轻量级的处理。

如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。

1.粗体：在Bootstrap中，可以使用b和strong标签让文本直接加粗。

2.斜体：在Bootstrap中，可以使用em或i来实现文本斜体。

三、强调类

.text-muted：提示，使用浅灰色（#999）

.text-primary：主要，使用蓝色（#428bca）

.text-success：成功，使用浅绿色(#3c763d)

.text-info：通知信息，使用浅蓝色（#31708f）

.text-warning：警告，使用黄色（#8a6d3b）

.text-danger：危险，使用褐色（#a94442）

div class="text-muted".text-muted 效果/div

div class="text-primary".text-primary效果/div

div class="text-success".text-success效果/div

div class="text-info".text-info效果/div

div class="text-warning".text-warning效果/div

div class="text-danger".text-danger效果/div

四、文本对齐

在排版中离不开文本的对齐方式。在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格：

☑ 左对齐，取值left

☑ 居中对齐，取值center

☑ 右对齐，取值right

☑ 两端对齐，取值justify

为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：

☑ .text-left：左对齐

☑ .text-center：居中对齐

☑ .text-right：右对齐

☑ .text-justify：两端对齐

有了文字样式，使得排版效果更清晰简洁，希望大家在自己的作品中多使用一些简单大方的文字样式，使作品脱颖而出，更加具有吸引力。

（望楼主采纳哦）

bootstrap代码高亮的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于bootstrap鼠标高亮、bootstrap代码高亮的信息别忘了在本站进行查找喔。