bootstrap学习
2021/11/4 6:11:35
本文主要是介绍bootstrap学习,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
bootstrap是一个css ,js的框架。完全开源。主要包括css 、fonts、js三个文件夹。官网文档:https://v5.bootcss.com/
通过预先定义类名设置样式,后面在需要的标签加入class的名字就可以使用定义好的样式了
bootstrap依赖于jquery。引入的时候需要先引入jquery再引入bootstrap。
引入相应的bootstrap.min.css就可以使用bootstrap的css样式了
mtea标签设置响应式布局(在手机平板上自适应)<meta name=“viewport” content="widthd=device-width,initial-scale=1"> 宽度==物理设备的宽度,缩放比例=1 不缩放
导航页 <nav class="navbar " role=navigation>role=navigation> 加上role="navigation",就可以让浏览器知晓这是一个导航容器而不是一个普通的容器,从而在面对一些特殊人群的时候可以做出正确的反应(例如盲人)
lead 类可以突出显示,<mark>标记增加背景效果, <del>删除效果 text-left(right、cente)类可以改变p标签的位置 text-lowercase(uppercase、capitalize)类改变p标签的字母大小写。<strong>标签加粗 <abbr>增加缩略语<><ul class="lList-unstyled">将列表改为无样式。
栅格:
container (容器)类设置了一部分属性,栅格都要通过container来承载<div class="container">
栅格一行最多承载12个,不同显示器有不同格式 ,如果该个栅格内容过多会向下自适应变高
col-md-x 占据x个栅格的位置,col-md-offset-x 偏移x个位置(挤压同一行的其他栅格) col-md-push-x 和col-md-pull-x可以向右或者左排序(不会挤压其他栅格,)
栅格可以嵌套使用
代码 <code></code>代码块 <kbd></kbd>键入命令 <pre></pre>承载代码的效果 <var><var>定义变量 <samp></samp>承载输出
表格:
修改<talbe class的值就可以修改表格的基本样式> table-striped 斑马线形式 table-bordered 边框效果,table-hover 鼠标悬停效果 table-condensed紧凑型表格
<tr class="" 的值可以修改一行的颜色>
表格上面一层div 增加table-respinseive 可以设置为响应式(缩小浏览器 如果表格里面的内容过多会加一个滚动效果)
表单:
<form role="form" class="form-inline">// 这个class说明表单是内联表单(不会因为 form-goup分行)
<div class="form-group">
<label class=“sr-only”>姓名</label> //必须设置label,sr-only可以隐藏label标签
<input type=name></input>
</div>
</form>
<form role="form" class="form-horizontal">// 这个class说明表单是水平表单 通过栅格控制文字和输入框对齐
<fieldset disable> 设置所有表单都不可用
<div class="form-group">
<label class="col-sm-2" >姓名</label>
<div class="col-sm-10>
<input type=txt></input>
</div>
</div>
<div class="form-group">
<label class="col-sm-2" >密码</label>
<div class="col-sm-2">
<input type=passwod></input>
</div>
</div>
</fieldset>
</form>
这篇关于bootstrap学习的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)
- 2024-05-30【Java】百万数据excel导出功能如何实现
- 2024-05-30我们小公司,哪像华为一样,用得上IPD(集成产品开发)?
- 2024-05-30java excel上传--poi
- 2024-05-30安装笔记本应用商店的pycharm,再安排pandas等模块,说是没有打包工具?
- 2024-05-29java11新特性
- 2024-05-29哪些无用敏捷指标正在破坏敏捷转型?
- 2024-05-29鸿蒙原生应用再新丁!新华社 入局鸿蒙
- 2024-05-29设计模式 之 迭代器模式(Iterator)