Bootstrap
文章平均质量分 59
Void_CM
这个作者很懒,什么都没留下…
展开
-
Bootstrap-05-插件——导航
导航使用下拉和按钮组合可以制作导航基本样式:.nav 与nav-tab、nav-pills组合制作导航分类:标签型(nav-tab)导航胶囊型(nav-pills)导航堆栈(nav-stacked)导航自适应(nav-justified)导航面包屑(breadcrumb)导航,单独使用,不与nav一起使用,主要作用:提醒用户当前位置状态:选中状态 active样式禁用状态:disable二级菜单演示 <p class="lead">标签式的导航原创 2021-03-02 21:48:20 · 170 阅读 · 0 评论 -
Bootstrap-04-常用样式——表单布局
水平表单布局通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了。结构向<form>元素添加role=“form”。把标签和控件放在一个带有.from-group的div中。以获取最佳间距向所有文本元素<input>、<textarea>、<sel原创 2021-03-02 17:31:37 · 666 阅读 · 0 评论 -
Bootstrap-04-常用样式——表单控件(按钮)
按钮<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原创 2021-03-02 11:19:20 · 504 阅读 · 1 评论 -
Bootstrap-04-常见样式——表单控件(单选框和复选框)
原生单选框name 判断是否同组 <input type="radio" name="hobby" id="">男 <input type="radio" name="hobby" id="">女bootstrap 单选框bootstrap单选框垂直显示:.radio水平显示:.radio-inline <!-- 垂直 --> <div class="row"> <div class="col-md-3"原创 2021-03-01 23:02:43 · 2929 阅读 · 0 评论 -
Bootstrap-04-常用样式——表单控件(输入框)
bootstrap 表单控件 输入框类名 .form-control文本输入框input-lg 大 input-sm 小 <div class="col-md-3" > <input type="text" class="form-control"> <input type="text" class="form-control input-lg"> <input type="text" class="for原创 2021-03-01 22:31:49 · 779 阅读 · 0 评论 -
Bootstrap-04-常用样式——表格
原生表格<table> <tr> <th>学号</th> <th>姓名</th> <th>学分</th> </tr> <tr> <td>001</td> <td>void原创 2021-03-01 21:53:39 · 666 阅读 · 0 评论 -
Bootstrap-04-常用样式——代码块
bootstrap 代码块单行内联代码:<code></code>多行块代码:<pre></pre>代码长度过长可以用.pre-scrollable添加滚动条, 区域内会保留代码的所有格式包括空格和回车,显示html的标签需要使用字符实体<>显示用户输入代码,如快捷键:<kbd></kbd> <!-- 代码块 --> <!-- 单行 -->原创 2021-03-01 20:48:25 · 737 阅读 · 0 评论 -
Bootstrap-04-常用样式——列表
HTML中原生列表:无序列表(<ul><li>…</li></ul>)有序列表(<ol><li>…</li></ol>)定义列表(<dl><dt>…<dt><dd>…<dd><dl>)bootstrap去点列表 .list-unstyled内联列表 .list-inline 将垂直列表转换成水平列表 完美契合水平导航栏定义原创 2021-03-01 20:37:55 · 836 阅读 · 0 评论 -
Bootstrap-04-常用样式-排版
bootstrap常用样式——排版标题bootstrap对原生h1-h6进行了覆盖,且可为非标题元素设置类名(.h1-.h6)获取其样式副标题(放在h中) small标签 或.small类名<!-- 标题 --> <h1>title 1<small>subtitle</small></h1> <h2>title 2<span class="small">subtitile&原创 2021-03-01 18:11:51 · 142 阅读 · 0 评论 -
Bootstrap-03-响应式布局
Bootstrap的响应式布局原理什么是响应式布局所谓响应式布局:为了保证不同分辨率的终端的正常布局——一个网站能够兼容多个终端(不是为每个终端做一个特定的版本)旨在为不同终端的用户提供更加舒适的界面和更好的用户体验bootstrap的响应式布局-例子bootstrap针对不同设备的分辨率设置不同的阈值,xs、sm、md、lg同样的内容对于笔记本这样的设备,以及在小屏幕上会有不一样的效果比如以下的html: <div class="container"> &原创 2021-03-01 13:27:05 · 238 阅读 · 0 评论 -
Bootstrap-02-布局容器和栅格网格系统
布局容器.container类(常用)固定宽度并支持响应式布局的容器(两侧留白)在这里插入代码片.container-fluid占据100%宽度如下:注解:在bootstrap中样式多仅指定宽度,高度自定义栅格网格系统栅格网格系统概述什么是栅格网格,就是将界面分成几行几列,那么就可以规定某元素占几行几列来确定其位置而bootstrap的栅格网格系统,将容器分为12列(自定义高度),并通过一系列的行(row)和列(column)的组合对页面布局,结合媒体查询,根据不同设备,创建分界点原创 2021-03-01 12:29:08 · 266 阅读 · 0 评论 -
Bootstrap-01-概述
Bootstrap是什么?boostrap是一套现成的css样式集合,是颇受欢迎的HTML,CSS,JS框架,适用于开发响应式布局,移动设备优先的WEB项目。安装bootstrap下载地址Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以还需下载jQueryjQuery下载地址基于bootstrap的html模板bootstrap对各种标签、样式进行了优化,比起初始的Html,字体、间距等都有所变化<!DOCTYPE html><html l原创 2021-03-01 10:58:38 · 91 阅读 · 1 评论