首页 > 其他分享 >Bootstrap

Bootstrap

时间:2023-01-01 23:56:18浏览次数:60  
标签:插件 格子 Bootstrap 栅格 页面 设备

1.概念:一个前端开发的框架,Bootstrap,来自Twitter,是目前很受欢迎的前端框架。Bootstrap是基于HTML,CSS,JavaScript的,他简介灵活,让web开发更加快捷

  *框架:一个半成品软件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果  

  *好处:

    1.定义了很多css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。

    2.响应式布局:

      *同一套页面可以兼容不同分辨率的设备

      *实现:依赖于栅格系统,将一行平均分成12个格子,可以指定元素占几个格子

      *步骤:

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

          *容器分类:

            1.container:每一种设备宽度是不一样的

            2.container-fluid:每一种设备都是100%宽度

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

        3.定义元素。指定该元素在不同的设备上,所占的格子数目。

  *注意事项:

    1.一行中如果格子数目超过12,则超出部分自动换行

    2.栅格类属性向上兼容

    3.如果真实设备宽度小于了设置栅格类属性的设备代码的最小值,默认会一个元素沾满一整行。

2.快速入门:

  1.下载Bootstrap。

  2.在项目中将这三个文件夹复制。

  3.创建html页面,引入必要的资源文件。

3.在文档中有一些格式可以直接拿来用(Carousel · Bootstrap v4 中文文档 v4.6 | Bootstrap 中文网 (bootcss.com))不做示例了

 

  

标签:插件,格子,Bootstrap,栅格,页面,设备
From: https://www.cnblogs.com/lin513/p/17019282.html

相关文章

  • bootstrap与javascript
    1、bootstrap依赖bootstrap依赖javascript类库,jQuery下载jQuery,在页面上应用jQuery在页面上应用bootstrap的js类库<scriptsrc="static/js/jquery-3.6.0.min.js"></s......
  • 用户登录界面(Bootstrap)入门教程01(适合初学者)
    首先博主也是小白,之前没学过前端,花了一晚上做了个登录界面,想分享给大家,比较适合初学者来快速学习,博主以后也好好学基础的前端。首先先上我做的登录界面的图:因为博主水平有限......
  • vue3使用bootstrap的简单加载遮罩层
    之前有使用过bootstrap做过一个简单的加载遮罩层,现把它加入到vue中。加载遮罩层一般来讲整个app共用一个就可以,因此放到App.vue中,为不影响其它的业务逻辑,放到</template>......
  • 解决Bootstrap布局注册表单input标签前增加必填项*提示与input框不在同一行问题
    解决Bootstrap布局注册表单input标签前增加必填项*提示与input框不在同一行问题 注册表单部分代码如下:1<formid="registForm"class="form-horizontal"action=......
  • bootstrap-switch
    <inputtype="checkbox"name="switch"/><!--<inputtype="checkbox"name="switch"checked/>默认启动--><linkhref="https://cdn.bootcss.com/bootstrap......
  • bootstrap表单
    内联表单:   <formclass="rowg-3"role="form"><divclass="col-md-2">......
  • BootStrap响应式项目实战之世界杯网页设计
    ​​视频​​BootStrap实战目标响应式布局复习HTML5的复习CSS3的复习了解BootStrap一.复习响应式布局:页面可以随着设备的变化而动态改变。淘宝:pc端一套页面:不能随着屏幕的......
  • 6 使用 Bootstrap 前端框架
    使用Bootstrap前端框架Bootstrap是什么?基于HTML,CSS,JS的简洁灵活的流行前端框架及交互组件集​​​Bootstrap·全球最流行的HTML、CSS和JS工具库​​为快速WEB开发......
  • 40 个超棒的免费 Bootstrap HTML5 网站模板
     ​​​​Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网......
  • 15 个很棒的 Bootstrap UI 界面编辑器
    [导读]​​BootstrapMagic​​​​BootSwatchr​​​​BootstrapLiveEditor​​​​FancyBoot​​ ​​StyleBootstrap​​​​Lavish​​​​BootstrapThemeRol......