1. 介绍

1.1 介绍

Bootstrap是一个免费的web前端框架，它将HTML、CSS、Javascript结合到一起，制定了一系列的前端开发规则，使设计网页就像搭积木一样简单。

今天我们就跟着福哥来学习一下Bootstrap框架的使用技巧，我们的TFPHP框架会将Bootstrap引入进来作为框架的前端模块的支持。

2. 安装

安装Bootstrap很简单，就是从官网下载源码包放到自己的项目下面，通过link和script引入CSS和Javascript库文件即可。

2.1 下载

官网下载地址

https://getbootstrap.com/

这里面有压缩版本的和源码版本的，我们每个都下载一下。压缩版本用在生产环境上面，而源码版本用在开发环境上面。

2.2 安装

我们直接使用压缩版本即可，将压缩包解压之后将css目录和js目录复制到TFPHP框架下面就可以使用了。

最后就是在视图模板里面引入Bootstrap的CSS文件，就算安装完成了。

<html><head>    <title>Bootstrap框架演示title>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    <link rel="stylesheet" type="text/css" href="server->BASE_URI %>css/bootstrap.min.css">head><body>body>html>

3. 基础

3.1 row

行样式，可以用来修饰一个整行容器对象，这个对象里面一般情况下需要放置col样式对象。

3.2 col

列样式，可以用来修饰一个块容器对象。col样式有sm、md、lg、xl几个规格，分别表示小、中、大、超大尺寸。

col样式最后有一个列宽度数字，最小是1，最大是12。一个row样式对象里面可以放置多个col样式对象，只要数字加一起不超过12就可以了。

col样式最后还可以是auto，就是表示这个对象的宽度是自动的。

3.3 btn

按钮样式，可以用来修饰按钮对象。

3.4 btn-xxx

按钮尺寸样式，可以用来设置按钮的大小。btn-xxx有xs、sm、md、lg几个尺寸，分别表示超小、小、中、大尺寸。

3.5 btn-yyy

按钮颜色样式，可用来设置按钮的样式，是Bootstrap设置的内置颜色，很漂亮。包括：btn-info、btn-warning、btn-danger、btn-white、btn-dark等等。

3.6 table

表格样式，可以用来修饰表格对象。

4. 使用

4.1 表单

这是一个用户登录的表单的示例。

<body style="background: #ccc; padding: 12px;">    <div class="row" style="width: 280px; background: #fff; padding: 12px; margin: 0 auto;">        <div class="col-sm-12">            <h3 class="m-t-none m-b">登录h3>            <p>请输入正确的用户名和密码。p>            <div class="form-group">                <label>用户名label>                <input type="text" class="form-control" />            div>            <div class="form-group">                <label>密码label>                <input type="password" class="form-control" />            div>            <div>                <button class="btn btn-primary">登录button>            div>        div>    div>body>

4.2 表格

这是一个表格的示例，展示用户信息表的样式。

<body style="background: #ccc; padding: 12px;">    <div class="row" style="width: 280px; background: #fff; padding: 12px; margin: 0 auto;">        <div class="col-sm-12">            <h3 class="m-t-none m-b">用户管理h3>            <p>这是一个用户信息表。p>            <table class="table">                <thead>                    <tr>                        <th>IDth>                        <th>用户名th>                        <th>创建日期th>                    tr>                thead>                <tbody>                    <tr>                        <td>3td>                        <td>福哥td>                        <td>2020/11/17td>                    tr>                    <tr>                        <td>1td>                        <td>TFPHPtd>                        <td>2020/06/10td>                    tr>                    <tr>                        <td>2td>                        <td>TFHTMLtd>                        <td>2020/10/07td>                    tr>                tbody>            table>        div>    div>body>

4.3 综合

这是一个综合的样式，是一个博客日志的样式。

<body style="background: #ccc; padding: 12px;">    <div class="row" style="width: 280px; background: #fff; padding: 12px 0 0 0; margin: 0 auto;">        <div class="col-sm-12">            <a class="pull-left">                <img src="https://tongfu.net/img3/home/icon/2020/1117/17/c8528cb09e22e75e.jpg" style="width: 50px; height: 50px;" />            a>            <div class="media-body" style="display: inline-block; width: auto; vertical-align: top;">                <a><strong>鬼谷子叔叔strong>a><br />                <span class="small">版主span>            div>        div>        <div class="col-lg-12" style="padding: 12px;">            <p>                这是一个综合的示例，它展示了博客日志的样式。                这是一个综合的示例，它展示了博客日志的样式。                这是一个综合的示例，它展示了博客日志的样式。                这是一个综合的示例，它展示了博客日志的样式。                这是一个综合的示例，它展示了博客日志的样式。                这是一个综合的示例，它展示了博客日志的样式。            p>            <div class="btn-group">                <button class="btn btn-danger btn-xs" style="font-size: 12px;">赞button>                <button class="btn btn-warning btn-xs" style="font-size: 12px;">踩button>                <button class="btn btn-info btn-xs" style="font-size: 12px;">回复button>            div>        div>    div>body>

5. 总结

今天童鞋们和福哥一起学习了Bootstrap框架的使用技巧。大家会有一种感觉使用Bootstrap可以很好的完成大部分网页的设计需求，但是我们的网页不能完全使用Bootstrap堆积起来，还需要自己添加一些自定义的样式对网页元素进行微调。

【20201116】HTML语言入门——标签样式

【20201115】HTML语言入门——标签语言

免费看文章，自己学技术

每一篇文章都是福哥一个字一个字地敲出来的，都是福哥原创的。

每一篇文章都是经过了福哥的反复验证的，都是可以正常使用的。

bootstrap 按钮样式单选效果_【20201117】Bootstrap前端框架学习笔记相关推荐

bootstrap 按钮样式单选效果_【自学C#】I 书 101 单选按钮
一.简介当需要用户在多个选项中选择一项时,可以使用单选按钮. 单选按钮处于被选中状态时,其左边圆圈中心有一黑点. 单选按钮通常以选项组的形式存在,在由若干单选按钮组成的选项组中,每次只能选中其中一个 ...
Bootstrap按钮样式
Bootstrap按钮样式 1.新建一个web项目ch07. 2.在ch07中新建一个demo01.html,将css文件模版导入进来. 3.将移动设备优先拷贝到demo01的头文件中. <me ...
bootstrap框架学习笔记
bootstrap框架学习笔记 1.Bootstrap简介 2.基本使用 3.容器 4.设备划分 5.栅格系统 6.展示与隐藏 7.其他类前缀 8.组件直接参考开发文档 1.Bootstrap简介 B ...
Bootstrap前端框架学习（一）：Bootstrap在Vue项目中的安装及可视化布局
Bootstrap前端框架学习(一):Bootstrap在Vue项目中的安装及可视化布局 node.js的安装 bootstrap的安装 bootstrap快速布局 node.js的安装我们需要安装 ...
html按钮按下效果_如何用HTML实现简单按钮样式
本篇文章主要给大家介绍如何用HTML实现简单的按钮样式. 在网页设计过程中,按钮的设置可以说是最为常见且基础的一项html/css知识技能. 程序猿的生活:打造全网web前端全栈资料库(总目录)看完学 ...
bootstrap 按钮样式汇总
类样式描述 .btn 圆角灰色按钮,为了让按钮不那么尖锐,我们的按钮都应该使用这个样式来获得圆角,然后再覆盖上其他的特性. .btn-default 默认/标准按钮,白色的按下灰色. .btn-pr ...
bootstrap下拉框分页_【Bootstrap】 bootstrap-select2下拉菜单插件
这次开发了个小TRS系统,虽然是很小,但是作为初心者,第一次用到了很多看起来洋气使用起来有相对简单的各种前端(主要是和bootstrap配合使用)组件.包括bootstrap-select2,boot ...
bootstrap怎么在一个页面渲染多个表格_推荐一个前端框架
拼图Pintuer-跨屏响应式布局前端开发CSS框架几个推荐理由: 国产: 跨屏响应式,这是最基本的: 使用简单,只需引入jquery.js.pinter.js.pinter.css三个文件即可: ...
Web前端框架学习—Bootstrap
零. 写在前面 Bootstrap是一个非常好的前端框架,在前端时间的小项目中需要使用Bootstrap做前端,于是就学习了一下,觉得非常好用,推荐给新手. 一. 什么是Bootstrap? Boot ...

bootstrap 按钮样式单选效果_【20201117】Bootstrap前端框架学习笔记