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

  • 希沃白板蒙层怎么添加(希沃白板蒙层怎么添加覆盖文字)

    希沃白板蒙层怎么添加(希沃白板蒙层怎么添加覆盖文字)

  • 闲鱼视频怎么保存到手机本地(闲鱼视频怎么保存到手机)

    闲鱼视频怎么保存到手机本地(闲鱼视频怎么保存到手机)

  • 支付宝在吗是什么东西(支付宝在吗是什么鬼)

    支付宝在吗是什么东西(支付宝在吗是什么鬼)

  • 微信支付二维码在哪(微信支付二维码在哪里找)

    微信支付二维码在哪(微信支付二维码在哪里找)

  • 电脑版怎样把表格放到桌面上(电脑上的表怎么传到手机上)

    电脑版怎样把表格放到桌面上(电脑上的表怎么传到手机上)

  • 淘宝上写了备注却没有了(淘宝上备注给卖家的自己还能看到吗)

    淘宝上写了备注却没有了(淘宝上备注给卖家的自己还能看到吗)

  • 抖音对方设置了隐私权限怎么关注呢(抖音对方设置了隐私设置,消息无法发送)

    抖音对方设置了隐私权限怎么关注呢(抖音对方设置了隐私设置,消息无法发送)

  • 苹果pro平板有几款(苹果pro平板有几种型号)

    苹果pro平板有几款(苹果pro平板有几种型号)

  • 朋友圈为什么不能点赞评论(朋友圈为什么不能发长视频)

    朋友圈为什么不能点赞评论(朋友圈为什么不能发长视频)

  • 电子秤显示888888不动怎么了(电子秤显示8888咋调)

    电子秤显示888888不动怎么了(电子秤显示8888咋调)

  • 11pro可以改高通基带吗(11pro能改5g吗)

    11pro可以改高通基带吗(11pro能改5g吗)

  • 键盘颜色怎么切换(键盘颜色怎么切换deil)

    键盘颜色怎么切换(键盘颜色怎么切换deil)

  • 字体加黑怎么弄(字体加黑怎么弄成白色)

    字体加黑怎么弄(字体加黑怎么弄成白色)

  • 小米手机呼吸灯闪烁开不了机(小米手机呼吸灯一闪一闪的)

    小米手机呼吸灯闪烁开不了机(小米手机呼吸灯一闪一闪的)

  • 用户与计算机网络的接口是(用户计算机网卡地址有什么用)

    用户与计算机网络的接口是(用户计算机网卡地址有什么用)

  • airpods耳机盒尺寸(airpods盒子尺寸大小)

    airpods耳机盒尺寸(airpods盒子尺寸大小)

  • 手机微博如何删除分组(手机微博如何删除浏览记录)

    手机微博如何删除分组(手机微博如何删除浏览记录)

  • 手机360怎么拦截广告(手机360怎么拦截广告弹窗)

    手机360怎么拦截广告(手机360怎么拦截广告弹窗)

  • 笔记本连显示器用什么线(笔记本连显示器老是黑屏)

    笔记本连显示器用什么线(笔记本连显示器老是黑屏)

  • 滴滴平台会监听通话吗(滴滴监听到私下交易)

    滴滴平台会监听通话吗(滴滴监听到私下交易)

  • 银联可信服务安全组件是什么(银联可信服务安全组件是什么东西)

    银联可信服务安全组件是什么(银联可信服务安全组件是什么东西)

  • 腾讯会员怎么两个人用(腾讯会员怎么两个手机用一个会员)

    腾讯会员怎么两个人用(腾讯会员怎么两个手机用一个会员)

  • 华为手机钉钉运动怎么打开(华为手机钉钉运动)

    华为手机钉钉运动怎么打开(华为手机钉钉运动)

  • 滴滴叫车怎么叫(滴滴叫车怎么叫面包车)

    滴滴叫车怎么叫(滴滴叫车怎么叫面包车)

  • 图片超链接怎么弄(图片超链接怎么取消)

    图片超链接怎么弄(图片超链接怎么取消)

  • 企业所得税法允许税前扣除的费用划分为
  • 如何确定合伙企业
  • 价税合计金额怎么算出税额
  • 投资收回的现金
  • 红冲去年暂估的费用怎么做账
  • 税金及附加怎么登账
  • 软件维护费属于费用还是资产
  • 股份有限公司个人所得税缴纳比例
  • 事业单位补发
  • 反写了可以重新申报吗
  • 小规模纳税人核算方式选什么
  • 融资性售后回租承租方出售资产为什么不缴纳增值税
  • 商品周转天数和周转率
  • 管理费用对所得收入影响
  • 股东退股可以支付现金吗
  • 车辆购置税如何计算
  • 个人在电商平台购买跨境商品需要缴纳什么税
  • 税收分类编码选错了会罚款么
  • 高温补贴需要交个人所得税吗2019
  • 产权转移书据有哪些
  • 消费金融服务要交税吗
  • 详解非税收入
  • 定期存款要交利息税吗
  • 废旧物资缴纳增值税政策
  • 未计提印花税会计分录
  • 腾讯电脑管家中有没有红色警戒下载玩
  • 网络端口被占用怎么解决
  • 增值税专用发票怎么开
  • 融资租赁和经营租赁哪个更常见
  • 经营营业执照以外
  • phpcookie
  • php面向对象是什么意思
  • 固定资产未提完折旧停止经营怎么处理
  • 文竹怎么养才能更旺盛浇点醋
  • 交易性金融资产的账务处理
  • 政府会计计提折旧会计分录2022
  • 融资租赁业务增资扩股
  • 企业残保金怎样申报
  • 跳出框架是什么意思
  • 蓝牙11
  • vue2.0安装
  • typescript tsconfig
  • 网上报税流程演示2019
  • 年终奖要计入工资吗
  • 零申报企业所得税季度申报表怎么填写
  • 不是公司员工差旅费可以入差旅费吗
  • 库存现金写三栏式明细账还是写现金日记账还是两个都写
  • 个人出租房屋需要缴纳个税吗
  • 物业公司广告费收入税率
  • 增值税税控系列是什么
  • 估价入库怎么记账
  • 公司向个人租赁房屋办公要交税吗?
  • 个人出租不动产月租金不超10万免税
  • 交城市维护建设税减半征收吗?
  • 实际报销金额
  • 制造费用和生产成本期末有余额吗
  • 税前税后利润弥补亏损的会计分录
  • MySql insert插入操作的3个小技巧分享
  • windows vista X86 RTM/OEM 中文正式版下载地址
  • 大白菜一键装机教程
  • ghost安装出错
  • win10开机内存就占了70 解决方法
  • ie10和ie11
  • 本地磁盘文件系统
  • ubuntu 电子书
  • ubuntu安装音乐软件
  • windows7搭建ftp
  • 电脑safari点击没反应
  • win10安装grads
  • 代码sd是什么意思
  • python根据ip获取主机名
  • 在windows下搭建snort和base
  • Android---43---Service之IntentService
  • 使用灭火器时要对准火焰的什么部位喷射
  • 房子总额70万首付多少
  • 定期定额纳税申报表应税项应填哪个数
  • 成都税务局发票查询
  • 上海地铁和公交乘车码
  • 以出让方式取得的土地
  • 昆明国家高新技术产业开发区管理委员会官方门户网站
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设