位置: 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下载)

  • 新开网店如何利用淘宝客推广淘宝店(新开网店如何利润高)

    新开网店如何利用淘宝客推广淘宝店(新开网店如何利润高)

  • 华为gt3pro怎么调时间(华为gt3pro功能)

    华为gt3pro怎么调时间(华为gt3pro功能)

  • vivos6带耳机的吗(vivos6配套有没有耳机)

    vivos6带耳机的吗(vivos6配套有没有耳机)

  • 小米蓝牙耳机左右不能同时配对(小米蓝牙耳机左边的连不上)

    小米蓝牙耳机左右不能同时配对(小米蓝牙耳机左边的连不上)

  • nova3e的手机壳3i一样吗(nova 3手机壳)

    nova3e的手机壳3i一样吗(nova 3手机壳)

  • 不同牌子的内存条能双通道吗(不同牌子的内存条能混搭用吗)

    不同牌子的内存条能双通道吗(不同牌子的内存条能混搭用吗)

  • 显示脱机使用打印机是什么意思(显示脱机使用打印机是怎么回事)

    显示脱机使用打印机是什么意思(显示脱机使用打印机是怎么回事)

  • 计算机病毒是指在计算机磁盘上进行自我复制的(计算机病毒是指具有破坏性的)

    计算机病毒是指在计算机磁盘上进行自我复制的(计算机病毒是指具有破坏性的)

  • 拼多多退货包运费是商家出还是平台出(拼多多退货包运费规则)

    拼多多退货包运费是商家出还是平台出(拼多多退货包运费规则)

  • 如何单独设置联系人铃声(如何单独设置联系人)

    如何单独设置联系人铃声(如何单独设置联系人)

  • 抖音超级乐迷是啥(抖音超级乐迷是什么)

    抖音超级乐迷是啥(抖音超级乐迷是什么)

  • 微信解封没有收到验证码是怎么回事(微信解封没有收到好友的邀请)

    微信解封没有收到验证码是怎么回事(微信解封没有收到好友的邀请)

  • ipad可以用airpods吗(ipad可以用airpods充电器吗)

    ipad可以用airpods吗(ipad可以用airpods充电器吗)

  • 为什么抖音打不开(为什么抖音打不了视频)

    为什么抖音打不开(为什么抖音打不了视频)

  • 京东买的小米售后找谁(京东买的小米售后维修)

    京东买的小米售后找谁(京东买的小米售后维修)

  • 表格内部框线怎么设置(表格内部框线怎么加粗)

    表格内部框线怎么设置(表格内部框线怎么加粗)

  • 路由器mu mimo是什么意思(路由器mu-mimo是什么)

    路由器mu mimo是什么意思(路由器mu-mimo是什么)

  • 华为mate30圆点怎么设置(华为mate30pro小圆点)

    华为mate30圆点怎么设置(华为mate30pro小圆点)

  • hdfs默认block size的大小是(hdfs默认block大小是)

    hdfs默认block size的大小是(hdfs默认block大小是)

  • 微信记录不小心删掉了还能恢复吗(微信记录不小心删了怎么恢复)

    微信记录不小心删掉了还能恢复吗(微信记录不小心删了怎么恢复)

  • 微信证件照功能在哪里(微信的证件照功能在哪)

    微信证件照功能在哪里(微信的证件照功能在哪)

  • 手机连接无线网出现感叹号(手机连接无线网卡顿怎么解决)

    手机连接无线网出现感叹号(手机连接无线网卡顿怎么解决)

  • 个人所得税全年一次性奖金优惠政策
  • 农业生产成本二级科目有福利费支出吗
  • 临时设施摊销方案怎么写
  • 事业单位下属企业员工转事业编
  • 五险一金计提缴纳分录
  • 辅导期增值税一般纳税人申报材料
  • 商业企业能否计税
  • 房地产企业会计制度
  • 旧设备用于投资是否应按视同销售处理
  • 税收实体法要素中的基础性要素
  • 已认证未抵扣什么意思
  • 预收账款多了好还是少了好
  • 总资产周转率ttm
  • 购入固定资产税费怎么算
  • 工会经费由企业和职工共同负担吗
  • 筹建期间发生的费用计入什么科目
  • 一般户转钱到基本户
  • 商品条码续展费怎么退
  • 新会计制度下如何做账
  • 票据追索权纠纷被告
  • php的运行机制与什么有关
  • 企业应纳所得税计算公式
  • wordpress使用
  • vue编写网页
  • ensmix32.exe进程安全吗 ensmix32进程是什么文件产生的
  • 销售多余材料的收入会计分录
  • 房屋权属变更什么意思
  • 持有至到期投资在资产负债表怎么填
  • uniapp下拉菜单
  • 前端file对象
  • 控制器操作视频
  • ai的工具介绍
  • spring boot s
  • mail命令发送邮件
  • jvm jmm
  • 成本收入核算表
  • dedecms5.7
  • 享受专项附加扣除要什么时候申报
  • 有留抵税额可以注销吗
  • sql server 2005 service pack3
  • 个体户经营所得税率表
  • 权益法的股权比例
  • 应收账款少收会计分录
  • 福利费可以不走应付职工薪酬吗
  • 汇算清缴缴纳的所得税怎么做账
  • 公司车辆交强险怎么网上买
  • 暂估费用票的账务处理
  • 打官司产生的费用开成什么发票
  • 电子缴税付款凭证是什么结算方式
  • 哪些个体户要报残保金
  • 投资款不属于收入吗
  • 无法在你的位置安装windows
  • MySQL关于exists的一个bug
  • mysql主从复制作用
  • mysql命令执行顺序
  • mysql误删记录查询
  • sql的all和any
  • win10系统不能打印图片
  • windows server 2008 r2有哪些特点
  • xp系统插u盘没反应怎么解决
  • win8系统切换桌面
  • win10装360安全卫士
  • 如何解决心脏供血不足
  • dns轮询是什么意思
  • u3d怎么导入贴图
  • bootstrap表格内容模板
  • 用linux搭建服务器
  • js 模拟滑动
  • gimp批处理
  • Node.js node-schedule定时任务隔多少分钟执行一次的方法
  • cls方法可以清除
  • nodejs中的session
  • python字符串大全
  • javascript学习指南
  • android实现简单的计算机界面
  • 选矿比怎么算
  • 威海行风热线实时收听
  • 样板房费用属于开发成本的什么明细科目
  • 地税税额怎么计算
  • 涉密人员保密教育培训可以采取
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设