-
在排版中离不开文本的对齐方式。在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格：
☑ 左对齐，取值left
☑ 居中对齐，取值center
☑ 右对齐，取值right
☑ 两端对齐，取值justify
为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：
☑ .text-left：左对齐
☑ .text-center：居中对齐
☑ .text-right：右对齐
☑ .text-justify：两端对齐
查看全部 -
<ol>
<li>有序项目列表一</li>
<li>有序项目列表二</li>
<ol class="list-unstyled">
<li>有序项目二级列表一</li>
<li>有序项目二级列表二</li>
<ul>
<li>无序三级项目列表一</li>
<li>无有序三级项目列表二</li>
<ul class="list-unstyled">
<li>无序四级项目列表一</li>
<li>无序四级项目列表二</li>
</ul>
<li>无有序三级项目列表三</li>
</ul>
<li>有序项目二级列表三</li>
</ol>
<li>有序项目列表三</li>
</ol>
查看全部 -
Bootstrap框架在这一部分做了一定的变更，不再一味追求归零，而是更注重重置可能产生问题的样式（如，body,form的margin等），保留和坚持部分浏览器的基础样式，解决部分潜在的问题，提升一些细节的体验，具体说明如下：
移除body的margin声明
设置body的背景色为白色
为排版设置了基本的字体、字号和行高
设置全局链接颜色，且当链接处于悬浮“:hover”状态时才会显示下划线样式
查看全部 -
bootstrap让非标题元素具有和标题元素相同的样式：
添加类名：<div class="h1"></div>
......
<div class="h6"></div>
查看全部 -
副标题：给h系列标签中嵌套一个<small></small>标签即可。
查看全部 -
在制作web页面时，前端人员都会设置全局的css样式。大部分前端人员都有归零思想，这就使得web页面的某些功能不能实现。而bootstrap在这上面做了变更，不再追求归零思想，而是注重重置所产生的问题，这些问题在bootstrap.css中都得到了解决。
查看全部 -
理解代码截图即可。
查看全部 -
bootstrap中文网：http://www.bootcss.com
点击进入bootstrap中文网，点击起步（bootstrap会教你如何轻松使用它），你可以下载bootstrap文档，也可以通过引入bootCDN加速服务来使用bootstrap。
bootstrap使用：
bootstrap给我们提供了下面这套简单的模板让我们很容易使用它：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- 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> <h1>你好，世界！</h1> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> </body> </html>
bootstrap所有的JavaScript插件都依赖于jQuery，所以jQuery必须在bootstrap之前引入。
引入时，将css放在head中，将jQuery和bootstrap的压缩包放在body的最后边。
查看全部 -
bootstrap介绍：
1.简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集；
2.基于html5、css3的bootstrap，具有大量的诱人特性：有好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档；
3.自定义jQuery插件，完整的类库，基于less等。
查看全部 -
水平定义列表就像内联列表一样，Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。
此处添加了一个媒体查询。也就是说，只有屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果。
查看全部 -
bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可。
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码：
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
查看全部 -
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>内联列表</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<ul class="list-inline">
<li>W3cplus</li>
<li>Blog</li>
<li>CSS3</li>
<li>jQuery</li>
<li>PHP</li>
</ul>
<!--下面是代码任务部分-->
城市：<ol class="list-inline">
<li>北京</li>
<li>上海</li>
<li>南京</li>
<li>厦门</li>
</ol>
</body>
</html>
查看全部 -
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>去点列表</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<ol>
<li>有序项目了列表一</li>
<li>有序项目了列表二
<ul>
<li class="list-unstyled">有序二级项目列表一</li>
<li class="list-unstyled">有序二级项目列表二
<ul>
<li>无序三级项目列表一</li>
<li>无序三级项目列表二
<ol>
<li class="list-unstyled">无序四级项目列表一</li>
<li class="list-unstyled">无序四级项目列表二</li>
</ol></li>
<li>无序三级项目列表三</li>
</ul></li>
<li class="list-unstyled">有序二级项目列表三</li>
</ul></li>
<li>有序项目了列表三</li>
</ol>
</body>
</html>
查看全部 -
Bootstrao中的JS插件依赖于jQuery因此jQuery要在bootstrap之前引用。
查看全部 -
Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。
查看全部
举报