引言
Bootstrap是一个简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。它把网站页面开发常用的一些样式、组件、特效集中在一起,让开发者可以直接使用。通过它,可以很轻松地写出优雅的界面,提高页面开发的效率。有了它,后端程序猿也能写出好看的页面了。
但有一点需要强调下,使用 Bootstrap 并不代表不用写 CSS 样式,而是不用写绝大多数大家都会用到的样式。
一、安装
在页面中引入Bootstrap的css和js文件,我们直接使用官方提供的cdn即可。
<link>
<link>
二、使用
Bootstrap的每个样式、组件都对应一个或多个class。 比如蓝色按钮的代码为:
<button>(首选项)Primary /<button>
它在页面上的效果为:
定义它的样式的就是btn和btn-primary这两个类。
如果对这些组件不熟悉的话直接去官网(地址https://v3.bootcss.com/css/),把我们想要的组件代码copy下来,放进页面中在进行调整。
三、布局
Bootstrap定义了一个栅格系统,帮助我们对页面元素进行排版和布局。如图所示:
以PC端为例子,它把整个屏幕横向分成12等分,每个"row"表示一行,“row”里面的每个“col-md-1”表示十二分里的一份,“col-md-”后面的数字表示这个页面元素占这一行多少份。
打个比方,如果我们要设置两个板块,左边的版块宽度占25,右边的版块占75%,可以这样写:
四、常用样式
1.按钮
<button>(默认样式)Default/<button>
<button>(首选项)Primary/<button>
<button>(成功)Success/<button>
<button>(一般信息)Info/<button>
<button>(警告)Warning/<button>
<button>(危险)Danger/<button>
<button>(链接)Link/<button>
2.标签页
3.导航条
4.分页
«
»
柠檬为大家准备了一些web、JavaScript、Bootstrap、CSS、Mybatis、HTML、jQuery的学习教程分享,希望可以帮助到大家。
获取方式:请大家转发+关注并私信小编关键词:“资料”即可获取前端自学教程一套。
閱讀更多 IT老農民 的文章
關鍵字: 读完 JavaScript 前端