bootstrap起步 全局css样式概览 全局css样式_栅格 全局css样式_排版
生活随笔
收集整理的這篇文章主要介紹了
bootstrap起步 全局css样式概览 全局css样式_栅格 全局css样式_排版
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
http://www.bootcss.com/基本模板
https://v3.bootcss.com/getting-started/#template
bootstrap起步?
<!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>被刪除的文本無用文本
?
插入文本
<!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样式_排版的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SpringCloud：Zuul 路由访
- 下一篇： Bootstrap全局css样式_代码