威尼斯人棋牌Bootstrap第一天

1、代码引入:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!--定于内容,和内容的编码格式-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--为了确保适当的绘制与放缩,需要在<head>中添加viewport元数据标签-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--该标签的属性 user-scalabel=no 可以禁止页面放缩,使其变为滚动式
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-->
<link rel="stylesheet" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"&gt;&lt;/script&gt;
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"&gt;&lt;/script&gt;
<![endif]-->
<script type="text/javascript" src="resources/bootstrap/jquery.min.js"></script>
<script type="text/javascript" src="resources/bootstrap/js/bootstrap.min.js"></script>
</head>

  第一步:在html5文档

<body>
<!--bootstrap 排版 链接样式设置了基本的全局样式-->
<!--bootstrap为页面内容和栅格系统包裹一个。container容器,bootstrap总共提供了两个容器,由于padding等属性的原因,他们之间不能相互嵌套-->
<!--container类用于固定宽度并支持响应式布局的容器 ,container-fluid类似与宽度100%,占据全部视图的容器-->
<div >
<!--栅格系统是Bootstrap提供的一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局-->
<!--“行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
通过“行(row)”在水平方向创建一组“列(column)”。-->
<div >
<!-- xs:超小,sm:小屏,md:中屏,lg:大屏, col:表示列-->
<div >.col-md-1</div>
<div >.col-md-2</div>
<div >.col-md-3</div>
<div >.col-md-4</div>
<div >.col-md-2</div>
</div>
<div >
<!--为了更好的适应view-->
<div >.col-md-8</div>
<div >.col-md-4</div>
</div>
<div >
<div >.col-md-5</div>
<div >.col-md-6</div>
<div >.col-md-1</div>
</div>
<div >

<meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- 最新 Bootstrap 核心 CSS 文件 -->  <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/css/bootstrap.min.css">  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->  <!--[if lt IE 9]>      <script src="http://www.scvtennisaces.com/uploads/allimg/190628/033450M47-0.jpg"></script>      <script src="http://www.scvtennisaces.com/uploads/allimg/190628/0334502426-1.jpg"></script>  <![endif]-->

<div >.col-md-7
<div >
<div >
row的内部嵌套
</div>
<div >row的内部嵌套</div>
</div>
</div>
<div >.col-md-5</div>
</div>
<!--通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序。-->
<div >
<div >pull</div>
<div >push</div>
</div>
<!--在标题内还可以包含 <small> 标签或赋予 .small 类的元素,可以用来标记副标题。-->

  第二步:在body最下面,引入JS文件

<h1>h1. Bootstrap heading
<small>Secondary text</small>
</h1>
<h2>h2. Bootstrap heading
<small>Secondary text</small>
</h2>
<h3>h3. Bootstrap heading
<small>Secondary text</small>
</h3>
<h4>h4. Bootstrap heading
<small>Secondary text</small>
</h4>
<h5>h5. Bootstrap heading
<small>Secondary text</small>
</h5>
<h6>h6. Bootstrap heading
<small>Secondary text</small>
</h6>
<!--页面主体
Bootstrap 将全局 font-size 设置为 14px,line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。
另外,<p> (段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。-->

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->  <script src="http://www.scvtennisaces.com/uploads/allimg/190628/03345022A-2.jpg"></script>    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->  <script src="http://www.scvtennisaces.com/uploads/allimg/190628/0334505054-3.jpg"></script>

<div>
<!--对于被删除的文本,使用标签<del>-->
<del>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus</del>
<!--着重 通过增加 font-weight 值强调一段文本。可以使用标签<strong-->
et magnis <strong>dis parturient</strong> montes,
<!--用倾斜来强调的文本,使用标签<em>-->
<em>nascetur ridiculus mus.</em>
Nullam id dolor id nibh ultricies vehicula.
<!--用于突出文本中某些文字,使用标签<mark>-->
Cum sociis natoque
<mark>penatibus</mark>
et magnis dis parturient montes,
<!--对于没有用的文本,使用标签<s>-->
<s> nascetur ridiculus mus.</s> Donec ullamcorper nulla non metus auctor fringilla.
<!--对于插入的文本,使用标签<ins>-->
<ins>Duis mollis, est non commodo luctus</ins>
<!--在中心内容中 添加lead类让段落突出显示-->
<p >nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<!--为文本添加下划线,使用标签<u>-->
<u>Donec ullamcorper nulla non metus</u>
auctor fringilla.</p>

2、栅格系统

<!--在 HTML5 中可以放心使用 <b> 和 <i> 标签。<b> 用于高亮单词或短语,不带有任何着重的意味;而 <i> 标签主要用于发言、技术词汇等。-->
<b>The following snippet of text is rendered as italicized text.</b><i>The following talicized text.</i>
</div>
<div>
<!--通过文本对其齐,可以文本对齐-->
<p >Left aligned text.</p>

  <div ></div>主要区域

<p >Center aligned text.</p>

  <div ></div>一行区域

<p >Right aligned text.</p>

  <div ></div>

<p >Justified text.</p>

  <div ></div>两个col-md-* 加起来在一个row中,共为12个格;col-ms-*col-xs-*col-lg-*

<p >No wrap text.</p>
<!--通过这几个类可以改变文本的大小写。-->
<p >Lowercased text.(使其全部变为小写)</p>

  栅格推移 col-md-offset-* 推移*个格

<p >Uppercased text.(使其全部变为大写)</p>

  div栅格整体推移 col-md-pull-* 整体前拉 col-md-push-*

<p >Capitalized text.(使其每个单词首字母变为大写)</p>
<!--Bootstrap的缩语 当鼠标悬停在缩写和缩写词上时就会显示完整内容,Bootstrap 实现了对 HTML 的 <abbr> 元素的增强样式。缩略语元素带有 title 属性,
外观表现为带有较浅的虚线框,鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上, 但完整的内容需要包含在 title 属性。-->
<!--基本缩语,如想看完整的内容可把鼠标悬停在缩略语上, 但需要为 <abbr> 元素设置 title属性,title属性为缩语的完整内容。-->
<abbr title="看不到我,看不到我!">attr</abbr>
<!--首字母缩语,为缩略语添加 .initialism 类,可以让 font-size 变得稍微小些。-->
<abbr title="HyperText Markup Language" >HTML</abbr>
<!--Bootstrap中的引用-->
<!--在你的文档中引用其他来源的内容。-->
<!--默认样式的引用将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。对于直接引用,我们建议用 <p> 标签。-->
<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 >
<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
<!--有序列表,排列顺序无关的要紧的元素-->
<ul>
<li></li>
</ul>
<!--顺序至关重要的一组元素。-->
<ol>
<li></li>
</ol>
<!--无样式列表移除了默认的 list-style 样式和左侧外边距的一组元素(只针对直接子元素)。
这是针对直接子元素的,也就是说,你需要对所有嵌套的列表都添加这个类才能具有同样的样式。-->
<ul >
<li></li>
</ul>
<!--内联列表,通过设置 display: inline-block; 并添加少量的内补(padding),将所有元素放置于同一行。-->
<ul >
<li>one</li>
<li>tow</li>
<li>three</li>
</ul>
<!--带有描述的短语列表-->
<dl>
<dt>Description lists</dt>
<dd> A description list is perfect for defining terms.</dd>
<dt>Description lists</dt>
<dd> A description list is perfect for defining terms.</dd>
<dt>Description lists</dt>
<dd> A description list is perfect for defining terms.</dd>
</dl>
<!--水平排列的描述.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起,随着导航条逐渐展开而排列在一行。-->
<dl >
<dt>Description lists</dt>
<dd> A description list is perfect for defining terms.</dd>
<dt>Description lists</dt>
<dd> A description list is perfect for defining terms.</dd>
<dt>Description lists</dt>
<dd> A description list is perfect for defining terms.</dd>
</dl>
<!--自动截断通过 text-overflow 属性,水平排列的描述列表将会截断左侧太长的短语。在较窄的视口(viewport)内,列表将变为默认堆叠排列的布局方式。-->
<dl >
<dt>Description lists</dt>
<dd> A description list is perfect for defining terms.A description list is perfect for defining terms.A
description list is perfect for defining terms.A description list is perfect for defining terms.A
description list is perfect for defining terms.A description list is perfect for defining terms.A
description list is perfect for defining terms.A description list is perfect for defining terms.A
description list is perfect for defining terms.A description list is perfect for defining terms.
</dd>
<dt>Description lists</dt>
<dd> A description list is perfect for defining terms.</dd>
</dl>
</div>
<div>
<!--代码-->
<!--通过 <code> 标签包裹内联样式的代码片段。-->
For example, <code><section></code> should be wrapped as inline.
<!--通过 <kbd> 标签标记用户通过键盘输入的内容。=-->
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> <kbd>,</kbd></kbd>
<!--多行代码可以使用 <pre> 标签。为了正确的展示代码,注意将尖括号做转义处理。-->
<!--还可以使用 .pre-scrollable 类,其作用是设置 max-height 为 350px ,并在垂直方向展示滚动条。-->
<pre ><p>Sample text here...</p></pre>
</div>
<!--表格,表格的基本类有.table:基本表格样式、
.table table-striped:通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。而这一功能不被 Internet Explorer 8 支持。
.table table-bordered:通过 .table-bordered 类为表格和其中的每个单元格增加边框。
.table table-hover:通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
.table table-condensed:通过添加 .table-condensed 类可以让表格更加紧凑,单元格中的内补(padding)均会减半。
-->
<table >

3、排版

</table>
<!--响应式表格将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。-->
<div >
<table >
...
</table>
</div>

  A:<h1>...<h6>字体大小 <small></small>小号字 <h1>Title<small>subtitle</small></h1> subtitle为title的80%

威尼斯人棋牌,<!--Bootstrap的表单-->
<!--单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select>
元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。-->
<div >
<label>用户名称:</label>
<input />
<label>用户密码:</label>
<input />
</div>
<!--为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。
只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。
需要手动设置宽度
在 Bootstrap 中,输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。
在内联表单,我们将这些元素的宽度设置为 width: auto;,因此,多个控件可以排列在同一行。根据你的布局需求,可能需要一些额外的定制化组件。
一定要添加 label 标签
如果你没有为每个输入控件设置 label 标签,屏幕阅读器将无法正确识别。对于这些内联表单,你可以通过为 label 设置 .sr-only 类将其隐藏。
-->
<div >
<form role="form">
<div >
<label for="exampleInputEmail2">Email address</label>
<input type="email" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div >
<div >
<div >@</div>
<input type="email" placeholder="Enter email">
</div>
</div>
<div >
<label for="exampleInputPassword2">Password</label>
<input type="password" id="exampleInputPassword2" placeholder="Password">
</div>
<div >
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" >Sign in</button>
</form>
</div>

  B:全局字体设置为14px

</div>
</body>
</html>

  C:<p></P>两个<p>之间设置了1/2行高的间距,可以加.lead样式,使段落更加突出,加粗。

                                                                                                 待续...

  D:<strong></strong>着重,<em></em>倾斜,类似于html5中的<b></b> <i></i>

 

  E:对齐方式 .text-left,.text-center,text-right


  F:强调CSS  .text-muted 灰色 .text-primary 淡蓝色 .text-success 绿色 .text-info 深蓝色 .text-danger 棕色 .text-warning 橙色

  G:缩略语 <attr title="完整注释">.....</attr>

  H:地址 <address></address>,常与<p>和<small>结合使用

    块级元素整体更改位置 .pull-right .pull-left

  I:列表

  无序列表:<ul><li>111</li>...</ul>

  有序列表:<ol><li>111</li>...</ol>

  无样式列表:在ul中使用.list-unstyled样式

  内联列表:.list-inline 各个项在同一行上

  J:描述

  竖排描述:

本文由威尼斯人棋牌发布于计算机教程,转载请注明出处:威尼斯人棋牌Bootstrap第一天