初识BootStrap

编程入门 行业动态 更新时间:2024-10-18 16:46:43

初识<a href=https://www.elefans.com/category/jswz/34/1768895.html style=BootStrap"/>

初识BootStrap

概念:一个前端开发的框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。
    框架:一个半成品软件,开发人员可以在框架基础上,在进行开发,简化编码。
    好处:
       1.定义好了很多的CSS样式和js插件。开发人员直接可以使用这些样式和插件得到丰富的页面效果。
       2.响应式布局。同一套页面可以兼容不同分辨率的设备。

响应式分布
实现:依赖于栅格系统:将一行平均分成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)。
注意:
  1. 一行中如果格子数目超过12,则超出部分自动换行。
  2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
  3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值,会一个元素沾满一整行。
CSS样式和JS插件
全局CSS样式:
  按钮:
  图片:
  表格:
  表单:
组件:
   导航条:
   分页条:
插件:
   轮播图:

更多推荐

初识BootStrap

本文发布于:2024-03-13 21:43:38,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1734915.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:BootStrap

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!