首页 > 其他分享 >Bootstrap前端开发框架

Bootstrap前端开发框架

时间:2023-06-22 23:22:21浏览次数:38  
标签:md 框架 样式 Bootstrap col 栅格 前端开发 页面

一 Bootstrap 简介

Bootstrap 来自 Twitter(推特),是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS 和 JAVASCRIPT 的,它
简洁灵活,使得 Web 开发更加快捷。

  •  中文官网:http://www.bootcss.com/
  •  官网:http://getbootstrap.com/
  •  推荐使用:http://bootstrap.css88.com/

框架:顾名思义就是一套架构,它有一套比较完整的网页功能解决方案,而且控制权在框架本身,有预制样式库、组件和
插件。使用者要按照框架所规定的某种规范进行开发。

1. 优点

  •  标准化的html+css编码规范
  •  提供了一套简洁、直观、强悍的组件
  •  有自己的生态圈,不断的更新迭代
  •  让开发更简单,提高了开发的效率

2. 版本

  •  2.x.x:停止维护,兼容性好,代码不够简洁,功能不够完善。
  •  3.x.x:目前使用最多,稳定,但是放弃了 IE6-IE7。对 IE8 支持但是界面效果不好,偏向用于开发响应式布局、移

动设备优先的 WEB 项目。

  •  4.x.x :最新版,目前还不是很流行

二 Bootstrap 使用

在现阶段我们还没有接触JS相关课程,所以我们只考虑使用它的样式库。

控制权在框架本身,使用者要按照框架所规定的某种规范进行开发。

Bootstrap 使用四步曲: 1. 创建文件夹结构 2. 创建 html 骨架结构 3. 引入相关样式文件 4. 书写内容

在现阶段我们还没有接触JS相关课程,所以我们只考虑使用它的样式库。

1. 创建文件夹结构

 

2. 创建html骨架结构

<!--要求当前网页使用IE浏览器最高版本的内核来渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口的设置:视口的宽度和设备一致,默认的缩放比例和PC端一致,用户不能自行缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<!--[if lt IE 9]>
<!--解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题-->
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<!--解决ie9以下浏览器对 css3 Media Query 的不识别 -->
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

3. 引入相关样式文件

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

4. 书写内容

  •  直接拿Bootstrap 预先定义好的样式来使用
  •  修改Bootstrap 原来的样式,注意权重问题
  •  学好Bootstrap 的关键在于知道它定义了哪些样式,以及这些样式能实现什么样的效果

三 布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器,它提供了两个作此用处的类。

四 Bootstrap 栅格系统

1 栅格系统简介

栅格系统英文为“grid systems”,也有人翻译为“网格系统”,它是指将页面布局划分为等宽的列,然后通过列数
的定义来模块化页面布局。

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会
自动分为最多12列。

 

2 栅格选项参数

栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。

  •  按照不同屏幕划分为1~12 等份
  •  行(row) 可以去除父容器作用15px的边距
  •  xs-extra small:超小; sm-small:小; md-medium:中等; lg-large:大;
  •  列(column)大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列
  •  每一列默认有左右15像素的 padding
  •  可以同时为一列指定多个设备的类名,以便划分不同份数 例如 class="col-md-4 col-sm-6"

3 列嵌套

栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系
列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。

1 <!-- 列嵌套 -->
2 <div class="col-sm-4">
3   <div class="row">
4     <div class="col-sm-6">小列</div>
5     <div class="col-sm-6">小列</div>
6   </div>
7 </div>

4 列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。

<!-- 列偏移 -->
<div class="row">
    <div class="col-lg-4">1</div>
    <div class="col-lg-4 col-lg-offset-4">2</div>
</div>

5 列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序。

1 <!-- 列排序 -->
2 <div class="row">
3     <div class="col-lg-4 col-lg-push-8">左侧</div>
4     <div class="col-lg-8 col-lg-pull-4">右侧</div>
5 </div>

6 响应式工具

为了加快对移动设备友好的页面开发工作,利用媒体查询功能,并使用这些工具类可以方便的针对不同设备展示
或隐藏页面内容。

Bootstrap 其他(按钮、表单、表格) 请参考Bootstrap 文档。

 

标签:md,框架,样式,Bootstrap,col,栅格,前端开发,页面
From: https://www.cnblogs.com/coderxueshan/p/17498537.html

相关文章

  • 腾讯技术团队最新出品,Android Framework系统框架底层原理解密
    今年以来,Android就业形势愈发严峻,各公司对开发人员的要求也是逐渐提高,在筛选Android程序员的时候也越来越看重其对于底层的理解和思考。作为一个AndroidAPP开发者,我们也不能当温水里的青蛙,必须对Android系统的组成和AndroidFramework的层次架构有所了解,才能突破和进阶。在这里就......
  • Java Web自定义MVC框架详解
    最近给学生讲JavaWeb,希望他们能够在学完这部分内容后自己实现一个MVC框架。但是突然发现百度上能搜索到的靠谱的资料并不是很多,有些只是原理没有代码实现,有些有代码实现但是对于初学者来说理解起来还是比较困难,于是决定把自己讲自定义MVC框架的内容放在这里分享给大家,不仅仅是代码......
  • 盘点2021Android框架百大排行榜 附:《Android百大框架源码解析》
    一.榜单介绍排行榜包括四大类:单一框架:仅提供路由、网络层、UI层、通信层或其他单一功能的框架混合开发框架:提供开发hybridapp、h5与webview结合能力、webapp能力的框架企业级开源项目:可以独立运行的app,有极高的学习价值、思路借鉴意义书籍类开源项目:类似Open-sourc-project这样的......
  • 基于python的 Web 开发框架学习笔记
    转载请注明来源:http://www.eword.name/Author:ewordEmail:[email protected]专题目录基于python的Web开发框架学习笔记详细记录Eword的python入门过程IDE环境推荐#【推荐】VSCode+Python+pip+Virtualenv或#【可选】PyCharm+Python+pip+Virtualenv......
  • 基于python的 Web 开发框架学习笔记
    转载请注明来源:http://www.eword.name/Author:ewordEmail:[email protected]专题目录基于python的Web开发框架学习笔记详细记录Eword的python入门过程IDE环境推荐#【推荐】VSCode+Python+pip+Virtualenv或#【可选】PyCharm+Python+pip+Virtualenv......
  • Python定时任务框架apscheduler
    Python定时任务框架apscheduler目录Python定时任务框架apscheduler安装基本概念介绍调度器的工作流程实例1-间隔性任务----每3秒打印出了当前时间。实例2-cron任务配置调度器方法一:方法二:启动调度器方法一:使用默认的作业存储器:方法二:使用数据库作为存储器:调度器事件监听说......
  • Android 组件化开发的新浪潮,成为了最受欢迎的框架, 有一种架构叫组件化,你还不会?
    有一种架构叫组件化,你还不会?组件化作为客户端项目架构侧一个非常重要的方案,近年来业界也在不断的探索以及各大厂都在不断的实践。每个大厂内部的各个Android开发团队也在尝试和实践不同的组件化方案,并且在组件化通信框架上也有很多高质量的产出。阿里面试最近听一位坚守在阿里的同......
  • Android - View框架的layout机制
    系统为什么要有layout过程?view框架经过measure之后,可以算出每一个view的尺寸大小,但是如果想要将view绘制的屏幕上,还需要知道view对应的位置信息。除此之外,对一个ViewGroup而言,还需要根据自己特定的layout规则,来正确的计算出子View的绘制位置,已达到正确的layout目的。位置是View相对......
  • 实战设计模式解耦项目网络层框架
    作者:依乐祝写在前面仔细想想我们的这个极简CMS系统,可以说很简单,简单到都无须进行特殊的架构设计,只需按照你所熟悉的编码方式直接进行快速的编码实现即可,如果做得好的话,访问量上来了你再加一个缓存处理完全能够支撑一定的并发!如下图所示:我们前期先进行单体架构的实现,等后期分布式系......
  • 基础的框架漏洞 6
    一、log4j远程代码执行漏洞原理:Log4j是Apache的一个开源项目,是一款基于Java的开源日志记录工具。该漏洞主要是由于日志在打印时当遇到~$后,以:号作为分割,将表达式内容分割成两部分,前面一部分prefix,后面部分作为key,然后通过prefix去找对应的iookup,通过对应的lookup实例调用lookup......