BootStrap学习

最新推荐文章于 2023-12-26 15:16:58 发布

liyang9999

最新推荐文章于 2023-12-26 15:16:58 发布

阅读量143

点赞数

文章标签： bootstrap

本文链接：https://blog.csdn.net/liyang9999/article/details/104400969

版权

BootStrap学习

一.BootStrap介绍

1.BootStrap是一种前端框架，里面内置了许多css与html的修饰，可以使页面的布局更加整体，更具有观赏性,BootStrap特别适合那种没有前端工程师，就可快速的作出一个页面。

二. 下载与使用

下载：http://v3.bootcss.com/getting-started/
下载完成后，拷贝dist/css 中的 bootstrap.min.css 到项目css中拷贝dist/js 中的 bootstrap.min.js 到项目的js中
下载jquery.js http://jquery.com/ 4. 在html中模板为:

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

三.布局容器和栅格网格系统

1.布局容器：

.container类用于固定宽度并支持响应布局的容器
```
<div class="container">   ... </div>
```
.container-fluid 类用于100% 宽度，占据全部视口（viewport）的容器。
```
<div class="container-fluid">   ... </div> 
```

2.栅格网格系统

1.BootStrap提供了一套响应式，移动设备优先的栅格系统，会随着屏幕的大小来调节页面的分辨率显示，系统会自动分为12列。栅格系统会通过这些列组合来创建页面布局。

<div class="container">
	<div class="row">
		 <div class="col-md-4">4 列</div>       
		 <div class="col-md-8">8 列</div> 
	</div>
</div>

2.列组合

如果列总和数超过12，大于的那行会自动跳到下一行。

<div class="container">     
	<div class="row">       
		<div class="col-md-4">4 列</div>       
		<div class="col-md-8">8 列</div> 
	</div>     
	<div class="row">       
		<div class="col-md-2">2 列</div>       
		<div class="col-md-10">10 列</div>     
	</div> 
</div>

四.常用样式

1.标题

Bootstrap 和普通的 HTML 页面一样，定义标题都是使用标签

到

,只不过 Bootstrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样。为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6 六个类名。同时后面可以紧跟着一行小的副标题或使用.small

<h1>h1. Bootstrap heading<small>副标题</small></h1> 
<div class="h1">Bootstrap 标题 1<span class="small">副标题</span></div>

2.段落

:小号字 :加粗 :斜体

<p class="lead"><small>以后的</small><b>你</b>会<i>感谢</i>现在<em>努力</em> 的<strong>你</strong></p>

3.文本对齐

左对齐，取值left ; 居中对齐，取值center; 右对齐，取值right ; 两端对齐，取值justify。

<p class="text-left">我居左</p> 
<p class="text-center">我居中</p> 
<p class="text-right">我居右</p> 
<p class="text-justify">我两端对齐北京尚学堂-cctv 央视网广告合作伙伴,专业 IT 培训 机构,口碑最好的 java 培训、,iOS 培训,android 培训,大数据培训,web 前端,0 元入学,先就 业后付款,平均就业薪水 9500 以上</p>

4.列表

1.去点列表:class=“list-unstyled”

<ul class="list-unstyled">     
	<li>无序项目列表一</li>  
	<li>无序项目列表二</li> 
</ul>

2.内联列表: class=” list-inline”,，可以将列表变成垂直水平

5.表格

1.table:基础表格

2.table-striped：斑马线表格

3.table-bordered：带边框的表格

4.table-hover：鼠标悬停高亮的表格

5.table-condensed：紧凑型表格，单元格没内距或者内距较其他表格的内距小

6.表单

7.按钮

liyang9999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BootStrap学习

BootStrap学习一.BootStrap介绍1.BootStrap是一种前端框架，里面内置了许多css与html的修饰，可以使页面的布局更加整体，更具有观赏性,BootStrap特别适合那种没有前端工程师，就可快速的作出一个页面。二. 下载与使用下载：http://v3.bootcss.com/getting-started/下载完成后，拷贝dist/css 中的 bootstr...
复制链接

扫一扫