bootstrap

最新推荐文章于 2022-12-05 11:40:29 发布

Venus枯草

最新推荐文章于 2022-12-05 11:40:29 发布

阅读量115

点赞数 1

分类专栏： Java学习记录文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_44696477/article/details/119183617

版权

Java学习记录专栏收录该内容

30 篇文章 2 订阅

订阅专栏

简介

bootstrap用于快速开发web应用程序、网站的前端框架
基于html、css、JavaScript
提供了带有网格系统、链接样式、背景的基本结构

安装导入

<head>

            <meta charset="utf-8" />

            <title>bootstrap入门与使用</title>

            <!--boostrap的使用：

                  1、必须先引入bootstrap的支持 ，包括js、css、font文件

                  2、引入的文件必须先有jQuery的核心文件，再引入bootstrap的js文件，再引入自己的文件

                  3、css文件必须先引入bootstrap的css文件再引入自己的文件

                  4、font文件无需在页面上引入，但是需要在项目的目录中存在

            -->

            <script type="text/javascript" src="js/jquery-1.11.1.js" 
></script>

            <script type="text/javascript" src="js/bootstrap.js" 
></script>

            <!--导入自己的js文件-->

            <link rel="stylesheet" href="css/bootstrap.css" />

            <link rel="stylesheet" href="css/bootstrap-theme.css" />

            <!--导入自己的css文件-->

      </head>

使用

按钮样式：

class=“btn btn-按钮样式名称”

表格

class=“table table-表格样式名称”

图片

class=“img-表格样式名称”

网格系统

根据屏幕或视口的尺寸，会自动分为最多12列的网格
先行后列
class=“row” class=“col-lg-占据的行数”

表单

垂直
内联
水平

<form role="form" class="form-horizontal">

                  <div class="form-group">

                        <label for="name">用户名</label>

                        <input class="form-control" name="name" />

                  </div>

                  <div class="form-group">

                        <label for="name">密码</label>

                        <input class="form-control" type="password" 
name="name" />

                  </div>

            </form>

改变bootsrapt样式

1.找到bootstrap源代码
2.复制到style标签中
利用内部样式表优先级大于外部样式表进行自定义样式

Venus枯草

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap

简介bootstrap用于快速开发web应用程序、网站的前端框架基于html、css、JavaScript提供了带有网格系统、链接样式、背景的基本结构安装导入<head>            <meta charset="utf-8" />        &nbs
复制链接

扫一扫