【BootStrap】前端开发框架——快速上手页面神器

最新推荐文章于 2024-06-06 14:23:51 发布

lambor20000216

最新推荐文章于 2024-06-06 14:23:51 发布

阅读量498

点赞数

lambor专属

本文链接：https://blog.csdn.net/qq_40892702/article/details/100737001

版权

文章目录

什么是BootStrap
Bootstrap快速入门——基本引入
响应式布局，栅格系统
全局CSS样式
请自行查找Bootstrap官方文档
- 组件
- 插件

什么是BootStrap

一个前端开发的框架,来自Twitter.

框架：半成品软件，开发人员在框架的基础上进行开发，简化编码。

优点：

定义了很多css样式和js插件，开发人员可以通过这些样式和插件得到丰富的页面效果
响应式布局：同一页面可兼容不同分辨率的页面

Bootstrap快速入门——基本引入

中文文档

直接下载（用于生产环境下的Bootstrap）解压
引用：把三个文件夹(css样式 fonts字体 js插件)复制到自己创建的项目
创建html文件，引入必要文件。复制以下基本模板（原先的Bootstrap文档中有）再进行修改。原本的文件是放在cdn内容服务器上部署的，以下例子为修改为本地引用。
验证是否成功导入 ctrl+鼠标移到引用目录上，若没有显示则写法有误
导入jQuery放在js文件夹下，学习js的重要框架，修改引入

.min.css	用于引用，体积小，速度快，压缩版，没有占位符（回车，制表符）的css文件
.css	用于阅读，格式良好

inital-scale=1 缩放比例1：1
快速注释 ctrl+shift+/

基本模板：

<!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 101 Template</title>

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

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

bootstrap基本引入模板：快速入门

<!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</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>

响应式布局，栅格系统

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

定义容器：相当于table

container	两边设有留白
container-fluid	每个设备都是100%宽度

定义行，相当于tr，样式：row
定义元素：该元素在不同设备上，所占格子数目。col-设备代码-格子数目

设备代码：
col-xs-12

xs(extra small)	超小屏幕	手机(<768px)
sm(small)	小屏幕	平板(>=768px)
md(medium)	中等屏幕	桌面显示器(>=992px)
lg(large)	大屏幕	大桌面显示器(>=1200px)

快速入门

复制以上配置文件（.html）修改命名。

<style>
    .inner{
        border:1px solid red;
    }
</style>
<body>
<!--定义容器-->
<div class="container-fluid">
<!--    定义行-->
    <div class="row">
<!--        定义元素-->
        <div class="col-lg-1 inner">grid栅格</div>
        <div class="col-lg-1 inner">grid栅格</div>
        <div class="col-lg-1 inner">grid栅格</div>
        <div class="col-lg-1 inner">grid栅格</div>
        <div class="col-lg-1 inner">grid栅格</div>
        <div class="col-lg-1 inner">grid栅格</div>
        <div class="col-lg-1 inner">grid栅格</div>
        <div class="col-lg-1 inner">grid栅格</div>
        <div class="col-lg-1 inner">grid栅格</div>
        <div class="col-lg-1 inner">grid栅格</div>
        <div class="col-lg-1 inner">grid栅格</div>
        <div class="col-lg-1 inner">grid栅格</div>
    </div>
</div>
</body>

注意：

一行如果格子数目超过12，则超出部分自动换行
栅格类属性可向上兼容。小的屏幕兼容了大的屏幕也自然兼容。适用于屏幕宽度大于或等于分界点大小的设备。
如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素占满一整行。

全局CSS样式

Global CSS style
在文档里找，复制别人定义好的样式，进行修改。

按钮
图片
表格
表单

按钮
class="btn btn-default"
.btn-lg、.btn-sm或 .btn-xs 就可以获得不同尺寸的按钮。

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

图片
class="img-responsive"：图片在任意尺寸都占100%

图片形状
class="img-rounded"：方形
class="img-circle"：圆形
class="img-thumbnail" ：相框
idea 配置web项目图片无法显示问题
img src="img/002.jpeg" alt="style"这样设置图片比较好
表格
table
table-bordered
table-hover
表单
class=“form-control”

请自行查找Bootstrap官方文档

组件

导航
分页

插件

轮播图

lambor20000216

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【BootStrap】前端开发框架——快速上手页面神器

文章目录概述BootStrap快速入门概述一个前端开发的框架框架：半成品软件，开发人员在框架的基础上进行开发，简化编码。优点定义了很多css样式和js插件响应式布局：同一页面可兼容不同分辨率的页面BootStrap快速入门中文文档下载把三个文件夹复制到项目里引用需要文件依赖于Jquery.min.css用于引用，体积小；.css用于阅读...
复制链接

扫一扫