bootstrap

2017-11-23  本文已影响0人  shallwego_

一、在官网下载bootstrap

二、在页面引入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>

三、排版

1、标题 <h1>-<h6> / class="h1"

<div class="h1"> 标题</div>  //h1-h6，效果与上面相同。

2、副标题 <small>

bootstrap使用<small>标签来制作副标题。

<h3>Bootstrap标题三<small>我是副标题</small></h3>

3、段落 <p>

4、强调内容 class="lead"

5、粗体<b> / <strong>

6、 斜体<em> / <i>

7、强调相关的类

8、文本对齐风格 class="left / right / center / justify"

9、列表

Bootstrap根据平时的使用情形提供了六种形式的列表：
☑ 普通列表
☑ 有序列表
☑ 去点列表
☑ 内联列表
☑ 描述列表
☑ 水平描述列表

（1）去点列表 class="list-unstyled"

去除默认的列表样式的风格。

（2） 内联列表 class="list-inline"

就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。

（3）定义列表 <dl><dt><dd>

对于定义列表而言，Bootstrap并没有做太多的调整，只是调整了行间距，外边距和字体加粗效果。

（4）水平定义列表 class="horizontal"

实现水平定义列表显示效果。

10、代码 <code><pre><kbd>

（1）在Bootstrap主要提供了三种代码风格：**
（2）控制代码块 class="pre-scrollable"

<pre>元素一般用于显示大块的代码，并保证原有格式不变。但有时候代码太多，而且不想让其占有太大的页面篇幅，就需要控制代码块的大小。使用 class="pre-scrollable" 就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。

11、表格

Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。
主要包括：
☑ table：基础表格
☑ table-striped：斑马线表格
☑ table-bordered：带边框的表格
☑ table-hover：鼠标悬停高亮的表格
☑ table-condensed：紧凑型表格
☑ table-responsive：响应式表格（当浏览器可视区域小于768px时，表格底部会出现水平滚动条。大于768px时，表格底部水平滚动条就会消失。）

12、行类

Bootstrap为表格的行元素<tr>提供了五种不同的类名，每种类名控制了行的不同背景颜色。


13、表单

（1）**基础表单
<div class="form-group">
　<label for="inputId">标签：</label>
　　<input class="form-control" ">
</div>

<form role="form">
   <div class="form-group">
      <label for="exampleInputEmail1">邮箱：</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
   </div>
   <div class="form-group">
      <label for="exampleInputPassword1">密码</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码">
   </div>
   <div class="checkbox">
      <label>
        <input type="checkbox"> 记住密码
      </label>
    </div>
    <button type="submit" class="btn btn-default">进入邮箱</button>
</form>

（2）水平表单 <form class="form-horizontal">
Bootstrap框架默认的表单是垂直显示风格，但很多时候我们需要的水平表单风格。

（3）内联表单 <form class="form-inline">


隐藏标签<lable class="sr-only">

（4）表单控件

<div class="checkbox">
    <label>
      <input type="checkbox" value="">
      记住密码
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
      喜欢
    </label>
  </div>
    <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
      不喜欢
    </label>
  </div>
上一篇下一篇

猜你喜欢

热点阅读