关于bootstrap的一些基础东西

Bootstrap是一个前端框架，可帮助开发人员启动Web开发程序。

Bootstrap网格系统可以创建一个移动友好和响应式的网站。

Bootstrap封装了许多有用的组件，可以很容易地在网站项目中使用。

Bootstrap 是基于 HTML、CSS、JavaScript 的。

打开代码编辑器并创建一个新的HTML文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
</head>
<body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</body>
</html>

在页面底部包含JavaScript文件 – 在关闭<body>标签（即</body>）之前，以提高网页的性能。
注意css和Javascript的相对路径。

附上来自菜鸟联盟提供的几个链接:

<!– 新 Bootstrap 核心 CSS 文件 –>

<!– 可选的Bootstrap主题文件（一般不使用） –>

<!– jQuery文件。务必在bootstrap.min.js 之前引入 –>

<!– 最新的 Bootstrap 核心 JavaScript 文件 –>

网格系统允许我们正确地布局我们网站的内容。

它将屏幕划分为多个行和列，可用于创建各种类型的布局。

一旦我们定义了行和列，我们可以在其中放置HTML元素。

Bootstrap的网格系统将屏幕划分为列 – 每行最多12个。

列宽根据屏幕的大小而变化。

因此，Bootstrap的网格系统是响应式的，因为当浏览器窗口的大小改变时，列动态地调整大小。

Bootstrap也有很多非常好看的button 按钮标签可以使用,比起HTML自定义的按钮好看很多。

用法: <button class=”btn btn-XX”>name </button>

按钮有各种颜色选项：

btn-default为白色
btn-primary为深蓝色
btn-success为绿色
btn-info为浅蓝色
btn-warning为橙色
btn-danger为红色

各种尺寸：

btn-lg用于大按钮
btn-sm用于小按钮
btn-xs用于超小的按钮

还有一些辅助类的按钮可用：

btn-block将使按钮跨越整个网格
active将使按钮看起来像它当前点击
disabled将使按钮无法单击并显示渐变色。

下面是在站点或 app 中使用图标的通用语法：

引用链接： <link rel=”stylesheet” href=”https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css”>

各图标详情介绍戳这里！

一个比较实用的东东，可以写在类似于按钮里面。下面附一段代码和其效果图。

<!DOCTYPE html>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<html>
<head>
	<title>try</title>
</head>
<body>
<h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <div class="col-xs-4">
<button class="btn btn-block btn-danger active"><i class="glyphicon glyphicon-heart">  Like</i></button>
<button class="btn btn-block btn-success"><i class="glyphicon glyphicon-tree-deciduous"> 123</i></button>
<button class="btn btn-block btn-warning"><i class="glyphicon glyphicon-repeat"> Refresh</i></button>
<button class="btn btn-block btn-info"><i class="glyphicon glyphicon-search"> Search</i></button>
</div>
</body>
</html>

关于Bootstrap，还有好多好多，慢慢探索吧。(oﾟ▽ﾟ)o

关于bootstrap的一些基础东西

猜你喜欢