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

  • 华为nova7支持红外功能的吗(华为nova7支持红外吗)

    华为nova7支持红外功能的吗(华为nova7支持红外吗)

  • 微信逻辑错误无法登录(微信提示逻辑错误怎么回事)

    微信逻辑错误无法登录(微信提示逻辑错误怎么回事)

  • cad相切命令快捷键(cad相切命令快捷键在哪)

    cad相切命令快捷键(cad相切命令快捷键在哪)

  • 拼多多一天可以帮别人助力多少次(拼多多一天可以退货多少次)

    拼多多一天可以帮别人助力多少次(拼多多一天可以退货多少次)

  • 微信聊天记录多久自动删除(微信聊天记录多少g怎么看)

    微信聊天记录多久自动删除(微信聊天记录多少g怎么看)

  • 手机安全模式是干嘛的(手机安全模式是什么原因造成的)

    手机安全模式是干嘛的(手机安全模式是什么原因造成的)

  • 双11订单一般多久发货(双11一般多久到货)

    双11订单一般多久发货(双11一般多久到货)

  • 抖音播放量多少算热门(抖音播放量多少人工审核)

    抖音播放量多少算热门(抖音播放量多少人工审核)

  • macbook休眠后唤醒一直转圈(macbook睡眠后唤醒屏幕不会亮)

    macbook休眠后唤醒一直转圈(macbook睡眠后唤醒屏幕不会亮)

  • 微信号不是手机号怎么改成手机号(微信号不是手机号能用手机号加吗)

    微信号不是手机号怎么改成手机号(微信号不是手机号能用手机号加吗)

  • 没有打开该文件的应用怎么办(没有打开该文件的权限)

    没有打开该文件的应用怎么办(没有打开该文件的权限)

  • 抖音音浪和抖币的区别(抖音音浪和抖币哪个划算)

    抖音音浪和抖币的区别(抖音音浪和抖币哪个划算)

  • 华为怎么选择卡2上网(华为怎么选择卡2发信息)

    华为怎么选择卡2上网(华为怎么选择卡2发信息)

  • 双变频和单变频的区别(双变频和单变频的冰箱)

    双变频和单变频的区别(双变频和单变频的冰箱)

  • nova6se上市时间(华为nova6se上市时间及上市日期)

    nova6se上市时间(华为nova6se上市时间及上市日期)

  • 手机怎么添加语言(手机怎么添加语言输入法)

    手机怎么添加语言(手机怎么添加语言输入法)

  • 小米ai音箱不联网能用吗(小米ai音箱不联网怎么办)

    小米ai音箱不联网能用吗(小米ai音箱不联网怎么办)

  • 照片怎么弄上下黑边(照片怎么弄上下拼图)

    照片怎么弄上下黑边(照片怎么弄上下拼图)

  • 苹果8p屏幕划痕如何修复(苹果8p屏幕划伤如何解决)

    苹果8p屏幕划痕如何修复(苹果8p屏幕划伤如何解决)

  • 苹果11呼吸灯在哪里设置(苹果11呼吸灯在前面还是后面)

    苹果11呼吸灯在哪里设置(苹果11呼吸灯在前面还是后面)

  • 手机usb共享网络给电脑(手机usb共享网络无法打开)

    手机usb共享网络给电脑(手机usb共享网络无法打开)

  • 发圈文字折叠了怎么办(发朋友圈字折叠)

    发圈文字折叠了怎么办(发朋友圈字折叠)

  • 金立手机如何退出安全模式(金立手机如何退出开发者模式)

    金立手机如何退出安全模式(金立手机如何退出开发者模式)

  • 小米8边充电边用耳机(小米边充电边玩会爆炸吗)

    小米8边充电边用耳机(小米边充电边玩会爆炸吗)

  • 增值税发票综合服务平台错误代码35
  • 汇算清缴补交所得税会计分录小企业会计政策
  • 差额税征收标准
  • 车间人员负担的工会经费
  • 给中间人回扣犯罪吗
  • 增值税发票四舍五入
  • 火车票抵扣进项税怎么计算
  • 自己申报个人所得税需要补缴,必须自己申报自己补缴吗
  • 期末结转增值税
  • 公司筹建期间发生的费用怎么处理
  • 商贸企业购进商品怎么做成本
  • 民办非企业单位属于什么类型
  • 一般纳税人购买并销售免税货物所发生的运输费用
  • 非现金资产债务怎么算
  • 辅助材料属于成本吗
  • 抵债资产账务处理2021年
  • 进项发票失控账务处理
  • 外出经营预缴税
  • 货物赔偿款会计分录
  • 计提社保个人部分需要计提吗
  • 发票逾期未认证个人要承担责任吗
  • 建筑工程公司项目经理职责
  • 网络综合布线开关在哪
  • 资产总额和净资产总额的区别
  • 贴现率与再贴现率计算机行业是好多
  • 办公室电话费
  • 补发上月工资如何计税
  • 财务中暂估入账会计分录
  • 权益净利率是什么意思啊
  • 固定资产净值与原值的区别
  • PHP:pg_escape_literal()的用法_PostgreSQL函数
  • php @method
  • 阿里云搭建hexo
  • 合并报表内部交易顺流逆流
  • 约克大教堂是基督教吗
  • 营业执照上住所和经营场所
  • 遮天传游戏视频
  • Mybatis+Servlet+Mysql 整合的一个小项目:对初学者非常友好,有助于初学者很快的上手Java Web
  • webpack devserver contentbase
  • vue3 $bus
  • 百度ai修复照片
  • 费用多报销了,但已经给了,怎么办
  • 企业增值税征收范围
  • 售后维修的会计分录
  • 城镇土地使用税怎么算
  • 机票差额发票和全额发票的区别
  • 捐赠支出税前扣除比例
  • 房地产企业怎么交房产税
  • 公司注销开户许可证是不是要上交
  • 简易征收能抵扣进项税吗
  • 私营企业固定资产法律制度
  • sql server 性能调优
  • win7下安装ubuntu
  • win10免费安装吗
  • windows hellopin是什么意思
  • linux 详解
  • imac如何删除客人用户
  • 苹果系统如何访问u盘
  • linux安装软件怎么安装
  • win7z
  • win10系统开机蓝屏得重启后才能开机
  • awk结果输出到文件
  • centos 删除恢复
  • win7系统突然打印不了
  • cocos creator 优化 drawcall 合并
  • cocos2dx游戏有哪些
  • spiral框架
  • firefox background-image垂直平铺问题的解决方法
  • Unity C#用WWW操作数据库
  • android 侧滑页面
  • 深入理解javascript特性
  • python web ui
  • 简述activity的生命周期中有哪几种状态
  • JavaScript Math.round() 方法
  • 江苏电子税务局客服电话
  • 安徽农金如何查询开户行
  • 公共配套设施如何计算成本
  • 青岛怎样网上交医保
  • 居民个人从境外公司获得分红
  • 公司以融资租赁形式从事非法放贷业务,,能否让法院判
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设