BootStrap学习笔记

最新推荐文章于 2024-05-08 10:24:25 发布
最新推荐文章于 2024-05-08 10:24:25 发布
阅读量185 收藏
点赞数
分类专栏： JAVA WEB 文章标签： bootstrap css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41816516/article/details/106155268
版权

BootStrap概述

  1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。
    • 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。
    • 好处：
      1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
      2. 响应式布局。
        * 同一套页面可以兼容不同分辨率的设备。
  2. 快速入门
    • 下载Bootstrap
    • 在项目中将这三个文件夹复制
    • 创建html页面，引入必要的资源文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap HelloWorld</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>

</body>
</html>

BootStrap响应式布局

  1. 同一套页面可以兼容不同分辨率的设备。
    • 实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子
    • 步骤：

      1. 定义容器：相当于之前的table、

        • 容器分类：
          1. container：两边留白
          2. container-fluid：每一种设备都是100%宽度

      2. 定义行：相当于之前的tr 样式：row

      3. 定义元素：指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目

        • 设备代号：
          1. xs：超小屏幕 手机 (<768px)：col-xs-12
          2. sm：小屏幕 平板 (≥768px)
          3. md：中等屏幕 桌面显示器 (≥992px)
          4. lg：大屏幕 大桌面显示器 (≥1200px)

      4. 注意：

        1. 一行中如果格子数目超过12，则超出部分自动换行。
        2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
        3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

	<title>bookstrap学习</title>
		
	<!-- Bootstrap -->
	<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
		
		
	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	<script src="bootstrap/js/jquery-3.2.1.min.js"></script>
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<script src="bootstrap/js/bootstrap.min.js"></script>

    <style type="text/css">
        .in{
            border: 1px solid red;

        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-1 col-sm-4 in">月亮</div>
            <div class="col-lg-1 col-sm-4 in">月亮</div>
            <div class="col-lg-1 col-sm-4 in">月亮</div>
            <div class="col-lg-1 col-sm-4 in">月亮</div>
            <div class="col-lg-1 col-sm-4 in">月亮</div>
            <div class="col-lg-1 col-sm-4 in">月亮</div>
            <div class="col-lg-1 col-sm-4 in">月亮</div>
            <div class="col-lg-1 col-sm-4 in">月亮</div>
            <div class="col-lg-1 col-sm-4 in">月亮</div>
            <div class="col-lg-1 col-sm-4 in">月亮</div>
            <div class="col-lg-1 col-sm-4 in">月亮</div>
            <div class="col-lg-1 col-sm-4 in">月亮</div>
        </div>
        <div class="row">
            <div class="col-md-3 col-xs-10 in">太阳</div>
            <div class="col-md-3 col-xs-10 in">太阳</div>
            <div class="col-md-3 col-xs-10 in">太阳</div>
            <div class="col-md-3 col-xs-10 in">太阳</div>
            <div class="col-md-3 col-xs-10 in">太阳</div>
            <div class="col-md-3 col-xs-10 in">太阳</div>
            <div class="col-md-3 col-xs-10 in">太阳</div>
            <div class="col-md-3 col-xs-10 in">太阳</div>
            <div class="col-md-3 col-xs-10 in">太阳</div>
            <div class="col-md-3 col-xs-10 in">太阳</div>
            <div class="col-md-3 col-xs-10 in">太阳</div>
            <div class="col-md-3 col-xs-10 in">太阳</div>
        </div>
    </div>

</body>
</html>

在这里插入图片描述
在这里插入图片描述

BootStrap的CSS样式和JS插件

  1. 全局CSS样式：
    • 按钮：class=“btn btn-default”
    • 图片：
      • class=“img-responsive”：图片在任意尺寸都占100%
      • 图片形状
        • <img src="..." alt="..." class="img-rounded">：方形
        • <img src="..." alt="..." class="img-circle"> ： 圆形
        • <img src="..." alt="..." class="img-thumbnail"> ：相框
    • 表格
      • table
      • table-bordered
      • table-hover
    • 表单
      • 给表单项添加：class=“form-control”
<table class="table table-bordered table-hover table-striped">
        <tr class="active">
            <td>序号</td>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>1</td>
            <td>wrq</td>
            <td>20</td>
        </tr>
        <tr>
            <td>2</td>
            <td>zjf</td>
            <td>21</td>
        </tr>

    </table>

<hr><br><br>

    <form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>
  1. 组件：
    • 导航条
    • 分页条
  2. 插件：
    • 轮播图
  3. 这个网址就是很全面的BootStrap的Css样式：https://v3.bootcss.com/css/#tables
程序胖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap(前端开发框架)
m0_67294268的博客
04-30 695
一、Bootstrap是什么 1.诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架 2.是一个用于快速开发Web应用程序和网站的前端框架 佥测您的文章标题、错 3.Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷 概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端.平板、手机）上完美展示的响应式前端框架 二、Bootstrap的好处 1、响应式设计(Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机） 2、.移动..
适合初学者的BootStrap笔记，全网最全
qq_42176665的博客
11-02 828
最全面的BootStrap的知识点，适合新手和小白
BootStrap笔记
weixin_42979539的博客
09-22 150
今日内容 1. Bootstrap Bootstrap： 1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义了很多的css样式...
2024年最新Bootstrap学习笔记，菜鸟物流java面试
最新发布
2401_84103344的博客
05-08 316
由于篇幅限制，小编在此截出几张知识讲解的图解本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录需要这份系统化的资料的朋友，可以点击这里获取@media screen and (min-width: 768px){//大于等于3.bootstrap里格式，定义都是事先定义好了的，必须使用正确才能正确调用。4…container容器。.container-fluid是百分百宽度。5.栅格系统。
bootstrap笔记
weixin_74155781的博客
02-03 188
bootstrap笔记
Bootstrap前端框架的整合与应用
2302_78109835的博客
10-31 586
下面以一个简单的网站为例，介绍如何使用Bootstrap实现网站的布局和功能。通过使用Bootstrap，我们可以快速实现这些功能，并且保证网站的兼容性和响应式布局。Bootstrap支持的浏览器包括Chrome、Firefox、Safari、Edge等主流浏览器。在当今的互联网开发领域，Bootstrap无疑是前端开发框架中的佼佼者。它以简单、灵活、美观的特点，赢得了广大开发者的喜爱。本文将详细介绍Bootstrap前端框架的整合和应用，帮助大家更好地理解和使用这个强大的工具。
Bootstrap学习笔记
03-16
Bootstrap 笔记 学习 教程 学习总结 有的class类等是官网上还没介绍的
bootstrap学习笔记
06-17
自己整理的bootstrap学习笔记，非常值得拥有，需要的朋友，可以下载学习。
bootstrap学习笔记之初识bootstrap
10-22
Bootstrap是一款目前非常流行的前端框架，简单的说，就是html,css,javascript的工具集。本文给大家介绍bootstrap学习笔记之初识bootstrap，感兴趣的朋友一起学习吧
Bootstrap(一)
qq_48315043的博客
01-14 1698
一、bootstrap概述 1 什么是Bootstrap Bootstrap是一个基于HTML、CSS和JavaScript语言编写的框架，具有简单、灵活的特性， 拥有样式库、组件和插件。 Bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面 2.Bootstrap框架的特点： 3 .Bootstrap的组成 4.为什么使用bootstrap？ 移动设备优先。框架包含了贯穿于整个库的移动设备优先的样式。 浏览器支持。所有的主流浏览器都支持..
Bootstrap
狗凡的博客
10-17 183
Bootstrap： 1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义...
前端基础之《Bootstrap（2）—全局CSS样式_栅格系统》
csj50的专栏
11-01 1280
bootstrap.min.css：是去除空格和回车，压缩版。bootstrap.css：是供我们学的没有压缩版。3、bootstrap javascript插件。1、bootstrap全局CSS样式。2、bootstrap CSS组件。二、项目引入Bootstrap。一、Bootstrap要点。其实就是官网上的这三个。
前端开发：5分钟入门前端框架Bootstrap
weixin_45873215的博客
01-23 289
1.百度搜索BootStrap官网，进入Bootstrap中文官网 2.点击Bootstrap3中文文档 3.点击下载Bootstrap 4.下载用于生产环境的Bootstrap 5.解压下载后的bootstrap文件，并引入bootstrap前端框架 (其子文件夹包括css,font,js这3个，通俗理解就是此3个文件夹为开发者提供了一个非常方便的样式库) 将bootstrap文件夹放在与html或jsp等前端页面相关的文件目录下，通过link标签来应用bootstrap文件夹下的css样式与
[前端]-Bootstrap响应式 框架
listeningdu的博客
11-25 789
前端Bootstrap的响应式 CSS 能够自适应于台式机、平板电脑和手机。
Bootstrap笔记
wyh9459的专栏
08-09 440
1、栅格系统 .container : {width : 80%} .container-fluid : {width : 100%} .row .col-xm- .col-xm-offset- .col-sm- .col-sm-offset- .col-md- .col-md-offset- .col-lg- .col-lg-offset- ...
前端框架与前端类库的理解
weixin_30627381的博客
10-22 243
　　前端框架的理解误区 　　网站的价值在于它能为用户提供什么价值，在于网站能做什么，而不在于它是怎么做的，所以在网站还很小的时候就去追求网站的架构框架是舍本逐末，得不偿失的。前端框架同理，如果是一个简单的页面型产品，应用只是依赖服务器来生成Web页面和视图，并且只需要使用一些简单的Javascript或者JQuery来使应用更加具有互动性，那么一个JQuery前端类库就可以了，真的没必要用上一些...
前端使用 BootStrap 写一些后台常用的界面
热门推荐
IT小村
02-27 2万+
一、前言 1、作为一个专注后台方向上的学习者，肯定不只是简单地处理业务逻辑而已 2、自己独立完成一个作品，一般都要涉及到几个界面的编写： ①登录界面 ②CRUD界面 ③主页 ④… 3、UI方面的简单的框架有很多，使用的过程也是深有感触： ①之前先是使用 EasyUI ，后来逐渐觉得其写出来的界面如明日黄花，简陋不已，写出来的界面都不好意思说是自己写的。 ②于是接着选择了最新最热门...
Bootstrap里的文件分别表示什么？都有什么用？
weixin_34248118的博客
02-24 530
2019独角兽企业重金招聘Python工程师标准>>> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值