Bootstrap前端开发实例｜对文本的字体线条进行细化 Bootstrap是Twitter开发的一套Web前

文章图片
Bootstrap是Twitter开发的一套Web前端框架， Bootstrap可以简单地理解为：对CSS的再次封装，因此在大多数情况下，对Bootstrap的应用就是对该框架的相关调用。
本系列所有Bootstrap代码基于Bootstrap4.3.1实现，在IntelliJIDEA2019.2.3环境中编写完成，在最新版的“搜狗高速浏览器”和“GoogleChrome浏览器”上测试成功，因此建议读者在上述环境或条件下使用源代码。所有源代码不需要下载Bootstrap的其他文件，在使用时保持网络畅通即可。此外，本系列实例推文需要读者有一定的HTML、CSS和Java的基础知识。
下面这个实例演示了对文本的字体线条进行细化。
01
实例功能
此实例主要通过使用font-weight-light类，实现对文本字体线条进行细化的效果。当在浏览器中显示页面时，单击“显示原始文本”按钮，则原始文本的效果如图1所示。

文章图片
■图1
单击“显示加细文本”按钮，则第二行文本被加细之后的效果如图2所示。

文章图片
■图2
02
实现代码

文章图片
在上面这段代码中， class="containermt-3"表示创建一个容器，在大多数的Bootstrap应用中，都需要这个容器；container类用于创建固定宽度并支持响应式布局的容器， container-fluid类用于创建100%宽度，占据全部视口(viewport)的容器。 class="font-weight-light"表示对该元素(段落)中的文本字体线条进行加细。 font-weight-normal类则表示以正常字体显示文本。
在大多数情况下，使用Bootstrap4框架的类或其他插件需要引入bootstrap.min.css、bootstrap.min.js、jquery.min.js、popper.min.js等文件，这些文件可以从官方网站https://getbootstrap.com下载，但在国内推荐使用StaticfileCDN在线文件，即：
03
源代码下载及补充说明
关注微信公众号，后台回复关键词“Bootstrap代码001”即可获得完整源代码。
*在测试代码时，必须保持网络畅通。
04
参考图书
《Bootstrap+Vue.js前端开发超实用代码集锦》
ISBN：978-7-302-56815-5
罗帅罗斌编著
定价：99.8元
扫码优惠购书返回搜狐，查看更多
【Bootstrap前端开发实例｜对文本的字体线条进行细化】责任编辑：