Bootstrap
关注
分享
扫一扫
住手丶让我来
我是革命一块砖，哪里需要哪里搬！
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Bootstrap框架概览
一、前言因为工作原因，需要用到前端框架Bootstrap，所以就花些时间去学习，因为我是看着开发文档来学习这个框架的，所以下面介绍这个框架的知识点也是围绕开发文档来的，我觉得这样知识点比较全面一点。二、概览HTML5 文档类型Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。<!D...原创 2019-07-19 16:45:04 · 273 阅读 · 0 评论 -
Bootstrap框架之栅格系统
一、简介Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。二、工作原理“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligmen...原创 2019-07-19 17:18:02 · 575 阅读 · 0 评论 -
Bootstrap框架之排版
一、简介Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。使用 Bootstrap 的排版特性，可以创建标题、段落、列表等。这里主要介绍以下几种：标题页面主体内联文本元素对齐改变大小写缩略语地址引用列表二、排版介绍标题HTML 中的所有标题标签，<h1> 到 <...原创 2019-07-20 09:43:21 · 296 阅读 · 0 评论 -
Bootstrap框架之代码显示
一、简介在Bootstrap中也支持在前端页面显示代码段的一些用法。二、代码内联代码通过 <code> 标签包裹内联样式的代码片段。<!DOCTYPE html><html><head> <title>button</title> <meta name="viewport" content="width...原创 2019-07-20 10:02:30 · 567 阅读 · 0 评论 -
Bootstrap框架之表格
一、简介表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格，在接下来的内容中，我们会详细介绍Bootstrap的表格使用。二、表格基本实例为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的...原创 2019-07-20 11:43:43 · 1158 阅读 · 0 评论 -
Bootstrap框架之表单
一、简介介绍如何使用 Bootstrap 工具包来创建表单。二、表单基本实例单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获...原创 2019-07-20 15:39:39 · 1567 阅读 · 0 评论 -
Bootstrap框架之按钮
一、简介通过按钮（Button）插件，可以添加进一些交互，比如控制按钮状态，或者为其他组件（如工具栏）创建按钮组。二、按钮可作为按钮使用的标签或元素为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。<a class="btn btn-default" href="...原创 2019-07-20 16:05:17 · 718 阅读 · 0 评论 -
Bootstrap框架之图片和辅助类
一、简介这一篇博客是Bootstrap中全局CSS样式介绍的最后一篇博客了，这篇博客主要介绍图片和辅助类的一些基本的用法，想要更全面的了解Bootstrap的全局CSS样式，可以看《Bootstrap全局CSS样式》。二、图片响应式图片在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width:...原创 2019-07-20 16:23:05 · 477 阅读 · 0 评论