bootstrap 列表项 加指引
2016-09-28 11:01:00 weixin_34289744 阅读数 10

个别类的使用

  中间广告用的大块--jumbotron是大屏的意思
  <div class="jumbotron">
  按钮  btn btn-lg
  <p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p>
  导航栏  navbar
  内容推到最右边 <p class="pull-right"><a href="#">Back to top</a></p>
  图形弄成圆圈 <img class="img-circle">
  两段内容之间划线 <hr class="featurette-divider">
  下拉菜单的类是 dropdown
    下拉菜单里面的内容所在的类是 dropdown-menu
      点击的a标签里面<a data-toggle="dropdown">

  对话框变小的类  modal-sm
  按钮<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
  按钮如果加上btn-block,则按钮是一个小块,否则按钮的大小随着Input框的大小一样

1.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的HTML标准模板</title>   
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!--你自己的样式文件 -->
        <link href="css/your-style.css" rel="stylesheet">        
        <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询,如果不需要用可以移除 -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <h1>Hello, world!</h1>

        <!-- 如果要使用Bootstrap的js插件,必须先调入jQuery -->
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
        <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 -->
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    </body>
</html>

2排版

bootstrap覆盖了原来的标题样式,bootstrap标题的样式如下,其中h1-h3的margin-bottom应该为20px,让非标题元素使用标题的样式,可以为其加上类名h1-h6:

2560633-33a2a7bf06fe238f.png
Paste_Image.png
    Bootstrap 将全局 font-size 设置为 **14px**,
    line-height设置为 **1.428**。
    这些属性直接赋予 <body>元素和所有段落元素。另外,
    <p>段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。

    1.主题页面   <p>...</p>
    2.中心内容通过添加 .lead类可以让段落突出显示。<p class="lead">...</p>
    3.内联文本元素,把某个单词高亮显示<mark>...</mark>
    You can use the mark tag to <mark>highlight</mark> text.
    4.被删除的文本<del>...</del>
    5.无用文本 <s>...</s>
    6.插入文本<ins>...</ins>,在内容下面加下划线

3. 标题的样式---类名学习:

(1)强调类名

.text-muted:提示,使用浅灰色(#999)
.text-primary:主要,使用蓝色(#428bca)
.text-success:成功,使用浅绿色(#3c763d)
.text-info:通知信息,使用浅蓝色(#31708f)
.text-warning:警告,使用黄色(#8a6d3b)
.text-danger:危险,使用褐色(#a94442)

a.text-primary:hover {
color: #3071a9;
}

a.text-success:hover {
color: #2b542c;
}

a.text-info:hover {
color: #245269;
}

a.text-warning:hover {
color: #66512c;
}

a.text-danger:hover {
color: #843534;
}

(2)对齐类名

.text-left:左对齐
.text-right:右对齐
.text-center:居中
.text-justify:两端

.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}

 <div class="text-left">
   <!-- text-left:左对齐 -->
    Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 CDN <br/>
    加速服务。基于国内云厂商的 CDN 服务,访问速度更快、加速效果更明显、没有速<br/>度和带宽限制、永久免费。Bootstrap 中文网还对大量的前端开源工具库提供了 CDN 加速服务,请进入BootCDN <br/>
    主页查看更多可用的工具库。
  </div>
  <div class="text-center">
  <!-- text-center:居中对齐 -->
    Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 CDN <br/>
    加速服务。基于国内云厂商的 CDN 服务,访问速度更快、加速效果更明显、没有速<br/>度和带宽限制、永久免费。Bootstrap 中文网还对大量的前端开源工具库提供了 CDN 加速服务,请进入BootCDN <br/>
    主页查看更多可用的工具库。
  </div>
  <div class="text-right">
  <!-- text-right:右对齐 -->
    Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 CDN <br/>
    加速服务。基于国内云厂商的 CDN 服务,访问速度更快、加速效果更明显、没有速<br/>度和带宽限制、永久免费。Bootstrap 中文网还对大量的前端开源工具库提供了 CDN 加速服务,请进入BootCDN <br/>
    主页查看更多可用的工具库。
  </div>
  <div class="text-justify">
  <!-- text-justify:两端对齐(其实就是自动换行) -->
    Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 CDN 加速服务。基于国内云厂商的 CDN 服务,访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。Bootstrap 中文网还对大量的前端开源工具库提供了 CDN 加速服务,请进入BootCDN 主页查看更多可用的工具库。
  </div>

效果如下

2560633-3dec7860d48b2c4e.png
Paste_Image.png

3)改变文本字体的大小写

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

4)列表类名
默认情况下,bootstrap中的无序列表和有序列表带有项目符号,利用类.list-unstyled去除项目符号

.list-unstyled {padding-left: 0;list-style: none;}
 ul ol 水平列表:list-inline
把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示

dl 水平列表:dl-horizontal
屏幕大于768px的时候,添加类名“.dl-horizontal”才具有水平定义列表效果

类名.list-inlinc用来实现内联列表,也就是将垂直列表幻城水平列表,并去掉项目符号,保持水平显示,其为制作水平导航而生

.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}

定义列表,bootstrap没有太大的调整,只是调整了行间距,外边距和字体效果

dl {
margin-top: 0;
margin-bottom: 20px;
}
dt,
dd {
line-height: 1.42857143;
}
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}

水平定义列表就像内联列表一样,bootstrap添加类.dl-horizontal即可,但是只有在屏幕大于768px的时候才有效

@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.dl-horizontal dd {
margin-left: 180px;
}
}

引用

默认样式的引用
将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。对于直接引用,我们建议用 <p> 标签。
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

<blockquote>
  <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>

<blockquote class="blockquote-reverse">
  ...
</blockquote>

4. 代码模块

code显示单行内联代码
pre显示多行代码
kbd显示用户输入代码
其中pre为其添加类.prc-scrollablc可以控制其最大高度为340px;超出则出现滚动条,可防止占有太多篇幅
2560633-0144e49d297543c2.png
Paste_Image.png

5.表格

表格式Bootstrap中的一个基础组件之一,bootstrap为表格设置了一种基础样式和四种附加样式以及一个响应式的表格

.table:基础表格
.table-striped:斑马线表格
.table-bordered:带边框的表格
.table-hover:鼠标悬停高亮的表格
.table-condensed:紧凑型表格
.table-responsive:响应式表格
2560633-189355f4476b7b6e.png
Paste_Image.png
2560633-d4b62901e9f53227.png
Paste_Image.png
2560633-998be2da339a76e6.png
Paste_Image.png

bootstrap还为<tr>提供了5种不同的类名

2560633-3e8e658562686531.png
Paste_Image.png

6.bootstrap-图标

    Bootstrap框架中也为大家提供了近200个不同的icon图片,
    而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果。

传送门:中文http://getbootstrap.com/components/#glyphicons
传送门:英文http://v3.bootcss.com/components/

    查看所有图标名称
任何行级元素都可以,通常使用span标签坐图标容器
在Bootstrap框架中是通过给元素添加“glyphicon”类名来实现,
<span class=“glyphic glyphicon-search”></span>
<span class=“glyphic glyphicon-asterisk”></span>
<span class=“glyphic glyphicon-plus”></span>
<span class=“glyphic glyphicon-cloud”></span>

7.bootstrap的全局样式,移除了body中的margin声明,设置body的颜色为白色,为排版设置了基本的字体、字号和行高,设置全局链接颜色,且当链接处于hover状态时才回显示下划线样式,以下摘录自其css文件

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}
body {
  margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden],
template {
  display: none;
}
a {
  background: transparent;
}
a:active,
a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
h1 {
  margin: .67em 0;
  font-size: 2em;
}
mark {
  color: #000;
  background: #ff0;
}
small {
  font-size: 80%;
}
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sup {
  top: -.5em;
}
sub {
  bottom: -.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
hr {
  height: 0;
  -moz-box-sizing: content-box;
       box-sizing: content-box;
}
pre {
  overflow: auto;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}
button {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}
input {
  line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
input[type="search"] {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
fieldset {
  padding: .35em .625em .75em;
  margin: 0 2px;
  border: 1px solid #c0c0c0;
}
legend {
  padding: 0;
  border: 0;
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
td,
th {
  padding: 0;
}
@media print {
  * {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;

    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  select {
    background: #fff !important;
  }
  .navbar {
    display: none;
  }
  .table td,
  .table th {
    background-color: #fff !important;
  }
  .btn > .caret,
  .dropup > .btn > .caret {
    border-top-color: #000 !important;
  }
  .label {
    border: 1px solid #000;
  }
  .table {
    border-collapse: collapse !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #ddd !important;
  }
}
2018-09-25 22:01:00 weixin_34112900 阅读数 3
<!DOCTYPT html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>ppwjs欢迎您</title>
		<link rel="icon" href="/favicon.ico" type="image/x-icon" />
	</head>
	<body>
	</body>
	<script src="/jsVersionControl.js" charset="utf-8" type="text/javascript"></script>
	<script src="/lib/_sys_ppwjsmain.js" charset="utf-8" type="text/javascript"></script>
	<script charset="utf-8" type="text/javascript">引入("/index.js",$真)</script>
</html>
//程序开始
引入(_sys_bootstrap4_all_addr + ".js",$真);
 
var 标题1 = "以下为无序列表的默认格式和不换行格式对比".到标题元素();

变量 普通无序列表顶层 = bootstrap4.创建无序列表元素();
变量 普通表项1 = bootstrap4.创建列表项元素("Coffee");
变量 普通表项2 = bootstrap4.创建列表项元素("Tea");
变量 普通表项4 = bootstrap4.创建列表项元素("Milk");

变量 普通无序列表第一级 = bootstrap4.创建无序列表元素();
变量 第一级的普通表项1 = bootstrap4.创建列表项元素("Black tea");
变量 第一级的普通表项2 = bootstrap4.创建列表项元素("Green tea");
普通无序列表第一级.添加子节点(第一级的普通表项1,第一级的普通表项2);

普通无序列表顶层.添加子节点(普通表项1,普通表项2,普通无序列表第一级,普通表项4);
//////////////////////
var 容器1 = bootstrap4.创建容器();

变量 bootstrap无序列表顶层 = bootstrap4.创建无序列表元素($真);
变量 bootstrap表项1 = bootstrap4.创建列表项元素("Coffee");
变量 bootstrap表项2 = bootstrap4.创建列表项元素("Tea");
变量 bootstrap表项4 = bootstrap4.创建列表项元素("Milk");

bootstrap无序列表顶层.添加子节点(bootstrap表项1,bootstrap表项2,bootstrap表项4);
容器1.添加子节点(bootstrap无序列表顶层);
///////////////////////
var 容器2 = bootstrap4.创建容器();

变量 bootstrap无序列表顶层_不换行 = bootstrap4.创建无序列表元素($真,$真);
变量 bootstrap表项_不换行1 = bootstrap4.创建列表项元素("Coffee",$真);
变量 bootstrap表项_不换行2 = bootstrap4.创建列表项元素("Tea",$真);
变量 bootstrap表项_不换行4 = bootstrap4.创建列表项元素("Milk",$真);

bootstrap无序列表顶层_不换行.添加子节点(bootstrap表项_不换行1,bootstrap表项_不换行2,bootstrap表项_不换行4);
容器2.添加子节点(bootstrap无序列表顶层_不换行);
///////////////////////

加到主体(标题1,普通无序列表顶层,容器1,容器2);

转载于:https://my.oschina.net/u/3979725/blog/2208635

2018-09-25 22:11:00 weixin_33777877 阅读数 6
<!DOCTYPT html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>ppwjs欢迎您</title>
		<link rel="icon" href="/favicon.ico" type="image/x-icon" />
	</head>
	<body>
	</body>
	<script src="/jsVersionControl.js" charset="utf-8" type="text/javascript"></script>
	<script src="/lib/_sys_ppwjsmain.js" charset="utf-8" type="text/javascript"></script>
	<script charset="utf-8" type="text/javascript">引入("/index.js",$真)</script>
</html>
//程序开始
引入(_sys_bootstrap4_all_addr + ".js",$真);
 
var 标题1 = "以下为有序列表的默认格式和不换行格式对比".到标题元素();

变量 普通有序列表顶层 = bootstrap4.创建有序列表元素();
变量 普通表项1 = bootstrap4.创建列表项元素("Coffee");
变量 普通表项2 = bootstrap4.创建列表项元素("Tea");
变量 普通表项4 = bootstrap4.创建列表项元素("Milk");

变量 普通有序列表第一级 = bootstrap4.创建有序列表元素();
变量 第一级的普通表项1 = bootstrap4.创建列表项元素("Black tea");
变量 第一级的普通表项2 = bootstrap4.创建列表项元素("Green tea");
普通有序列表第一级.添加子节点(第一级的普通表项1,第一级的普通表项2);

普通有序列表顶层.添加子节点(普通表项1,普通表项2,普通有序列表第一级,普通表项4);
//////////////////////
var 容器1 = bootstrap4.创建容器();

变量 bootstrap有序列表顶层 = bootstrap4.创建有序列表元素();
变量 bootstrap表项1 = bootstrap4.创建列表项元素("Coffee");
变量 bootstrap表项2 = bootstrap4.创建列表项元素("Tea");
变量 bootstrap表项4 = bootstrap4.创建列表项元素("Milk");

bootstrap有序列表顶层.添加子节点(bootstrap表项1,bootstrap表项2,bootstrap表项4);
容器1.添加子节点(bootstrap有序列表顶层);
///////////////////////
var 容器2 = bootstrap4.创建容器();

变量 bootstrap有序列表顶层_不换行 = bootstrap4.创建有序列表元素(null,$真);
变量 bootstrap表项_不换行1 = bootstrap4.创建列表项元素("Coffee",$真);
变量 bootstrap表项_不换行2 = bootstrap4.创建列表项元素("Tea",$真);
变量 bootstrap表项_不换行4 = bootstrap4.创建列表项元素("Milk",$真);

bootstrap有序列表顶层_不换行.添加子节点(bootstrap表项_不换行1,bootstrap表项_不换行2,bootstrap表项_不换行4);
容器2.添加子节点(bootstrap有序列表顶层_不换行);
///////////////////////

加到主体(标题1,普通有序列表顶层,容器1,容器2);

转载于:https://my.oschina.net/u/3979725/blog/2208640

2019-01-14 16:55:38 hugejihu9 阅读数 67

文章来自:源码在线https://www.shengli.me/css/576.html

 

 

效果:

 

 1.jpg

 

 

2018-02-23 17:01:00 yangyatong93 阅读数 27
<div class="container">
    <div class="row">
      <div class="col-md-8"><img ></div>
      <div class="col-md-4">
        <div class="row">
            <div class="col-md-12">.col-md-</div>
            <div class="col-md-12">.col-md-</div>
            <div class="col-md-12">.col-md-</div>
        </div>
      </div>
    </div>
</div>

Bootstrap 列嵌套

阅读数 797

列嵌套由于流式网格系统使用百分比来设置每列的宽度,每个.row都会把列数重置为12。因此,跟固定栅格的嵌套有点不同,在流式网格系统中,被嵌套的列数之和要等于12。比如,要想在一个.span6的列中嵌套两个等宽的列,就不能使用两个.span3的列,而应该使用两个.span6的列。如:&lt;divclass="row-fluid"&gt; &lt;divclass="span...

博文 来自: ixygj197875

bootstrap嵌套列

阅读数 6

<divclass="container"><divclass="row"><divclass="col-md-8"><img></div><divclass="col-md-4"><divclass="row"...

博文 来自: weixin_34129145

bootstrap 列偏移

阅读数 137

文章来自:源码在线https://www.shengli.me/css/574.html  

博文 来自: hugejihu9

Bootstrap 列平移

阅读数 148

列平移跟固定网格中一样,只需在平移的列中添加.offset*类即可让列向右平移。如:&lt;divclass="row-fluid"&gt; &lt;divclass="span4"&gt;4&lt;/div&gt; &lt;divclass="span4offset4"&gt;4offset4&lt;/div&gt;&lt;/div&

博文 来自: ixygj197875

bootstrap——列的适用性

阅读数 136

Document div{ border:1pxsolidred; } 全局CSS样式——列适用性 xs-6 sm-6 md-6 lg-6

博文 来自: spfLinux
没有更多推荐了,返回首页