前端框架Bootstrap基础——学习周记5

前端框架Bootstrap基础

  • Bootstrap CSS-简介
    • 1 Bootstrap 网格系统
    • 2 排版
      • 2.1 内联子标题
      • 2.2 强调
    • 3 表格
    • 4 好玩的按钮
    • 5 厉害的导航

Bootstrap CSS-简介

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,因此在学习本篇文章之前,您需要先掌握 HTML 和 CSS 的基础知识哟~
点击:HTML基础 开始学习
点击:CSS基础 开始学习

1 Bootstrap 网格系统

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。

响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。
前端框架Bootstrap基础——学习周记5_第1张图片

2 排版

2.1 内联子标题


<html>
<head>
<meta charset="utf-8"> 
<title>Bootstrap 实例 - 内联子标题title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">script>
head>
<body>
	<h1>我是标题1 h1. <small>我是副标题1 h1small>h1> 
	<h2>我是标题2 h2. <small>我是副标题2 h2small>h2>
	<h3>我是标题3 h3. <small>我是副标题3 h3small>h3>
	<h4>我是标题4 h4. <small>我是副标题4 h4small>h4>
	<h5>我是标题5 h5. <small>我是副标题5 h5small>h5>
	<h6>我是标题6 h6. <small>我是副标题6 h6small>h6>
body>
html>

运行结果如图:
前端框架Bootstrap基础——学习周记5_第2张图片

2.2 强调


<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 强调title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">script>
head>
<body>
<small>本行内容是在标签内small><br>
<strong>本行内容是在标签内strong><br>
<em>本行内容是在标签内,并呈现为斜体em><br>
<p class="text-left">向左对齐文本p>
<p class="text-center">居中对齐文本p>
<p class="text-right">向右对齐文本p>
<p class="text-muted">本行内容是减弱的p>
<p class="text-primary">本行内容带有一个 primary classp>
<p class="text-success">本行内容带有一个 success classp>
<p class="text-info">本行内容带有一个 info classp>
<p class="text-warning">本行内容带有一个 warning classp>
<p class="text-danger">本行内容带有一个 danger classp>
body>

运行结果如图:
前端框架Bootstrap基础——学习周记5_第3张图片

3 表格


<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 基本的表格title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">script>
head>
<body>

<table class="table">
	<caption>基本的表格布局caption>
   <thead>
      <tr>
         <th>姓名th>
         <th>学号th>
      tr>
   thead>
   <tbody>
      <tr>
         <td>Lucytd>
         <td>123456td>
      tr>
      <tr>
         <td>Lindatd>
         <td>123457td>
      tr>
   tbody>
table>

body>
html>

运行结果如图:
前端框架Bootstrap基础——学习周记5_第4张图片

4 好玩的按钮


<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 按钮选项title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">script>
head>
<body>


<button type="button" class="btn btn-default">默认按钮button>

<button type="button" class="btn btn-primary">原始按钮button>

<button type="button" class="btn btn-success">成功按钮button>

<button type="button" class="btn btn-info">信息按钮button>

<button type="button" class="btn btn-warning">警告按钮button>

<button type="button" class="btn btn-danger">危险按钮button>

<button type="button" class="btn btn-link">链接按钮button>

body>
html>

运行结果如图:
前端框架Bootstrap基础——学习周记5_第5张图片

5 厉害的导航

创建一个标签式的导航菜单:
以一个带有 class .nav 的无序列表开始。
添加 class .nav-tabs。


<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap 实例 - 导航栏title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">script>
head>
<body>

<nav class="navbar navbar-default" role="navigation">
	<div class="container-fluid">
	<div class="navbar-header">
		<a class="navbar-brand" href="#">我的导航栏a>
	div>
	<div>
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">苹果a>li>
			<li><a href="#">樱桃a>li>
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">
					我最喜欢
					<b class="caret">b>
				a>
				<ul class="dropdown-menu">
					<li><a href="#">柚子a>li>
					<li><a href="#">青提a>li>
					<li><a href="#">!!!a>li>
					<li class="divider">li>
					<li><a href="#">分离的链接a>li>
					<li class="divider">li>
					<li><a href="#">另一个分离的链接a>li>
				ul>
			li>
		ul>
	div>
	div>
nav>
body>
html>

运行结果如下:
5
前端框架Bootstrap基础——学习周记5_第6张图片

★好啦~Bootstrap的学习并未随着本篇文章而结束哦,敬请期待下一篇更精彩有趣的内容吧★

!喜欢的话不要忘记【一键三连】哦!撒花撒花~

你可能感兴趣的:(BOOTSTRAP,bootstrap,前端)