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

  • 三星s10+屏幕尺寸(三星s10屏幕尺寸参数)

    三星s10+屏幕尺寸(三星s10屏幕尺寸参数)

  • nova7se和nova6有哪些区别(nova7和nova6se哪个好)

    nova7se和nova6有哪些区别(nova7和nova6se哪个好)

  • 魅族17支持无线充电功能吗(魅族17pro无线)

    魅族17支持无线充电功能吗(魅族17pro无线)

  • 检测到闪电接口有液体(检测到闪电接口有液体无法充电)

    检测到闪电接口有液体(检测到闪电接口有液体无法充电)

  • 电脑蓝屏0x0000001e(电脑蓝屏0x0000001A是什么问题)

    电脑蓝屏0x0000001e(电脑蓝屏0x0000001A是什么问题)

  • 微信注册环境异常是什么原因(微信注册环境异常请稍后重试是什么意思)

    微信注册环境异常是什么原因(微信注册环境异常请稍后重试是什么意思)

  • pci简易通讯控制器是什么驱动(pci简易通讯控制器驱动怎么安装)

    pci简易通讯控制器是什么驱动(pci简易通讯控制器驱动怎么安装)

  • cdy-an90是什么型号(cda-an90)

    cdy-an90是什么型号(cda-an90)

  • vivox9plus怎么截屏手机屏幕(vivox9plus怎么截长图)

    vivox9plus怎么截屏手机屏幕(vivox9plus怎么截长图)

  • 抖音没有实名认证,对上热门有影响吗(抖音没有实名认证发视频会被限流吗)

    抖音没有实名认证,对上热门有影响吗(抖音没有实名认证发视频会被限流吗)

  • iphonexs发热卡顿严重(苹果xs容易发热,发热后很卡)

    iphonexs发热卡顿严重(苹果xs容易发热,发热后很卡)

  • 苹果11pro max怎么下载铃声(苹果11promax怎么样 优点和缺点)

    苹果11pro max怎么下载铃声(苹果11promax怎么样 优点和缺点)

  • mate20怎么有2层膜(华为mate20第二屏怎样打开)

    mate20怎么有2层膜(华为mate20第二屏怎样打开)

  • 荣耀v20怎么打开后台(荣耀v20怎么打开红外功能)

    荣耀v20怎么打开后台(荣耀v20怎么打开红外功能)

  • 手机图片怎么直接打印(手机图片怎么直接转到u盘上)

    手机图片怎么直接打印(手机图片怎么直接转到u盘上)

  • 苹果11怎么充电(苹果11怎么充电到80就不充了)

    苹果11怎么充电(苹果11怎么充电到80就不充了)

  • 淘新闻绑定微信安全吗(淘新闻为什么显示网络错误)

    淘新闻绑定微信安全吗(淘新闻为什么显示网络错误)

  • 苹果x可以控制空调吗(苹果x控制中心变成了搜索)

    苹果x可以控制空调吗(苹果x控制中心变成了搜索)

  • 三星s8录屏没有声音(三星s8录屏不见了)

    三星s8录屏没有声音(三星s8录屏不见了)

  • vivox27摄像头怎么关闭(vivox27摄像头怎么变颜色)

    vivox27摄像头怎么关闭(vivox27摄像头怎么变颜色)

  • 苹果airpods安卓能用吗(苹果airpods可以连接安卓手机吗)

    苹果airpods安卓能用吗(苹果airpods可以连接安卓手机吗)

  • 腾讯视频hdr10怎么开(腾讯视频hdr怎么开)

    腾讯视频hdr10怎么开(腾讯视频hdr怎么开)

  • 手机空白符号复制(手机空白符号复制在哪里)

    手机空白符号复制(手机空白符号复制在哪里)

  • 全民k歌怎么让别人约唱(全民k歌怎么让别人看不到我在线)

    全民k歌怎么让别人约唱(全民k歌怎么让别人看不到我在线)

  • 使用vant-uploader上传照片无法删除的解决(使用筷子就餐会不会传染乙肝病毒)

    使用vant-uploader上传照片无法删除的解决(使用筷子就餐会不会传染乙肝病毒)

  • python-数据描述与分析(1)(数据结构—python语言描述)

    python-数据描述与分析(1)(数据结构—python语言描述)

  • 个人独资企业需要报税吗
  • 个人出租汽车
  • 增值税发票认证在哪里
  • 稿酬所得个人所得税税率表
  • 公司买手表账务处理
  • 买新车时旧车置换新车划算吗
  • 个人销售商品交什么税
  • 广告制作税目
  • 每月末计提利息分录
  • 已认证进项发票转出会计分录
  • 股权投资损失该如何做账务处理及税前扣除相关规定
  • 股票回购后多久注销
  • 增值税专用发票利润怎么交税
  • 生产企业出口退税退的是哪部分的税
  • 为什么有些单位一直在招聘
  • 房产税的征收对象有哪些
  • 税控盘抵增值税表怎么填
  • 法院拍卖破产企业房产,税费问题
  • 预付账款需要发票吗
  • 经营性租入的固定资产需要计提折旧吗
  • 税务局收到企业发票
  • 汇回投资方的现值怎么算
  • window10拖动窗口的手势
  • 非流动资产基金是什么意思
  • osXYosemite怎么更新
  • 什么叫php
  • macos big sur卡在
  • 坏账准备怎么做会计科目
  • 计提企业所得税会计分录怎么做
  • 企业类型变更是什么意思
  • 国家最高科技奖2018
  • 货物运输发票怎么备注发票样板
  • 无偿转让房屋
  • 政府基金如何开立账户
  • 无极框架下载
  • 图文详解一本通
  • php输出mysql查询结果
  • typescript instanceof
  • websocket基于http
  • 神经网络模型python
  • 投资收益的会计处理
  • 外贸出口退税进项发票有多家供应商怎么匹配
  • 什么是预付账款的管理重点
  • mysql分表的3种方法
  • 财政拨款事业单位的办公用车免征车船税吗
  • 小微企业应纳税所得额计算
  • 会计科目累计摊销
  • 个人所得税专项扣除2023最新政策
  • 绩效工资扣款违法么?
  • 对公账户里的钱怎么转出来合法
  • 税务发票金额可以增加吗?
  • 防暑降温费计入工资还是福利费
  • 简单征收的进项税怎么算
  • 即征即退的收入是不征税收入
  • 递延所得税资产和负债账务处理
  • 多计的人工成本怎么做账
  • mac怎么自动清理垃圾软件
  • win10鼠标指针在文本区很小
  • xp系统换成win10
  • win7与vista关系
  • mac修改java版本
  • Linux系统怎么设置窗口关闭按键在右侧
  • win7系统虚拟机
  • UNITY开发工程师
  • html怎么用javascript
  • 使用scp获取远程linux服务器上的文件 linux远程拷贝文件
  • [置顶]马粥街残酷史
  • 怎么连接w乚an
  • IE8 新增的Javascript 开发接口说明
  • unity3d项目
  • EasyTouch Broadcast messages选项在js和c#下的用法
  • js知识总结
  • jquery使用教程
  • asynctask优缺点
  • android实现侧边栏
  • 上海地铁直接刷银联卡
  • 南通国资委网站首页
  • 企业完税证明怎么打印
  • 劳务分包需要交什么税
  • 税务机关垂直领导
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设