bootstrap起步 全局css样式概览 全局css样式_栅格 全局css样式_排版
2024-05-29 07:40:29
http://www.bootcss.com/基本模板
https://v3.bootcss.com/getting-started/#templatebootstrap起步
<!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"><title>这是第一个BootStrap网页</title><link rel="stylesheet" href="bootstrap.min.css"><!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --><!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --><!--[if lt IE 9]><script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script><![endif]-->
</head>
<body><div class="container"><p>你好!</p></div><script src="jquery-1.12.1.js"></script><script src="bootstrap.min.js"></script>
</body>
</html>Bootstrap全局css样式概览
https://v3.bootcss.com/css/概览<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>全局css样式</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container-fluid"><p>内容哈哈哈哈哈哈哈哈</p><a href="">hello</a></div>
</body>
</html>全局css样式_栅格
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="bootstrap.min.css"><style>.row {margin-bottom: 20px;}.row div {margin-top: 0px;margin-bottom: 0;}[class*="col-"]{padding-top: 15px;padding-bottom: 15px;border: 1px solid #ddd;background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.15);}</style>
</head>
<body><div class="container"><div class="row"><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div></div></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="bootstrap.min.css"><style>.row {margin-bottom: 20px;}.row div {margin-top: 0px;margin-bottom: 0;}[class*="col-"]{padding-top: 15px;padding-bottom: 15px;border: 1px solid #ddd;background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.15);}</style>
</head>
<body><div class="container"><div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div></div></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="bootstrap.min.css"><style>.row {margin-bottom: 20px;}.row div {margin-top: 0px;margin-bottom: 0;}[class*="col-"]{padding-top: 15px;padding-bottom: 15px;border: 1px solid #ddd;background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.15);}</style>
</head>
<body><div class="container"><div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-8">.col-md-8</div></div></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Document</title><link rel="stylesheet" href="bootstrap.min.css"><style>.row {margin-bottom: 20px;}.row div {margin-top: 0px;margin-bottom: 0;}[class*="col-"]{padding-top: 15px;padding-bottom: 15px;border: 1px solid #ddd;background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.15);}</style>
</head>
<body><div class="container"><div class="row"><div class="col-md-4 col-xs-6">.col-md-4 col-xs-6</div><div class="col-md-8 col-xs-6">.col-md-8 col-xs-6</div></div></div>
</body>
</html>响应式列重置
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Document</title><link rel="stylesheet" href="bootstrap.min.css"><style>.row {margin-bottom: 20px;}.row div {margin-top: 0px;margin-bottom: 0;}[class*="col-"]{padding-top: 15px;padding-bottom: 15px;border: 1px solid #ddd;background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.15);}</style>
</head>
<body><div class="container"><div class="row"><div class="col-md-4 col-sm-5 col-xs-6">.col-md-4 col-sm-5 col-xs-6.col-md-4 col-sm-5 col-xs-6.col-md-4 col-sm-5 col-xs-6.col-md-4 col-sm-5 col-xs-6.col-md-4 col-sm-5 col-xs-6.col-md-4 col-sm-5 col-xs-6</div><div class="col-md-8 col-sm-7 col-xs-6">.col-md-8 col-xs-6</div></div></div>
</body>
</html>列偏移
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Document</title><link rel="stylesheet" href="bootstrap.min.css"><style>.row {margin-bottom: 20px;}.row div {margin-top: 0px;margin-bottom: 0;}[class*="col-"]{padding-top: 15px;padding-bottom: 15px;border: 1px solid #ddd;background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.15);}</style>
</head>
<body><div class="container"><div class="row"><div class="col-md-8 col-sm-7 col-xs-6 col-md-offset-4">.col-md-8 col-xs-6</div></div></div>
</body>
</html>嵌套列
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Document</title><link rel="stylesheet" href="bootstrap.min.css"><style>.row {margin-bottom: 20px;}.row div {margin-top: 0px;margin-bottom: 0;}[class*="col-"]{padding-top: 15px;padding-bottom: 15px;border: 1px solid #ddd;background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.15);}</style>
</head>
<body><div class="container"><div class="row"><div class="col-md-9">col-md-9<div class="row"><div class="col-md-8 col-md-offset-1">col-md-8</div></div></div></div></div>
</body>
</html>列排序
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Document</title><link rel="stylesheet" href="bootstrap.min.css"><style>.row {margin-bottom: 20px;}.row div {margin-top: 0px;margin-bottom: 0;}[class*="col-"]{padding-top: 15px;padding-bottom: 15px;border: 1px solid #ddd;background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.15);}</style>
</head>
<body><div class="container"><div class="row"><div class="col-md-9 col-md-push-3">col-md-9</div><div class="col-md-3 col-md-pull-9">col-md-3</div></div></div>
</body>
</html>https://v3.bootcss.com/css/#type排版标题
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"><h1>这是一个h1标签<small>这是一个副标题</small></h1><h2>这是一个h2标签<small>这是一个副标题</small></h2><h3>这是一个h3标签<small>这是一个副标题</small></h3><h4>这是一个h4标签<small>这是一个副标题</small></h4><h5>这是一个h5标签<small>这是一个副标题</small></h5><h6>这是一个h6标签<small>这是一个副标题</small></h6></div>
</body>
</html>页面主体
中心内容
通过添加 .lead 类可以让段落突出显示。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"><h1>这是一个h1标签<small>这是一个副标题</small></h1><h2>这是一个h2标签<small>这是一个副标题</small></h2><h3>这是一个h3标签<small>这是一个副标题</small></h3><h4>这是一个h4标签<small>这是一个副标题</small></h4><h5>这是一个h5标签<small>这是一个副标题</small></h5><h6>这是一个h6标签<small>这是一个副标题</small></h6><p>欢迎来到声讯台,希望你能通过本套课程以及BootStrap中文网深入学习BootStrap开源框架<br>欢迎来到声讯台,希望你能通过本套课程以及BootStrap中文网深入学习BootStrap开源框架</p><p class="lead">欢迎来到声讯台,希望你能通过本套课程以及BootStrap中文网深入学习BootStrap开源框架</p></div>
</body>
</html>内联文本元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"><h1>这是一个h1标签<small>这是一个副标题</small></h1><h2>这是一个h2标签<small>这是一个副标题</small></h2><h3>这是一个h3标签<small>这是一个副标题</small></h3><h4>这是一个h4标签<small>这是一个副标题</small></h4><h5>这是一个h5标签<small>这是一个副标题</small></h5><h6>这是一个h6标签<small>这是一个副标题</small></h6><p>欢迎来到声讯台,希望你能通过本套课程以及BootStrap中文网深入学习BootStrap开源框架<br>欢迎来到声讯台,希望你能通过本套课程以及BootStrap中文网深入学习BootStrap开源框架</p><p class="lead">欢迎来到<mark>声讯台</mark>,希望你能通过本套课程以及BootStrap中文网深入学习BootStrap开源框架</p></div>
</body>
</html>被删除的文本
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"> <p class="lead"><del>欢迎</del>来到<mark>声讯台</mark>,希望你能通过本套课程以及BootStrap中文网深入学习BootStrap开源框架</p></div>
</body>
</html>被删除的文本无用文本
对于没用的文本使用 <s> 标签<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"> <p class="lead"><s>欢迎</s>来到<mark>声讯台</mark>,希望你能通过本套课程以及BootStrap中文网深入学习BootStrap开源框架</p></div>
</body>
</html>插入文本
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"> <p class="lead"><ins>来到声讯台</ins>,希望你能通过本套课程以及BootStrap中文网深入学习BootStrap开源框架</p></div>
</body>
</html>带下划线的文本
为文本添加下划线，使用 <u> 标签。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"> <p class="lead"><u>来到声讯台</u>,希望你能通过本套课程以及BootStrap中文网深入学习BootStrap开源框架</p></div>
</body>
</html>小号文本
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"> <p>欢迎来到声讯台,希望你能通过本套课程以及BootStrap中文网深入学习BootStrap开源框架<br>欢迎来到声讯台,<small>希望你能通过本套课程以及BootStrap中文网深入学习BootStrap开源框架</small></p> </div>
</body>
</html>着重
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"><p>欢迎来到<strong>声讯台</strong> </p></div>
</body>
</html>斜体
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"> <p class="lead"><em>来到声讯台</em> </p></div>
</body>
</html>对齐
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"><p class="text-left">Left aligned text.</p><p class="text-center">Center aligned text.</p><p class="text-right">Right aligned text.</p><p class="text-justify">Justified text.</p><p class="text-nowrap">No wrap text.</p></div>
</body>
</html>改变大小写
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"><p class="text-lowercase">Lowercased text.</p><p class="text-uppercase">Uppercased text.</p><p class="text-capitalize">Capitalized text.</p></div>
</body>
</html>基本缩略语
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>深入学习<abbr title="attribute">前端框架</abbr>
</body>
</html>默认样式的引用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p></blockquote><blockquote class="blockquote-reverse"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><footer>Someone famous in <cite title="Source Title">Source Title</cite></footer></blockquote></body>
</html>无样式列表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"><ul class="list-unstyled"><li>Hello</li><li>Hello</li><li>Hello</li><li><ul class="list-unstyled"><li>inner</li><li>inner</li><li>inner</li><li>inner</li></ul></li><li>Hello</li><li>Hello</li><li>Hello</li></ul> <ol><li>hi</li><li>hi</li><li>hi</li><li>hi</li></ol> </div>
</body>
</html>内联列表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"><ul class="list-inline"><li>Hello</li><li>Hello</li><li>Hello</li></ul> </div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"><ul class="list-inline"><li>Hello</li><li>Hello</li><li>Hello</li><li><ul class="list-inline"><li>inner</li><li>inner</li><li>inner</li><li>inner</li></ul></li><li>Hello</li><li>Hello</li><li>Hello</li></ul> </div>
</body>
</html>bootstrap起步 全局css样式概览 全局css样式_栅格 全局css样式_排版相关推荐
- 【CSS进阶】精灵图、字体图标、用户界面样式、常见布局技巧、初始化、CSS三角
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍精灵图.字体图标.CSS三角.用户界面样式.vertical-align.常见布局技巧.初始化 思 ...
- 【web前端】CSS高级技巧（精灵图，字体图标，CSS三角，CSS用户界面样式，文字与图片垂直对齐，溢出的文字省略号显示，常见布局技巧，CSS初始化）
使用课程是黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 目录 一.精灵图 1.为什么需要精灵图 2.精灵图( sprit ...
- CSS精灵图、字体图标、三角、鼠标样式、用户界面样式、溢出省略号
[CSS精灵图.字体图标.三角.鼠标样式.用户界面样式.溢出省略号] 本文档是个人对 Pink 老师课程的总结归纳及补充,转载请注明出处! 一.精灵图 1.1 为什么需要精灵图? 一个网页中往往会应用 ...
- react 改变css样式_web前端入门到实战：编写CSS代码的8个策略，资深开发工程师总结...
编写基本的CSS和HTML是我们作为Web开发人员学习的首要事情之一.然而,我遇到的很多应用程序显然没有人花时间真正考虑前端开发的长久性和可维护性.我认为这主要是因为许多开发人员对组织CSS / HT ...
- php中的css样式改变无反应,解决ecshop清除缓存css样式没反应问题
部分浏览器例如谷歌或360等双核浏览器会对商城的css样式进行缓存,导致修改了css样式文件也没有更新. 解决方法: 修改includes/init.php 找到 if (!empty($_CFG[' ...
- web前端学习day_02:CSS:三种使用方式/选择器/颜色/背景图片/查看样式/文本/元素显示方式/盒子模型/定位方式/行内对齐/显示层级/防溢出
CSS : Cascading Style Sheet 层叠样式表. 作用: 美化页面 CSS 如何在html页面中添加css样式代码?总共有三种方式: 1.选择器 2.选择器练习: 3.颜色赋值 4 ...
- web前端入门学习 css（7）css高级技巧 （精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化）
文章目录 精灵图 为什么需要精灵图? 精灵图的使用 精灵图课堂案例 用精灵图拼出自己的名字 字体图标 字体图标的下载 字体图标的引入 字体图标的追加 css三角(用边框border制作) 案例:京东三 ...
- [css] 一个页面引用多个文件，如何防止样式冲突？
[css] 一个页面引用多个文件,如何防止样式冲突? 编码层面: 1.定制规则:不同的样式文件表,增加不同的前缀. 2.按照功能区分文件:不同的文件样式表,针对页面不同的部分写样式,通过样式层级的方式 ...
- xml不显示css样式_如何使用CSS显示XML？
xml不显示css样式 Introduction: 介绍: You must be aware of the term XML and must have dealt with these vario ...
最新文章
- 减少Android staido 占用C 盘
- （三）数字判断大小语句
- MySQL高级 - 常用工具 - mysql
- mysql内外链接图_图解MySQL 内连接、外连接、左连接、右连接、全连接
- jsonp和CORS跨域实现
- 【NLP】毕设学习笔记（七）前馈神经网络代表者——卷积神经网络无公式理解
- java内部注释类如何使用_java 内部类的使用
- Nginx 指令目录（中文版）
- 数学连乘和累加运算符号_期中复习：小学数学各年级知识点和重点、难点大全！...
- VS 2013 统一修改所有工程的目录配置（以 boost、opencv3 的安装为例）
- ScheduledThreadPoolExecutor Usage
- 研发团队建设几点看法及建议
- win7更新_今天，Win7正式终止更新，扫雷成为历史
- 中国流动人口动态监测调查数据（CMDS）2010-2018年
- kubesphere master节点执行kubectl get po Unable to connect to the server: Forbidden
- 前端面试题：HTML 语义化的理解
- CSDN20181219博客黑板报
- iOS开发 适配iOS10
- NDIS(NDIS开发详解)
- 我的世界服务器显示离线,我的世界离线模式怎么玩服务器 | 手游网游页游攻略大全...
热门文章
- zigbee cc2530地址空间 layout 和flash操作
- Visual Studio 2005中C++的变化
- 使用Hibernate生成数据库和连接数据库
- Re: 从零开始的【comic spider】(序幕)
- Django REST framework+Vue 打造生鲜电商项目（笔记八）
- List, Set, Map是否继承自Collection接口?
- 【软件使用】Windows下的Objective-C集成开发环境搭建（IDE）
- Jenkins学习七：Jenkins的授权和访问控制
- 安装open-vm-tools
- Github 上 10 个值得学习的 Springboot 开源项目