位置: IT常识 - 正文

BootStrap(栅格系统)(bootstrap 栅格)

编辑:rootadmin
BootStrap(栅格系统)

目录

1.什么是BootStrap

2.BootStrap简介 

BootStrap栅格layout

3.BootStrap常用样式与标签

常用样式

 4.BootStrap常用组件

按钮组件

面板组件

 导航条

表单


1.什么是BootStrap

推荐整理分享BootStrap(栅格系统)(bootstrap 栅格),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:bootstrap12栅格,bootstrap 12栅格原因,bootstrap 栅格,bootstrap栅格原理,bootstrap栅格原理,bootstrap12栅格,bootstrap栅格化,bootstrap12栅格,内容如对您有帮助,希望把文章链接给更多的朋友!

Bootstrap,来自 Twitter,是一款受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

大家可以在github上下载:https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip

要想使用BootStrap需要在页面上引用BootStrap的支持。

<html><head> <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> <script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script> <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script></head><body></body></html>

注意:三行代码都需是min(min意为机器识别),assets建议与html文件在同一个根目录下,以防造成路径错误

2.BootStrap简介 

bootstrap简介,控制大小,控制颜色,12栅格排版.bootstrap常用表单样式、表格样式

BootStrap栅格layout

BootStrap将网页均分为12分(12个格子),响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

 使用栅格需要系统注意点

1 行必须放置在.container(固定宽度)或 .container-fluid (100% 宽度)中,以便获得适当的对齐alignment和内边距padding 2 使用行来创建列的水平组 3 内容应该放置在列内,唯有列可以是行的直接子元素 4 预定义的网格类,比如.row和.col-xs-x,可用于快速创建网格布局。 5 列通过内边距(padding)来创建列内容之间的间隙

col-lg-*   large  大型设备(大台式电脑,1200px 起)  col-md-*   middle  中型设备(台式电脑,992px 起) col-sm-*   small   小型设备(平板电脑,768px 起) col-xs-*   x-small  超小设备(手机,小于 768px)

栅格样式描述col-lg-*large 大型设备(大台式电脑,1200px 起col-md-*middle 中型设备(台式电脑,992px 起)col-sm-*small 小型设备(平板电脑,768px 起)col-xs-*x-small 超小设备(手机,小于 768px)3.BootStrap常用样式与标签常用样式样式描述.container让元素在容器中水平居中.col-md-4占几个栅格.col-md-ofset-4左边空出几个栅格.col-md-push-8向右浮动几个栅格col-md-pull-2向左浮动几个栅格<html> <head> <meta charset="utf-8"/> <title></title> <link href="css/bootstrap.min.css" rel="stylesheet"/> <script src="js/jquery-3.5.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <style type="text/css"> .row div{ background-color: aqua; border: 1px solid black; } </style> </head><body> <div class="container"> <!-- 行元素 --> <div class="row"> <div class="col-md-4">4</div> <div class="col-md-4">4</div> <div class="col-md-4">4</div> </div> <!-- 行元素 --> <div class="row"> <div class="col-md-1">1</div> <div class="col-md-1">1</div> <div class="col-md-1">1</div> <div class="col-md-1">1</div> <div class="col-md-1">1</div> <div class="col-md-1">1</div> <div class="col-md-1">1</div> <div class="col-md-1">1</div> <div class="col-md-1">1</div> <div class="col-md-1">1</div> <div class="col-md-1">1</div> <div class="col-md-1">1</div> </div> <!-- 行元素 --> <div class="row"> <div class="col-md-6">6</div> <div class="col-md-6">6</div> </div> <!-- 行元素 --> <div class="row"> <div class="col-md-3">3</div> <div class="col-md-4">4</div> <div class="col-md-5">5</div> </div> <!-- 网格偏移:右侧兄弟元素会被向右推移,但不会被覆盖--> <div class="row"> <!-- 将该元素位置向右偏移2个位置,总占据3个格栅--> <div class="col-md-1 col-md-offset-2">1</div> <!-- 将该元素位置向右偏移3个位置,总占据4个格栅--> <div class="col-md-1 col-md-offset-3">1</div> <!-- 将该元素位置向右偏移3个位置,总占据5个格栅--> <div class="col-md-1 col-md-offset-4">1</div> </div> <!-- 网格排序:右侧兄弟元素不会被推移,可能会被兄弟元素覆盖--> <div class="row"> <!-- 将该元素位置向右偏移3个位置,只占据1个位置,可能会被兄弟元素覆盖--> <!-- push:向右浮动,pull:向左浮动--> <div class="col-md-1 col-md-push-3" style="background-color: red;">1</div> <div class="col-md-1">1</div> <div class="col-md-1">1</div> </div> </div></body></html>

样式:

注意: 网格偏移:右侧兄弟元素会被向右推移,但不会被覆盖

        网格排序:右侧兄弟元素不会被推移,可能会被兄弟元素覆盖

        列嵌套:被嵌套的行又会再分出12个格栅

<!-- 列嵌套--> <div class="row"> <div class="col-md-2" style="background-color: red;">2</div> <div class="col-md-4" style="background-color: blue;">4</div> <div class="col-md-6" style="border: 0;"> <div class="row" style="border: 0;"> <!-- 被嵌套的行又会再分出12个格栅--> <div class="col-md-4" style="background-color: yellow;">子4</div> <div class="col-md-4" style="background-color: yellow;">子4</div> <div class="col-md-4" style="background-color: yellow;">子4</div> </div> </div> </div> 4.BootStrap常用组件按钮组件

语法:

<input type=button class="btn" value="我是按钮">

提示:

btn是所有按钮的基本样式

<div class="container"> <button>原生按钮</button> <button class="btn btn-default">默认样式按钮</button> <button class="btn btn-inof">info</button> <button class="btn btn-warning">warning</button> <button class="btn btn-danger">danger</button> <button class="btn btn-primary">primary标准</button> <button class="btn btn-link">link</button> </div>

样式:

BootStrap(栅格系统)(bootstrap 栅格)

面板组件

​ 面板组件.panel提供基本的边界和内部,来包含内容

<div class="container"> <div class="panel panel-default"> 这是面板 <div class="panel panel-heading"> 这是面板头部</div> <div class="panel-body"> 这是面板内容 </div> </div> </div>

效果图如下:

 导航条

导航条是在您的应用或网站中作为导航标头的响应式元组件。它们在移动设备上可以折叠(并且可开可关),且在可用的视口宽度增加时变为水平展开模式

<html> <head> <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> <script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script> <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <ul class="nav nav-tabs"> <li class="active"><a href="#">主页</a></li> <li><a href="#">美食</a></li> <li><a href="#">电影</a></li> <li><a href="https://www.baidu.com">百度</a></li> </ul> </div> </body></html>

格式如下图所示: 

导航方式多重多样:有以下几种

标签式导航

class="nav nav-tabs"

胶囊式

class="nav nav-pills"

面包屑式导航

class="breadcrumb"

分页式导航

class="pagination"

翻页式导航

​​​​​​​class="pager"表单

 将表单放置于.navbar-form之内可以呈现很好的垂直对齐,并在较窄的viewport中呈现折叠状态。使用对齐选项可以确定其在导航条上出现的位置。

分类: 垂直表单 vertical(默认) class="form-vertical" 内联 [所有的表单元素显示在⼀⾏内] inline class="form-inline" ⽔平表单 horizontal [分两列,标签,元素] class="form-horizontal"  |-label与input元素放在⼀个div class为form-group以及control-label  |-表单元素放在<div class="col-md-x">内部,并在表单元素指定 class为form-control

<!--          表单样式:         1.文本框:         form-control         .input-lg  .input-sm:控制表单大小      -->

<!--              表单布局样式:             .form-horizontal:设置垂直表单             .form-inline:设置内联表单,水平显示          -->

本文链接地址:https://www.jiuchutong.com/zhishi/297749.html 转载请保留说明!

上一篇:Vue下载安装步骤的详细教程(亲测有效) 1(下载vue2)

下一篇:D3.js基础教程(d3.js下载)

  • 开关柜型号含义(开关柜设计)(开关柜型号含义图片)

    开关柜型号含义(开关柜设计)(开关柜型号含义图片)

  • 微信红包记录怎么查一个人的(微信红包记录怎么加回好友)

    微信红包记录怎么查一个人的(微信红包记录怎么加回好友)

  • ccd相机是胶片机吗(ccd相机和胶片相机区别)

    ccd相机是胶片机吗(ccd相机和胶片相机区别)

  • icould云盘是什么意思(icould云盘是干啥的)

    icould云盘是什么意思(icould云盘是干啥的)

  • iphone8plus耳机孔在哪里(苹果8plus耳机孔图片)

    iphone8plus耳机孔在哪里(苹果8plus耳机孔图片)

  • 微信解封刷脸过不去怎么办(微信号刷脸解封的后果)

    微信解封刷脸过不去怎么办(微信号刷脸解封的后果)

  • 讯飞语记需要付费吗(讯飞语记付费版破解VIP)

    讯飞语记需要付费吗(讯飞语记付费版破解VIP)

  • 小米充电宝和红米充电宝有什么区别(小米充电宝红米手机可以用吗)

    小米充电宝和红米充电宝有什么区别(小米充电宝红米手机可以用吗)

  • 如何将多张图片合成一个文件(如何将多张图片打印在一张A4纸上)

    如何将多张图片合成一个文件(如何将多张图片打印在一张A4纸上)

  • iphone se2支持5g吗(se2可以5g吗)

    iphone se2支持5g吗(se2可以5g吗)

  • 抖音年纪计算怎么做(抖音年龄计算)

    抖音年纪计算怎么做(抖音年龄计算)

  • 多媒体系统的组成有哪些(多媒体系统的组成从底层到高层依次为什么)

    多媒体系统的组成有哪些(多媒体系统的组成从底层到高层依次为什么)

  • 爱奇艺会员一个月怎么算(爱奇艺会员一个季度是几个月)

    爱奇艺会员一个月怎么算(爱奇艺会员一个季度是几个月)

  • hryal00t是什么型号(hryal00是什么型号)

    hryal00t是什么型号(hryal00是什么型号)

  • 怎么增加手机声音(如何增加手机的声音效果)

    怎么增加手机声音(如何增加手机的声音效果)

  • vivoz1i支持多少w快充(vivoz1支持多少瓦)

    vivoz1i支持多少w快充(vivoz1支持多少瓦)

  • Reno Ace怎么更改系统时间(oppo reno ace怎么恢复出厂设置)

    Reno Ace怎么更改系统时间(oppo reno ace怎么恢复出厂设置)

  • 电脑版微信视频怎么开(电脑版微信视频聊天摄像头为什么用不了)

    电脑版微信视频怎么开(电脑版微信视频聊天摄像头为什么用不了)

  • iphone怎么设置私密相册(iphone怎么设置私密视频)

    iphone怎么设置私密相册(iphone怎么设置私密视频)

  • airpods和普通蓝牙耳机有什么区别(airpods与其他蓝牙耳机对比评测)

    airpods和普通蓝牙耳机有什么区别(airpods与其他蓝牙耳机对比评测)

  • 设置电话打不进来(设置电话打不进来可以打出去)

    设置电话打不进来(设置电话打不进来可以打出去)

  • 苹果x耳机孔在哪(苹果X耳机孔在哪)

    苹果x耳机孔在哪(苹果X耳机孔在哪)

  • 优酷怎么设置只看主角(优酷怎么设置只看谁的片段)

    优酷怎么设置只看主角(优酷怎么设置只看谁的片段)

  • 1660ti配什么cpu(1660ti配什么cpu2023)

    1660ti配什么cpu(1660ti配什么cpu2023)

  • 打印凭证怎么设置纸张(打印凭证怎么设置成信封c5)

    打印凭证怎么设置纸张(打印凭证怎么设置成信封c5)

  • Win10中无法设置PIN(win10无法设置pin码怎么办)

    Win10中无法设置PIN(win10无法设置pin码怎么办)

  • e_srcv03.exe是什么进程 e_srcv03进程是安全程序吗(csrsv.exe是什么)

    e_srcv03.exe是什么进程 e_srcv03进程是安全程序吗(csrsv.exe是什么)

  • 药店的主营业务有哪些
  • 合营企业和联营企业会计核算
  • 小规模季度开票超过30怎么纳税
  • 外经证核销反馈表
  • 小规模纳税人超500万后何时认定为一般纳税人
  • 利用个独企业避税犯法吗
  • 工资结算汇总表会计科目
  • 金税三期账号是自己申请吗
  • 销售自产设备税率
  • 软件著作权销售好做吗
  • 工程检测费占工程金额多少
  • 普通发票跨年作废有影响吗
  • 异地劳务公司所在地怎么交税
  • 生育津贴做账法会计准则
  • 油票发票可以抵进项税吗
  • 增值税专票代码TZD0085什么意思
  • 资本公积盈余公积区别
  • 体育用品怎么才能买到
  • 领备用金时会计怎么做账
  • 小规模纳税人附加税减半征收政策2023
  • 劳务报酬个税计算公式表
  • 国外差旅费如何报销
  • 销售环节的运费怎么算
  • win7浏览器显示证书错误怎么解决
  • php实现的mongodb操作类实例
  • win10更新kb5006670
  • 暂存款借方余额
  • 员工油费补贴过期怎么办
  • 前期差错更正怎么计算
  • 商业企业会计科目表
  • 公司怎么查已报销发票
  • 我国居民企业甲在境外进行了投资
  • 矿业财务好做吗
  • Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流
  • 单图像三维重建
  • 广告代理费收取比例
  • 去年计提的费用所得税汇算清缴之前冲销就不调整吗
  • 为什么会有不同的人种
  • 人力资源公司如何找客户
  • 已认证未抵扣完的进项
  • php判断是否存在某字符串
  • 富文本功能
  • 税控盘抵减增值税
  • 劳务分包的三种形式
  • 销售货物应税劳务清单怎么填
  • 成本票和进项票举例说明
  • 接受捐赠计入
  • mysql乱码问题怎么解决
  • 会计专业技术资格初级是什么职称
  • 修理费用的会计怎么做账
  • 增值税退税是否算主营业务收入
  • 到银行提取备用金
  • 固定资产一次计提折旧
  • 卖固定资产如何做账
  • 应付票据是
  • 对于成员单位归集至集团母公司账户的资金
  • 接待客户的旅游活动
  • 政府投资资产会计核算科目
  • 企业的利润怎么提出来
  • 工资达不到5000个人所得税
  • 财务费用范畴
  • 本期摊余成本
  • 一个企业建账需要注意些什么
  • win7激活失败提示错误代码0x80072F8F
  • win7旗舰版系统激活码
  • Windows Server 2008添加Hyper-V组件
  • win8删除所有文件
  • dropbox app
  • linux怎么添加新用户
  • xcode怎么新建项目
  • opengl visual studio
  • 深入理解ts
  • javascript含义
  • 安卓中adapter
  • unity c语言
  • Unity3D&&TexturePacker
  • 基于bootstrap的网站
  • 小程序河南税务局
  • 开量贩ktv一年能赚多少
  • 山东省工会经费收支管理办法
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设