bootstrap

作者: shallwego_ | 来源:发表于2017-11-23 11:59 被阅读0次

一、在官网下载bootstrap

二、在页面引入bootstrap

1、bootstrap是基于html5和css3的前端框架，因此必须使用<!DOCTYPE html>。
2、使用 <link href="css/bootstrap.min.css" rel="stylesheet">引入bootstrap样式文件
3、如果要使用Bootstrap的js插件，必须先调入jQuery。通常在head中引入css文件，在body底部引入js文件。

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

<h1>----<h6>
Bootstrap和普通的HTML页面一样，定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样。

使用class定义

<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、强调相关的类

text-muted：提示，使用浅灰色（#999）
text-primary：主要，使用蓝色（#428bca）
text-success：成功，使用浅绿色(#3c763d)
text-info：通知信息，使用浅蓝色（#31708f）
text-warning：警告，使用黄色（#8a6d3b）
text-danger：危险，使用褐色（#a94442）

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主要提供了三种代码风格：**

使用<code></code>来显示单行内联代码
使用<pre></pre>来显示多行块代码
使用<kbd></kbd>来显示用户输入代码

（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）表单控件

样式<input class="form-control">
每个控件的bootstrap样式都是通过.form-control设置的。
多行下拉框<select multiple class="form-control">
文本域<textarea class="form-control" rows="3">
无需设置col，默认100%或auto
checkbox和radio
1、 bootstrap解决了checkbox和radio与label标签配合使用容易出现的问题（如对齐），需要按如下规则使用：
①不管是checkbox还是radio都使用label包起来。
②checkbox连同label标签放置在一个名为“.checkbox”的容器内
③radio连同label标签放置在一个名为“.radio”的容器内

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

checkbox、radio水平排列 <lable class="checkbox-inline / radio-inlin
e">
按钮
☑ input[type=“submit”]
☑ input[type=“button”]
☑ input[type=“reset”]
☑ <button>
表单控件大小<inpub class="input-sm / input-lg">
控件禁用 disabled
1、在相应控件上添加disabled属性<input disabled>
2、如果在fieldset上设置了disabled属性，则整个域都被禁用。但<legend>中如果有输入框的话，该输入框则不会被禁用。

网友评论

本文标题：bootstrap

本文链接：https://www.haomeiwen.com/subject/msvvvxtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

bootstrap

一、在官网下载bootstrap

二、在页面引入bootstrap

三、排版

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

2、副标题 <small>

3、段落 <p>

4、强调内容 class="lead"

5、粗体<b> / <strong>

6、斜体<em> / <i>

7、强调相关的类

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

9、列表

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

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

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

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

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

（1）在Bootstrap主要提供了三种代码风格：**

（2）控制代码块 class="pre-scrollable"

11、表格

12、行类

13、表单

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

bootstrap

一、在官网下载bootstrap

二、在页面引入bootstrap

三、排版

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

2、副标题 <small>

3、段落 <p>

4、强调内容 class="lead"

5、粗体<b> / <strong>

6、 斜体<em> / <i>

7、强调相关的类

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

9、列表

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

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

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

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

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

（1）在Bootstrap主要提供了三种代码风格：**

（2）控制代码块 class="pre-scrollable"

11、表格

12、行类

13、表单

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

6、斜体<em> / <i>

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